Icon with text
A row of short points, each with an icon or small image. Standard for shipping, returns and guarantee messaging.
At a glance: Add it to any page with Add section. Holds up to 8 blocks.
Good for
- Free shipping, easy returns and secure checkout messages under the hero
- A row of product benefits with an icon each
- A split layout with a heading on one side and benefit cards on the other
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Icon with text and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Layout
| Desktop layout | Chooses the arrangement of the section content.
Applies to desktop only. Choose Full width (default) or Split. |
| Content position | In the Split layout, where the heading and description sit vertically beside the cards: level with the top, the middle or the bottom.
Choose Top (default), Center or Bottom. Only appears when Desktop layout is Split. |
| Enable media | Adds an image next to the cards. With media on, the cards always sit in a two-column grid and the desktop carousel is turned off.
Off by default. |
| Desktop image | Background image used on desktop.
2880 x 1280px (large) .jpg recommended. Only appears when Enable media is on. |
| Desktop image position | Which side of the text the image sits on, on desktop.
Choose Left (default) or Right. Only appears when Enable media is on and Desktop layout is not Split. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
1200 x 900px .jpg recommended. Only appears when Enable media is on. |
| Mobile image position | Whether the image sits above or below the text on mobile.
Choose Top (default) or Bottom. Only appears when Enable media is on. |
Card style
| Desktop icon size | Displayed size of the icon.
Adjustable from 20px to 80px (default 48px). |
| Mobile icon size | How large the icons appear on phones. Set it separately from desktop so icons don't crowd narrow cards.
Adjustable from 16px to 80px (default 32px). |
| Card layout | Vertical puts the icon above the heading; Horizontal puts it to the left of the text. Horizontal cards always show one per row on mobile.
Choose Vertical (default) or Horizontal. |
| Content alignment | Aligns the text inside each card.
Default: Left. |
| Style | Visual treatment of each card.
Choose Fill (default) or Transparent. |
| Desktop columns | How many items sit side by side on desktop.
Choose 2, 3 (default) or 4. Only appears when Enable media is off and Desktop layout is not Split. |
| Desktop columns | How many cards sit side by side next to the heading in the Split layout.
Choose 2 or 3 (default). Only appears when Desktop layout is Split and Enable media is off. |
| Enable carousel on desktop | Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.
Off by default. Only appears when Desktop layout is not Split and Enable media is off. |
| Enable carousel on mobile | Turns the row into a swipeable carousel on mobile.
Off by default. |
| Mobile columns | How many items sit side by side on mobile.
Choose 1 (default) or 2. Only appears when Enable carousel on mobile is off and Card layout is not Horizontal. |
| Heading size | Heading size on each card, from the sizes in Theme settings → Typography.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Card block
Icon
| Icon | A built-in icon for this card. Upload a Custom icon to use your own instead.
Choose Store, Phone, Heart, User, Check, Check circle, Star, Lab, Info, Truck, Free shipping (default), Ruler, Returning, Return, Secure, Credit card, Gift, Tag, Discount, Map pin, Package, Clock, Wallet, Coupon, Award, Barcode, Diamond, Leaf, Apple, Gluten free, Gluten, Vegan, Dairy, Dairy free, No added sugar, Protein, Droplet, Droplet free, Bolt, Moon, Brain, Recycle, Envelope, Chat, Sparkle, Flame, Recurring, Lock, Globe, Calendar, Nut off, Sprout, Arrow right, Arrow up right, Arrow left, Chevron right, Chevron down, Plus, Minus, Cross, Play, Cart, Shopping cart, Search, Link, Download, Home, Hamburger, Edit, Login, Error, Arrow up, Chevron left, Chevron up, Arrow down, Filter, Trash, Share, Eye, Sound on, Sound off, Expand, Copy, Question, Warning, Sticky note, Notification, Swap, List, Grid, Logout or Check badge. |
| Custom icon | Your own icon, used instead of the preset icon above.
Overrides the selected icon. Use a transparent .svg or .png. |
Content
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
Tips
- Keep each card to a heading and one line. These cards are scanned, not read.
- Choose icons from the same family. Mixing built-in icons with your own uploads looks uneven; if you upload one, upload them all.
- Use Horizontal cards for long lists. Icons to the left of the text stack neatly on mobile, one per row.
- Place it right after the hero or near the add-to-cart area of a product template, where reassurance matters most.
Troubleshooting
The Enable carousel on desktop option has disappeared
The desktop carousel only works with the full-width layout and no media. It's hidden when Desktop layout is Split or Enable media is on.
My cards show in two columns even though I picked more
With Enable media on, cards always sit in a two-column grid next to the image, whatever Desktop columns is set to.
My custom icon replaced the preset one
A Custom icon always wins over the preset Icon. Remove the upload to go back to the built-in icon.