Features bar

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on colors settings
3. Company XYZ documentation on the feature block
4. Shopify documentation on customizing sections
5. Company XYZ documentation on section padding settings
6. Company XYZ documentation on section backgrounds settings
7. Company XYZ documentation on separators settings
8. Company XYZ documentation on visibility settings
9. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to highlight short, high-value messages like shipping benefits, support promises, store policies, or timely announcements. It can follow shared theme behavior by default, or you can add Feature blocks to fully control the content shown here.

Core settings

These settings shape the overall layout and presentation of the bar before you customize individual items.

1. Text alignment controls how the feature copy sits within each item. Match it to nearby sections to keep the page feeling consistent.
2. Icon position changes how icons and text relate to each other. Left or right usually suits compact horizontal layouts, while top or bottom works better when each feature needs more visual separation.
3. Show icon border adds extra emphasis around icons. It can help simple icons stand out, but it may feel too busy if the section already uses strong separators or a bold background.

If you want this section to show custom feature content, add at least one Feature block. Once blocks are added, they override the default shared content behavior for this section.

For broader guidance on how blocks work in the editor, see Shopify documentation on sections and blocks

Color settings

These settings override the default colors for this section. Use them when the features bar needs stronger contrast, a branded accent, or a different visual priority than the surrounding layout. Learn more in Company XYZ documentation on color settings.

Adjust icon, text, and icon border colors as a set so the section feels intentional. If you use a custom background, check readability carefully before publishing.

Supported block types

1. Feature

Feature block

Use the Feature block to add an icon, title, optional supporting text, and an optional link. Learn more in Company XYZ documentation on the Feature block.

1. Icon can be an emoji or an icon name. Leave it blank for a simpler text-first presentation.
2. Title and subheading work best when kept short. Brief copy helps multiple features stay balanced in one row.
3. Link is useful for related destinations like policies, FAQs, or collections. Add links only when the destination clearly matches the message.
4. Block visibility lets you hide individual features on desktop or mobile, which is helpful when a shorter mobile version reads better.

Note

This section supports up to 4 Feature blocks, so focus on the messages customers should notice first.

For editor setup details, see Shopify documentation on customizing sections

Standard section settings

Padding settings

Padding settings control the space above and below the features bar. Smaller spacing works well for utility-style messaging, while larger spacing makes the section feel more like a standalone content area. Separate desktop and mobile values are useful when the bar feels cramped on smaller screens.

Section background settings

Section background settings let you add a color, gradient, image, or video behind the features bar. This is useful when the section needs more visual separation or a more promotional look. Overlay settings help preserve readability, and gradient overlays take priority over flat overlay colors.

Caution

Image and video backgrounds can reduce text clarity quickly in a small section like this. Check both desktop and mobile views to make sure the copy stays easy to read.

Separator settings

Separator settings add a line at the top or bottom of the section. Use them when the bar sits between larger sections and needs a subtle boundary without adding more space. If the separator color is left transparent, the shared border color is used.

Visibility settings

Visibility settings control whether the entire section appears on desktop, mobile, or both. This is helpful when you want a simplified mobile layout or a different arrangement across devices. When you also use block-level visibility, double-check that at least one feature remains visible where you need it.

Width settings

Width settings control both the maximum content width and the outer section width. Narrower content widths can make short feature text easier to scan, while wider settings can help the bar feel more integrated with broad page layouts. Preview width changes on the live page when possible, since editor framing can make spacing feel misleading.

Usage notes

1. Keep copy brief. This section works best for short statements customers can understand at a glance.
   1. Short messages are easier to scan in a narrow bar.
   2. If a message needs more context, link to the full destination instead of adding more text.
2. Use blocks intentionally. Add Feature blocks when this bar should show section-specific icons, text, or links instead of shared content behavior.
   1. Adding blocks can materially change what appears here.
   2. Review the section after adding or removing blocks to confirm the final message still feels balanced.
3. Review both viewport sizes. Desktop and mobile controls can affect layout, alignment, visibility, and media behavior differently.
   1. Check that icons and text still feel aligned on smaller screens.
   2. Make sure any mobile-only or desktop-only choices still leave the bar readable and useful.
4. Use color and media overrides carefully. Default-style values usually preserve fallback styling, while explicit colors, gradients, or media choices make the section more independent.
   1. Strong local styling can improve emphasis, but it also increases the need to check contrast.
   2. Separate desktop and mobile media can affect cropping and readability, so confirm both versions before publishing.
5. Keep form-style messages easy to read. If the bar is used for customer input, validation, or success and error messaging, leave enough contrast and spacing for those states to stand out clearly.