Announcement Bars: What to Put in Them and When

What an announcement bar is good at

A bar sits at the edge of the screen and leaves the page usable. Nobody has to close it to read your product page, and it doesn’t interrupt anything. Google’s own guidance on intrusive interstitials points the same way: it recommends banners that “take up only a small fraction of the screen” instead of full-page overlays (Google Search Central, Avoid intrusive interstitials).

The trade-off is attention. A bar is easy to ignore, and people learn to ignore it fast if it says the same vague thing every day. So a bar works best for information that is short, true right now, and useful on almost any page:

If the message needs a form, a picture or a choice, it probably belongs in a modal or a floating banner shown to a specific group of visitors instead. If it needs only one line and one link, it belongs in the bar.

The five kinds of messages that earn the space

Most useful announcement bars fall into one of five categories. Knowing which one you’re writing makes the wording easier.

1. Shipping and delivery rules. “Free standard shipping on US orders over $50.” This is the most common bar for a reason: shipping cost is one of the first things shoppers want to know, and the bar answers it on every page. For the details of wording a threshold so it matches checkout, see Free Shipping Banners: Where to Show Them and How to Word the Threshold.
2. Deadlines. “Order by Dec 18 for delivery before the holidays.” “Sale ends Sunday at midnight ET.” A deadline gives the bar a reason to exist today rather than every day.
3. Promotions. “20% off outerwear this week — no code needed.” Keep it to the one offer that applies most widely.
4. Operational notices. “Our warehouse is closed Nov 27–28. Orders ship Nov 29.” “We’ve updated our return policy.” These aren’t marketing, but they prevent support tickets and disappointed customers.
5. Pointers. “New: the fall collection is here →” A bar is a cheap way to send traffic from every page to one landing page or category.

How to word a bar

You have roughly one line on desktop and often two short lines on a phone. That is enough for one fact and one action, and not much more. A simple structure works for nearly every bar:

[What] + [Condition or deadline] + [Optional link]

Free standard shipping on US orders over $50
Order by Thu, Dec 18 for holiday delivery · See shipping dates
20% off outerwear through Sunday — no code needed · Shop now

A few rules keep it clear:

1. Lead with the benefit or the fact, not your brand voice. “Free shipping over $50” beats “Treat yourself — shipping’s on us when you spend $50+” because it can be read in a glance.
2. Use specific dates and times, including the time zone if your customers span several. “Ends soon” tells nobody anything.
3. Put the conditions in the bar, not only behind the link. If an offer is “free,” US regulations on the use of the word say the conditions “should be set forth clearly and conspicuously at the outset of the offer” (16 CFR § 251.1). For a bar, that usually means the threshold or region is part of the sentence.
4. Make the link say where it goes. “See shipping dates” or “Shop outerwear,” not “Click here.”
5. Check it on a narrow phone. A line that fits on a laptop can wrap into three lines on a small screen and push the page down further than you planned.

When to change the message

A bar that never changes becomes part of the furniture. A bar that changes daily for no reason looks unreliable. The middle ground is a simple calendar tied to real events in your store.

The most common mistake is the expired message: a sale bar still running two days after the sale ended, or a holiday deadline still visible in January. If your tool lets you set a display period, set the end date at the same time you set the start date, so the bar turns itself off. Then write the follow-up message before the campaign starts, so the switch isn’t left to whoever remembers.

Top or bottom?

The top of the page is where announcement bars usually live, and visitors expect them there. It’s the first thing seen on page load, which suits shipping rules and store-wide notices. A bottom bar is less conventional but can work well on mobile, where the top of the screen is already crowded with the header, a menu button and sometimes the browser’s own address bar.

Whichever you choose, check the pages where the bar could get in the way of an action: the product page on a phone (is the “Add to cart” button still visible?), and the cart page. If the bar covers something people need to tap, move it or exclude those pages.

Floating vs. pushing the content down

A top bar can be shown in two ways, and the difference matters more than it looks.

1. Floating (overlay). The bar is fixed on top of the page and sits over the header. Nothing on the page moves, but the bar covers whatever is underneath it — usually the logo, navigation or search box.
2. Inserted as a block. The bar is added above the header and pushes the header and the rest of the page down. Nothing is hidden, but everything below it moves.

Pushing content down is friendlier to the header, but it has a cost if the bar appears after the page has started rendering. Web.dev explains that “layout shifts only occur when existing elements change their start position,” and that sites should aim for a Cumulative Layout Shift score of 0.1 or less (web.dev, Cumulative Layout Shift). A bar that appears a moment after load and shoves the page down can count as an unexpected shift — and it’s also the moment someone was about to tap a link that just moved.

Some practical ways to decide:

1. If your header is tall and sticky, a floating bar covering part of it can hide navigation. Inserting as a block may be the better choice — then check your layout-shift numbers.
2. If your header is short and has empty space, a slim floating bar may cover nothing important and causes no shift.
3. If the bar is part of your theme’s code, it renders with the page and doesn’t shift anything. A bar added by a script after load behaves differently, so test it rather than assume.
4. Measure before and after. Run the key pages through a lab tool such as PageSpeed Insights with the bar off, then on, and compare the layout shift. For more on how overlays affect these metrics, see Do Pop-ups Hurt Core Web Vitals?.

Should the bar be closable?

A close button is a courtesy. A visitor who has read “Free shipping over $50” on the first page doesn’t need it covering the header on the next ten. Closable bars are particularly important when the bar floats over content, and on small screens where every line of height counts.

The exception is genuinely operational information — a shipping delay or a closure — where you want the notice to stay visible. Even then, keep the bar slim and consider limiting it to the pages where the information matters, such as product, cart and help pages.

