Icon Grid is a Shopify theme section in the Section Star library. Display a grid of trust badges, certifications, or feature icons. Choose from 25+ pre-built icon options.
About the Icon Grid section
The Icon Grid section allows you to organize and display a grid of icons, images, or videos with accompanying text and links. This section is highly customizable, with options for fonts, colors, icon shapes, text sizes, media fitting styles, and more. It is responsive and automatically adapts to different screen sizes, featuring a slideshow mode on mobile devices for enhanced user interaction.
Live demo
Use cases
-
Feature Highlights: Use the Icon Grid to showcase the main features or benefits of your products, such as free shipping, secure payments, or eco-friendly materials.
-
Product Categories: Display icons representing different product categories, helping customers navigate your store more easily.
-
Customer Services: Illustrate the various customer services you offer, like easy returns, 24/7 support, or live chat.
-
Promotional Offers: Present current promotions or discounts using eye-catching icons and brief descriptions to draw in customers.
-
Brand Values: Highlight your brand values, such as sustainability, quality, or innovation, to build trust with your audience.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Icon Design
Set the display of icon
| Setting | Type | Default |
|---|---|---|
| Headline Size | Range | 18 |
| Icon Text Alignment | Text alignment | center |
| Mobile Icon Text Alignment | Text alignment | center |
| Icon Shape | Select (Square, Rounded, Circle) | circle |
| Icon Padding | Number | 25 |
| Icon Size | Range | 40 |
| Background | Color or gradient | linear-gradient(164deg, #0D8BF4 0%, #… |
| Icon Color | Color | #fff |
Image and Video Icons
Set how image and videos appear in the icons
| Setting | Type | Default |
|---|---|---|
| Media Fit | Select (Contain, Cover, Size) | cover |
| Media Height (if Size selected) | Number | — |
Grid Design
Set the display of the grid
| Setting | Type | Default |
|---|---|---|
| Gap Between Columns | Number | 20 |
Mobile Display
Set the mobile display
| Setting | Type | Default |
|---|---|---|
| Mobile Display | Select (Slideshow, Stacked) | slideshow |
| Columns (when stacked) | Select (1 column, 2 columns, 3 columns) | 1fr |
| Slideshow Progress Background Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slideshow Progress Foreground Color | Color or gradient | linear-gradient(177deg, rgba(17, 17, … |
| Slideshow Indicator Color | Color | #111 |
| Enable Autoplay? | Checkbox | Off |
| Autoplay Time | Select (Slowest (10s), Slower (7.5s), Normal (5s), Faster (3s), Fastest (2s)) | 5000 |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
Icon block settings
| Setting | Type | Default |
|---|---|---|
| Icon | Select (No Icon, Cart, Gift, Gift Card, Shipping, Payment…) | tag |
| Headline | Inline rich text | <b>Headline</b> |
| Text | Inline rich text | Some followup text to build on the fe… |
| Link (optional) | URL | — |
Image block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Headline | Inline rich text | <b>Headline</b> |
| Text | Inline rich text | Some followup text to build on the fe… |
| Link (optional) | URL | — |
Video block settings
| Setting | Type | Default |
|---|---|---|
| Video | Video | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
| Headline | Inline rich text | <b>Headline</b> |
| Text | Inline rich text | Some followup text to build on the fe… |
| Link (optional) | URL | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Icon Grid”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.