Announcement bar

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the button block
3. Company XYZ documentation on the icon with text block
4. Company XYZ documentation on the localization selectors block
5. Company XYZ documentation on the main menu block
6. Company XYZ documentation on the social media icons block
7. Company XYZ documentation on section backgrounds settings
8. Company XYZ documentation on section padding settings
9. Company XYZ documentation on separators settings
10. Company XYZ documentation on visibility settings
11. Company XYZ documentation on layout widths settings

Helpful videos

Shopify Academy video: How to edit an announcement bar in Shopify Online Store 2.0 || Shopify Help Center

Shopify Academy video: How to edit an announcement bar in Shopify Online Store 2.0 || Shopify Help Center

Use Announcement bar to place a compact message and utility area above the main header. It can show a simple announcement with a link and menu, or a more flexible mix of blocks such as buttons, menus, localization selectors, rich text, and social icons. For a broader overview of theme layouts, see Shopify documentation on sections and blocks

By default, the section uses the announcement text, link, and menu in the main section settings. If you add blocks, the block layout takes over so you can arrange the bar more precisely.

Adding blocks overrides the default announcement text and menu output from the section settings. Use one approach or the other to avoid confusion while setting up the bar.

Core settings

Use the core settings for a straightforward top bar without building a custom layout. This is the fastest option when you only need a short promotional message, an optional link, and a simple utility menu.

Keep announcement text brief so it stays readable across devices. If you need multiple content types, different alignment zones, or device-specific layouts, switch to blocks instead of trying to fit everything into the default setup.

Color settings

Use these section color controls to override broader theme colors for the announcement bar text and icons. This is helpful when the bar needs to stand out for a promotion, alert, or seasonal campaign.

If you also use a custom background, check contrast carefully. Strong readability matters more here than decorative styling because this bar is meant to be scanned quickly.

Supported block types

1. Button
2. Icon with text
3. Localization selectors
4. Main menu
5. Rich text
6. Social media icons

Most blocks in this section also include their own layout, alignment, and visibility controls. Use those settings to place items left, center, right, or on their own row, and to simplify the bar on smaller screens.

Button

Use the Button block for a clear action such as a sale page, signup link, or support page. See Button block.

Smaller button styles usually fit this section best. If the bar already contains several items, avoid oversized button styles that can make the header area feel crowded.

Icon with text

Use this block for short callouts such as free shipping, easy returns, or limited-time offers. See Icon with text block.

Keep the message short and direct. This block is most effective when it reinforces one key benefit at a glance.

Localization selectors

Use this block to show country, currency, and language selectors in the top bar. See Localization selectors block.

This block needs supporting localization setup before it becomes useful. On mobile, the small field style can force the selectors onto a new row, so always preview the bar on smaller screens after changing selector styles.

Main menu

Use the Main menu block to add secondary navigation such as Contact, FAQ, Track order, or policy links. See Main menu block.

You can add up to two menu blocks if you want separate link groups. This works well when you need utility navigation on one side and promotional or account-related links on the other.

Rich text

Use the Rich text block when you need more formatting than the default announcement text allows. It supports styled text and inline links for more expressive messaging.

Use it sparingly in this section. Large text or heavily styled content can make the bar feel busy very quickly.

Social media icons

Use this block to show social accounts already set up in your theme settings. See Social media icons block.

You can show all configured networks or choose a smaller set. Solid icons are usually the easiest to scan in a compact top bar, while text-only style suits more minimal layouts.

Standard section settings

Section background settings

Section background settings control the bar background, including color, gradient, image, video, and overlay options. Use them to separate the bar visually from the header or to support a campaign-specific style.

Because this section is shallow in height, subtle backgrounds usually work better than detailed media. If you use an image or video, overlays can help preserve text legibility.

Padding settings

Padding settings control the vertical space above and below the bar content. Small changes here can noticeably affect how prominent the bar feels.

Use tighter padding for utility-heavy layouts and slightly more padding when the bar includes buttons or multiple rows. Check both desktop and mobile so the bar does not become taller than intended.

Separator settings

Separator settings let you add a line above or below the bar. This is useful when the bar sits close to the header and needs a clearer visual boundary.

If your bar and header use similar colors, a separator can make the layout easier to scan. Transparent separator color falls back to the broader border color setting.

Visibility settings

Visibility settings control whether the entire bar appears on desktop, mobile, or both. This is useful when you want a fuller utility bar on larger screens but a simpler header area on phones.

You can combine section visibility with block-level visibility to create device-specific content mixes without duplicating the whole setup.

Width settings

Width settings control the maximum content width and the overall section width. In this section, content width affects how tightly items group together, while section width matters most when you use background styling.

The editor may not always show width changes accurately, so preview on the live storefront when refining layout. A narrower content width can keep utility content easier to scan, while a wider or full-bleed section works well for stronger background treatments.

Usage notes

1. Pick one content method. Use the default text and menu for a simple bar, or add blocks for a custom layout, since blocks replace the default content.
2. Review both viewports. Desktop and mobile controls can change alignment, spacing, visibility, and wrapping, so check both sizes after you adjust the bar.
3. Watch background overrides. Blank or default-style values usually preserve fallback styling, while explicit colors, gradients, or media make the bar feel more independent from the rest of the header.
4. Treat media carefully. If you use different desktop and mobile media, review cropping, loading, and readability so the bar stays clear on both devices.
5. Keep navigation intentional. Menu blocks can redirect customer flow, so hidden, reordered, or mobile-only links should be reviewed for reachability and clarity.
6. Use the bar for utility content. Reserve this space for high-priority notices, quick links, and lightweight navigation rather than repeating primary header content.