1. Purpose
Displays icons with headings and short descriptions to highlight key features, services, benefits, or store policies.
2. Common use cases
Homepage
Product page
Service highlights
Shipping and return benefits
Trust and feature section
3. How to add
Shopify Admin → Online Store → Themes → Customize → Add section → Icon box
4. Main blocks
Icon column: Adds an icon with supporting content.
Heading: Adds a title.
Text: Adds a short description.
Spacer: Adjusts spacing between blocks.
5. Key settings
5.1. Icon column
Setting | Description |
|---|---|
Icon | Selects a preset icon. |
Custom SVG icon | Adds a custom SVG icon. |
Custom image icon | Uploads an image instead of an icon. |
Icon width | Sets icon size on desktop, tablet, and mobile. |
5.2. Heading and Text
Setting | Description |
|---|---|
Heading / Text | Adds the main or supporting content. |
Hidden | Removes manual line breaks on mobile. |
Hidden on mobile | Hides the block on mobile devices. |
Size | Selects a preset or custom text size. |
Text color | Sets the text color. |
Responsive font size | Sets different sizes by device. |
Font weight | Controls text thickness. |
Letter spacing | Adjusts spacing between characters. |
5.3. Item layout
Setting | Description |
|---|---|
Icon circle | Displays the icon inside a circle. |
Border style | Selects the box border style. |
Icon vertical | Places the icon above the content. |
Carousel on mobile | Enables horizontal scrolling on mobile. |
Items per row | Sets the number of items on desktop, tablet, and mobile. |
Space between icon and content | Controls spacing between the icon and text by device. |
5.4. Section layout
Setting | Description |
|---|---|
Color scheme | Controls the section colors. |
Background color wrap | Applies the background to the container or full width. |
Section padding | Adjusts spacing above and below the section. |
Rate padding (mobile) | Controls responsive spacing on mobile. |
Custom CSS | Adds custom styles to this section only. |
6. Best practices
Use icons with a consistent style and size.
Keep headings short and descriptions concise.
Use three or four items per row on desktop.
Enable a mobile carousel when several items are added.
Avoid mixing preset icons, SVGs, and image icons in the same section.
Keep icon and text spacing consistent.
7. Common issues
Issue | Solution |
|---|---|
Icon is not showing | Select an icon, add valid SVG code, or upload an image. |
Icons have inconsistent sizes | Use matching icon widths for all items. |
Mobile layout looks crowded | Reduce items per row or enable Carousel on mobile. |
Icon and text are too far apart | Reduce the spacing between icon and content. |
Background does not span the page | Set Background color wrap to Full width. |
Text looks uneven | Use consistent heading and text sizes across all items. |
