How to Use Announcement Bars Effectively

An announcement bar works best when it carries exactly one message — a shipping threshold, a live sale, a restock, or a policy shoppers need before they buy — and links straight to the page where they can act on it. Keep it short, make it dismissible or rotate it on a timer, and check that it does not push your logo and navigation off the visible fold on mobile. The rest of this guide covers how to set one up in Shopify, what to put in it, and the mistakes that quietly turn a useful bar into ignored noise.

The announcement bar is one of the smallest pieces of real estate on a storefront and one of the most overused. Done well, it answers a question a shopper would otherwise have to dig for — "does this qualify for free shipping," "is there a sale on right now," "when will this restock." Done poorly, it is a rotating carousel of five unrelated messages that nobody reads past the first one. This guide walks through the setup, the content decisions, and the display rules that keep an announcement bar doing its job.

Step 1: Decide What the Bar Is For Before You Build It

Before opening the theme editor, write down the single most important thing you want every visitor to know right now. Not three things — one. Common candidates are a free-shipping threshold ("Free shipping over $75"), an active promotion ("20% off through Sunday"), a launch or restock notice, or a logistics fact shoppers ask about in support tickets, like extended holiday return windows. If you cannot narrow it to one primary message, you likely need two separate things: a bar for the evergreen fact (shipping threshold) and a banner or homepage section for the temporary promotion, rather than cramming both into a bar that rotates every few seconds.

Match the message to where the shopper is in their journey

An announcement bar shows on every page, which means it has to make sense whether someone just landed on the homepage or is three clicks deep into a product page. Avoid messages that only make sense in one context, like "see our new arrivals below" on a page where there is nothing below. Favor messages that are true store-wide: shipping thresholds, return policy, an active sitewide discount, or a general "in stock and shipping now" reassurance during a season when that matters (holiday shipping cutoffs are a good example).

Step 2: Set It Up in the Shopify Theme Editor

Most modern Shopify themes, including our own, expose the announcement bar as a section in the theme editor rather than something you need to code by hand. The general steps are the same across themes that follow Shopify's Online Store 2.0 section model:

1. In Shopify admin, go to Online Store > Themes and click Customize on your live or draft theme.
2. Look for a section named Announcement bar, Promotion bar, or Top bar — it is usually pinned at the very top of the section list since it renders above the header on every page.
3. Add the section if it is not already present, then open its settings to enter your message text and an optional link.
4. If the theme supports multiple messages, decide whether you actually want rotation (see the display-rules section below) or a single static message.
5. Set the background and text color using the theme's color scheme options rather than a one-off custom color, so the bar stays consistent with the rest of your storefront's palette.
6. Preview on both desktop and mobile breakpoints before publishing — the theme editor's device toggle is the fastest way to catch a bar that wraps awkwardly or pushes your header down too far on small screens.

Our Optics theme and other Shopify themes in the catalog build the announcement bar as a standard, section-based block for exactly this reason — merchants should be able to change the message, the link, and the color scheme from the theme editor without touching code or waiting on a developer for a one-line text change.

Step 3: Write Copy That Actually Gets Read

The bar has maybe a second and a half of a shopper's attention. Vague, clever, or overly long copy loses that window. A few practical rules:

• Lead with the benefit, not the brand. "Free shipping over $75" beats "We now offer free shipping" — put the number and the condition first.
• Keep it to one line at your target font size. If it wraps to two lines on mobile, shorten it. A bar that pushes the header down by an extra row is a common, avoidable annoyance.
• Use a real call to action if there is one. If the message points somewhere ("Shop the sale"), make the whole bar a link rather than adding a separate button — the entire strip should feel clickable.
• Avoid urgency language you cannot back up. "Ends tonight" only works if it actually ends tonight. Fabricated countdowns erode trust the first time a shopper notices the sale is still running the next week.
• Spell out the condition, not just the offer. "Free shipping over $75" is more useful than "Free shipping," which leaves shoppers guessing at checkout whether they qualify.

Step 4: Get the Display Rules Right

Content is only half the job. How and when the bar shows up matters just as much, and this is where a lot of stores lose the benefit of having one at all.

Rotation: use it sparingly, if at all

Some themes let you queue up several messages that rotate on a timer. This can work for two closely related, genuinely evergreen facts (shipping threshold and return policy, for instance), but rotating in a promotional message alongside them usually backfires — a shopper who lands mid-rotation may never see the message that mattered to them. If you are running a specific, time-boxed sale, consider giving it the bar on its own for the duration rather than sharing space with unrelated messages.

Dismissibility

A dismiss control (a small close icon) respects returning visitors who have already seen and absorbed the message, and it prevents the bar from feeling like a permanent tax on vertical space during repeat visits. If your theme supports a dismiss option, use it for anything that is not critical on every single page view — shipping thresholds and general sale messaging are good candidates; a legally required disclosure is not.

Mobile is where most bars go wrong

On a small screen, an announcement bar competes directly with your logo and navigation for the top of the viewport — the most valuable inch of screen real estate a mobile shopper has. Test explicitly for: text that wraps to two lines and pushes the header down further than intended, font sizes that shrink so much the message becomes unreadable, and total header-plus-bar height that eats into the space where product imagery should start appearing. If your bar plus header takes up more than roughly a quarter of a typical phone screen before any content shows, it is worth shortening the message or reducing padding.

Keep it visually consistent with the rest of the store

An announcement bar in a color that clashes with your brand palette reads as an ad rather than part of the storefront, which subtly undermines trust. Pull the bar's background and text color from the same color scheme options the rest of your theme uses, rather than a one-off hex value picked to "stand out." Consistency here is a small detail that adds up to a store feeling deliberately designed rather than assembled from mismatched parts — the same principle covered in more depth across our Shopify themes catalog, where every theme ties its sections back to a shared set of color and typography settings.

Step 5: Review It Like a First-Time Visitor

Once it is live, look at the bar the way a new visitor would rather than the way you, the merchant, already understand it. Ask: is the offer or fact immediately clear without extra context? Does clicking it lead somewhere that fulfills the promise (a sale message that links to a sold-out collection is worse than no bar at all)? Does it still make sense next week, or does it need a calendar reminder to update or remove? A quick monthly check — five minutes, no more — catches stale promotions and broken links before a shopper does.

Frequently Asked Questions

Should I run more than one message in my announcement bar?

Only if the messages are closely related and each is short — a shipping threshold and a return policy note can share a rotation reasonably well. A single, focused message almost always outperforms a rotation of unrelated offers, since rotation guarantees some visitors never see the message meant for them.

Does the announcement bar hurt page speed?

A simple text bar with a background color and a link has negligible performance cost. It becomes a concern only if it is built with a heavy animation library, an embedded countdown script, or auto-rotating images — keep the implementation as close to plain text and CSS as your theme allows.

Should the bar be sticky and follow shoppers as they scroll?

Generally no. A bar that stays pinned while scrolling permanently reduces the usable viewport, especially on mobile. Let it scroll away with the header and reappear at the top of the page — the message has already been delivered once it is seen.

Can I use the announcement bar for legal or compliance notices?

It can work for short, general notices, but a bar is not a substitute for proper policy pages or checkout-level disclosures where those are legally required. Use the bar to point to the relevant policy page rather than trying to fit the full notice into one line.