# 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)               |