Icon grid
Section overview
The Icon Grid section displays a customizable grid of icon cards with text content. It allows merchants to showcase features, benefits, or services with visual elements.
Common Use Cases
Highlighting product features or benefits
Showcasing services or offerings
Creating feature comparison grids
Displaying brand values or commitments
Usage Tips
Use consistent icon sizes for a clean, professional appearance
Keep text content concise for better readability
Consider using the split layout option for sections with longer headings or content
For mobile, reduce the number of columns to ensure content remains readable
Section Settings
Heading
The main heading for the section
Content
The descriptive text for the section
Button label
Text displayed on the button
Button URL
The URL where the button links to
Top spacing
Amount of space above the section (0-300px)
Bottom spacing
Amount of space below the section (0-300px)
Color scheme
The background color scheme for the section
Custom color
Custom background color when "Custom" color scheme is selected
Text color
Override for the text color
Border color
Color of the section border
Button color
Style and color for the section button
Enable color fade
Enable background color transition when scrolling
Border position
Position of the section border (none, top, bottom, or both)
Desktop columns
Number of columns to display on desktop devices (1-8)
Mobile columns
Number of columns to display on mobile devices (1-4)
Content alignment
Horizontal alignment of the section content
Enable margin
Enable horizontal margin on the section
Enable split
Split the section into a header area and content area
Enable split heading
Allow heading to span full width in split layout
Visibility
Control section visibility on different device types
Block Settings
Icon
The Icon block allows you to add individual icon cards to the grid. Each block can have its own icon, heading, and content.
Block limit: 20
Icon
The image to display as the icon (recommended 256px square)
Size
Size of the icon (small, normal, or large)
Heading
The heading text for this icon card
Content
The descriptive text for this icon card
Enable padding
Add padding inside the icon card
Color scheme
Background and text color scheme for this icon card
Border color
Color of the border around this icon card
Alignment
Vertical or horizontal alignment of icon and text
Content alignment
Horizontal alignment of the content within the card
Row span
Number of rows this card should span (1-6)
Column span
Number of columns this card should span (1-6)
Last updated
Was this helpful?