Section: Text with Icons

Everything you'll need to know on how to setup your Text with Icons section.

The Text with Icons section makes it possible for you to highlight your store's value props with neat icon-led cards. Perfect for a trust bar, shipping promises, return policies, or a 'Why choose us' row that builds buyer confidence at a glance.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Text with Icons, then click on it.

3) Done — your Text with Icons section is added.

The general settings contain the styling, layout, and SEO setup for the Text with Icons section. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. The cards inherit the section's background, text, and border colors automatically.

The settings under Section Header control the title and subtitle that appear above the icon cards.

Fill in the title of the section. For example: Why Choose Us or Why Shop With Us. Don't want to show a title? Simply leave the field empty.

Fill in a short tagline that supports the title. For example: Everything you need for a great shopping experience. Leave the field empty to hide the subtitle entirely.

Select the visual size of the title from H1 down to H6. The default is H2 — a comfortable balance that pairs well with most homepage sections.

Set the maximum font size of the subtitle on desktop, between 12 px and 24 px. On mobile the subtitle scales down automatically. Recommended: 15–18 px.

The settings under SEO help search engines and screen readers understand the content of the section.

Accessible label for screen readers, applied to the outer section. Comes in handy when your visible title is missing or doesn't fully describe what the section is about. The default Features works for most cases.

Tick this box to add structured data (ItemList) for search engines. This helps Google show your features as a rich snippet in search results. There's no visual change on the page — only behind the scenes for crawlers.

The settings under Layout control the width of the section and the spacing between cards.

Set the maximum width of the section content, from 1000 px up to 1600 px. Smaller values create a tighter layout; larger values let the cards breathe more on wide screens. Default: 1400 px.

Set the spacing between cards, both horizontally and vertically. Default is 25 px on desktop and automatically reduces to 16 px on mobile.

Vertical space between the icon and the heading inside each card. Larger values create more breathing room — useful with smaller icons that look lost up top.

The settings under Item styling control how each card looks — borders, corners, and the hover effect.

Thickness of the border around each card, from 0 to 5 pixels. Set to 0 for a borderless flat look. The border color is automatically derived from your color scheme.

Round the corners of each card, from 0 up to 30 pixels. Heads up: setting this to 0 follows your theme's global UI border radius. To get truly sharp corners, set it to 1 pixel.

Tick this box to lift each card slightly and add a soft shadow when visitors hover over it (desktop only). Want a static, flat look? Simply uncheck it.

The settings under Typography control the size of the heading and content text inside each card.

Select the visual size of each card's heading from H1 to H6. The default is H4 — small and tidy inside the cards while still standing out from the description text.

Set the maximum desktop font size for the description text, from 12 px to 20 px. Mobile scales down automatically. Recommended: 14–16 px for the cleanest look.

The settings under Spacing control the amount of whitespace above and below the section. You can adjust desktop and mobile independently to dial in the right rhythm for your page.

Space above the section on screens wider than 767 px. From 0 to 120 pixels. The default 60 px works well on most homepages.

Space below the section on screens wider than 767 px. From 0 to 120 pixels. The default 60 px works well on most homepages.

Space above the section on screens 767 px and narrower. From 0 to 80 pixels. The default 40 px gives a more compact feel on phones.

Space below the section on screens 767 px and narrower. From 0 to 80 pixels. The default 40 px gives a more compact feel on phones.

Each card is an individual item block. To add an item, click Add block inside the section and choose Item. There's no maximum — but for a clean grid stick to 4 or 8 items so they line up evenly.

Select an icon from the dropdown. There are 30 built-in icons covering shipping (Truck, Package), security (Shield, Lock), payments (Credit card, Wallet), promotions (Percent, Tag, Gift), support (Phone, Mail, Message), and more.

Upload your own image to override the icon selector above. For example, a brand badge or a custom illustration. Use a square PNG with transparent background, or an SVG for the sharpest result. Heads up: when a custom icon is uploaded, it replaces the built-in selection.

Set the visual size of the icon between 24 and 120 pixels. The default 48 px works well in most cases. Larger sizes (60–80 px) make the cards feel more visual and image-led.

Fill in the title of the card. For example: Secure Payments, Free Shipping, or Easy Returns. Keep it short — 2 to 4 words is the sweet spot.

Fill in a short description below the heading. Keep it brief — 1 or 2 short sentences read best. Bold, italic, links, and lists are supported.

For the cleanest look, stick to 4 items in one row, or 8 items in two rows. The grid is capped at 4 cards per row on desktop, so other counts (5, 6, 7) wrap to a second row and may leave a visible gap.

This is by design — when a custom icon is uploaded, it overrides the built-in icon selection. To use the built-in icon again, simply remove the custom image from the block settings.

Setting the radius to 0 actually follows your theme's global UI border radius (which may be slightly rounded). To get truly sharp corners, set the value to 1 pixel instead — the eye reads 1 px as zero.

The hover effect is intentionally disabled on touch devices because there's no real hover state on a phone — tapping a card would trigger and stick. The lift effect appears only on desktop with a mouse or trackpad.

Enabling Schema markup emits the structured data Google needs, but rich results are not guaranteed — Google decides which pages get enriched based on content quality and competition. You can verify the schema is correctly emitted using Google's Rich Results Test tool.