Skip to content
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
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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) |