Icon with text

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on colors settings
3. Company XYZ documentation on visibility settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block to highlight a single feature, benefit, or trust signal with a small icon and a short line of text. It works best for quick, scannable messaging such as shipping perks, product benefits, guarantees, or material details.

For more context on how this kind of content fits into a theme, see Shopify documentation on sections and blocks

Core settings

Start with the icon and text. You can use either an emoji or an icon name, which makes it easy to match the style of the rest of your content. If you leave the icon blank, the block shows text only.

Keep the text brief and specific. Short phrases usually work better than full sentences, especially when you want shoppers to understand the message at a glance.

You can also add a link if the highlight should lead to more detail, such as a policy, guide, or supporting page. Opening that link in a new tab can be helpful when you do not want shoppers to lose their place.

Tip

If you use several of these blocks together, keep the wording and icon style consistent so the group feels clean and intentional.

Alignment settings

These settings control horizontal alignment separately for desktop and mobile. They are useful when the block appears in different layouts across screen sizes or when you are fine-tuning a custom mobile layout.

Choose alignment based on the surrounding content. Center alignment suits standalone highlights, while left alignment usually feels more natural in stacked layouts or text-heavy areas.

Check alignment on both desktop and mobile. A position that looks balanced on a wide screen can feel awkward on smaller screens.

Standard block settings

Color settings

These settings let this block override broader theme colors for the icon and text. Use them when the highlight needs extra emphasis or when you need better contrast within a specific layout.

Avoid using too many different highlight colors across the same page. Consistent color use makes selling points easier to scan and keeps the design from feeling busy. For more on shared color behavior, see Color settings.

Make sure both the icon and text remain easy to read against the background.

Visibility settings

Use visibility controls to show or hide this block on desktop or mobile. This is helpful when you want different supporting content by device size or when a short highlight fits one layout better than another.

Use hiding selectively. It works best for intentional layout decisions, not as a substitute for tightening the content. For more on shared visibility behavior, see Visibility settings.

Usage notes

1. Keep copy tight. Use a short, benefit-led phrase so the message stays quick to scan.
2. Choose clear icons. Pick icons that reinforce the text immediately instead of adding decoration without meaning.
3. Link with purpose. Add a link only when shoppers genuinely need more detail behind the highlight.
4. Review both screen sizes. Check alignment and spacing on desktop and mobile before publishing.
5. Use emphasis sparingly. Reserve custom colors for highlights that deserve extra attention.
6. Let defaults work when possible. Leave color and styling choices unset when you want the block to inherit the surrounding design, and use overrides only when the highlight needs to stand apart.