Displays icons with headings and short descriptions to highlight key features, services, benefits, or store policies.
Homepage
Product page
Service highlights
Shipping and return benefits
Trust and feature section
Shopify Admin → Online Store → Themes → Customize → Add section → Icon box
Icon column: Adds an icon with supporting content.
Heading: Adds a title.
Text: Adds a short description.
Spacer: Adjusts spacing between blocks.
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. |
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. |
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. |
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. |
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.
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. |