If you do add a close button, make it easy to hit on a phone, place it where people expect (usually the right end of the bar), and make sure it’s reachable by keyboard. The accessibility basics for overlays apply here too; see Accessible Pop-ups: Focus, Keyboard and Screen Reader Basics.

Motion, tickers and rotating messages

A gentle fade or slide when the bar appears is fine. Continuous motion is a different matter. Scrolling tickers and messages that rotate every few seconds are hard to read, distracting, and an accessibility issue. WCAG 2.2 success criterion 2.2.2 says that for moving, blinking or scrolling information that starts automatically and lasts more than five seconds, “there is a mechanism for the user to pause, stop, or hide it” (W3C, Understanding SC 2.2.2: Pause, Stop, Hide).

The simplest way to comply is not to rotate at all: one message, static, with a close button. If you need a countdown, read Countdown Timer Pop-ups: Using Urgency Without Dark Patterns first — a live timer is auto-updating content and has the same considerations.

Design: make it readable, not loud

1. Contrast. Brand colors on a colored strip often fail contrast. WCAG asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, defined as at least 18 point or 14 point bold (W3C, Understanding SC 1.4.3). Bar text is usually small, so aim for 4.5:1.
2. Height. Keep it to a single line on desktop. On phones, test the longest message you plan to run.
3. One link or button. A bar with two buttons is a menu, and people won’t read it.
4. Color for meaning. If you use a different color for urgent notices (a delay) versus promotions, stick to it so visitors learn the difference.
5. Don’t compete with the header. The bar should be clearly separate from your navigation, not look like another menu item.

Targeting: not every page needs the same bar

The classic announcement bar is store-wide, but many messages are only true or useful on some pages. A few examples:

You can also vary the message by audience. A first-time visitor may need the shipping rule; a returning customer might be better served by a pointer to what’s new. For the mechanics, see How to Target Returning Visitors with Different Messages Than First-Timers. If you run ads, a bar matching the ad’s offer on the landing page keeps the promise consistent; tagging your campaign links is covered in UTM Parameters Explained.

How to tell whether the bar is working

A bar’s job is often to inform rather than to be clicked, so clicks alone undersell it. Look at a few things together:

1. Impressions and clicks. For pointer bars (“See the new collection”), the click rate tells you whether the message interests anyone.
2. Downstream behavior. For a threshold bar, compare the share of orders above the threshold before and during the bar. For a deadline bar, check whether orders cluster before the cut-off.
3. Support questions. For notices, the best sign of success is fewer “Where is my order?” emails.
4. Page behavior. A heatmap of the top of key pages can show whether people still find the navigation and search box once the bar is there. See Website Heatmaps Explained.

Avoid drawing firm conclusions from a few days of data, and remember that seasonal events change behavior regardless of the bar. A before/after comparison across the same weekdays is a fair starting point for a small store.

A pre-launch checklist

1. The message is one sentence and says one thing.
2. Conditions (threshold, region, end date, time zone) are in the bar itself.
3. The link text describes the destination, and the destination matches the promise.
4. The end date is set, and the follow-up message is ready.
5. Tested on a small phone: it doesn’t wrap into three lines or cover “Add to cart.”
6. Contrast checked; no continuous motion or rotation.
7. The close button works with mouse, touch and keyboard (or you’ve decided deliberately not to have one).
8. Layout shift checked with the bar on and off, if it pushes content down.
9. Hidden on pages where it is irrelevant or wrong, such as the order confirmation page.

Setting up an announcement bar in marketingLABO

In marketingLABO, a bar is one of the display types for a banner, alongside modal and floating banners, and there is an “Announcement bars” category among the English templates. You add one JavaScript tag to the <head> of your site, then build and schedule banners from the dashboard. The settings that map to this guide:

The Free plan includes one banner; Light includes three and Standard has no banner limit. See pricing for the full comparison, or create a free account to try a bar on your own site.

FAQ

Do announcement bars hurt SEO?

A slim bar is the kind of banner Google’s guidance suggests as an alternative to intrusive interstitials. The practical risk is performance rather than the bar itself: a bar that pushes content down after load can add layout shift, so measure it.

How many messages should a bar have?

One. If you have several things to say, decide which matters most this week, or show different bars on different pages.

Should the bar be on the checkout page?

Usually not, unless it’s operational information that affects the order, like a delivery delay. Promotions on checkout tend to distract people from finishing — or send them looking for a coupon code.

Bar or pop-up for a sale?

A bar for awareness on every page; a pop-up when you want a specific group (for example, people who viewed the sale category) to notice a specific offer. For choosing between offers, see Coupon Pop-up or Free Shipping Offer?.

Can I collect email addresses in a bar?

A bar can point to a sign-up page, but a form squeezed into a strip of the screen is awkward, especially on phones. If the goal is sign-ups, a dedicated sign-up banner shown at a sensible moment usually works better; see the email sign-up pop-up guide. Use the bar to carry the benefit (“Get 10% off your first order”) and link to it.

Do I need a different bar for mobile?

Not always, but you often need a shorter message. Write the mobile version first; if it reads well in two short lines, the desktop version will fit easily. If the two versions need different wording, run two bars, one limited to each device type.

Sources

1. Google Search Central — Avoid intrusive interstitials and dialogs
2. web.dev — Cumulative Layout Shift (CLS)
3. W3C — Understanding Success Criterion 2.2.2: Pause, Stop, Hide
4. W3C — Understanding Success Criterion 1.4.3: Contrast (Minimum)
5. 16 CFR § 251.1 — Guide concerning use of the word “Free” and similar representations