Announcement Bar Popups: When a Thin Strip Beats a Popup

What is an announcement bar?

Four parts. If you need a fifth, you are building a popup and should say so.

Names for this thing are inconsistent — notification bar, sticky bar, top bar, banner. The behaviour is what matters: full-width, short, non-blocking, and dismissible.

Bar or popup? A one-question test

Ask what you want the visitor to do. If the answer is "know this", use a bar. If it is "give me something", use a popup. That single question resolves almost every case.

Three formats, one question each. Start at the top and take the first yes.

Nine things worth putting in a bar

1. The free-shipping threshold. The highest-value line in ecommerce retail copy. State the number; a vague "free shipping available" reads as a trick.
2. A sale window. "20% off everything until Sunday 23:59." Add a countdown if the deadline is real, and schedule the bar to end with it.
3. A shipping cut-off. Before Christmas or any gifting peak, the last-order date is the most useful sentence on the site.
4. A service notice. Delivery delays, a payment provider outage, a store closure. Bad news delivered early costs you far less than bad news discovered at checkout.
5. A launch or restock announcement. One line, one link to the collection.
6. An event or webinar date. Ambient reminder, with registration one click away.
7. A new guide or resource. Content promotion belongs at the edge, not in the middle.
8. A region or currency hint. "Shopping from the US? Prices shown in GBP." Useful, and never worth a modal.
9. A one-click survey invitation. A link that opens a short survey, so the ask itself is optional rather than imposed.

How to build a bar from a popup

You do not need a separate product for this. An announcement bar is a popup with four settings changed.

1. Shape: wide and short

Set a wide width and a small height, and put one text block plus one button or link inside. Resist a second line — if the message needs two lines on desktop it will need four on a phone.

2. Position: docked to an edge

Choose top or bottom from the nine anchor positions. Docking to an edge squares the corners on that edge automatically, so the bar reads as part of the page frame rather than as a card that drifted upwards. The entry motion follows the anchor too: an edge-docked popup slides in from its own edge.

3. Backdrop: none

Drop the overlay opacity to zero. A bar with a dimmed page behind it is a lightbox that lost its nerve — and it blocks the clicks a bar is specifically designed not to block.

4. Close: visible, and remembered

Use the X or a skip link, then set a frequency so a dismissed bar does not reappear on the next page view. Once a day, or once every few days, is right for most announcements.

The mobile trap nobody warns you about

This is the one that catches people. A popup card is laid out at the width you set, and on a narrower screen it is scaled down proportionally to fit. That is perfect for a 400px card on a phone. It is terrible for a 1200px bar: on a 375px screen it renders at roughly a third of the size, and your one-line message becomes six-point type.

The fix is not a compromise width. It is two campaigns:

• Desktop bar — wide, one line, full sentence. Device toggles: desktop only.
• Mobile bar — a much narrower card with a shortened message ("Free shipping over £50" rather than "Enjoy complimentary shipping on all orders over £50"). Device toggles: mobile only.

It takes five extra minutes with the duplicate action and it is the difference between a bar people read and a bar people squint at.

Copy formula for a bar

One sentence, one link, no adjectives you would not say out loud. The pattern:

Threshold   Free shipping on orders over £50 → Shop now
Sale        20% off everything until Sunday 23:59 → See the sale
Cut-off     Order by Thu 18 Dec for delivery before Christmas → Shop gifts
Service     Deliveries are running 2 days late this week → Read more
Launch      The new season is live → Browse it
Restock     Back in stock: the ribbed knit → Get yours
Event       Live workshop, Tuesday 3pm → Save my seat
Resource    New guide: writing popups that convert → Read it
Survey      Two quick questions about your last order → Answer them

Mobile versions cut everything before the noun: "Free shipping over £50", "20% off until Sunday", "Order by Thu 18 Dec". If the message will not survive that cut, it is not a bar message.

The display rules a bar needs

• Trigger. A short delay of one or two seconds, or immediately. This is the one format where firing on arrival is fine — it is not covering anything.
• Page targeting. Put the bar where the message is true. A shipping threshold belongs site-wide; a restock notice belongs on the relevant collection. Use contains, does not contain, is exactly, is not, starts with or ends with.
• Frequency. Every visit for an ongoing fact; once a day for anything promotional, so a dismissal is respected.
• Date window. Non-negotiable on anything time-bound: a start and end date with hours in a chosen GMT offset, so the sale bar disappears when the sale does — while you are asleep.
• Devices. Desktop and mobile toggles, used to split the two versions above.
• Show again after conversion. Only relevant if the bar links to something you count as a conversion; leave it on for pure announcements.

Same designer, different four settings: shape, anchor, backdrop, close.

Timers in a bar

A countdown is the one embellishment a bar can carry well, because the number does the work and needs no explanation. Two rules keep it honest: the deadline must be real, and the bar's date window must match it. A timer that resets on refresh, or a sale that never ends, teaches your visitors to ignore every future one — the argument in full is in the countdown timer guide.

Six mistakes with announcement bars

1. Two bars at once. Top and bottom, both dismissible, both ignored. Choose one message.
2. Covering the navigation. Check it against your sticky header on both breakpoints.
3. One bar for both breakpoints. The scaling trap above. Build two.
4. No end date. A live Black Friday bar in February tells visitors nobody is looking after the site.
5. Putting a form in it. There is no room, and a field at the edge of the screen converts badly. If you want an email, use a popup.
6. Ignoring the dismissal. If someone closed it, do not show it again on the next page view. Set the frequency.

What to measure

A bar reports views and clicks like any other campaign, and those two numbers answer the only two questions that matter: is anyone seeing it, and is anyone acting on it. A bar with high views and almost no clicks is not necessarily failing — an ambient shipping threshold does its job by being read — but a promotional bar with no clicks is either the wrong message or the wrong page.

For a promotional bar, the cheapest experiment is a two-variant A/B test of the sentence itself: threshold first ("Free shipping over £50") versus benefit first ("Get free shipping on this order"). Each variant reports separately, so a week of traffic gives you an answer.

Build your bar

Twenty minutes. If the pixel is not on your site yet, the one-line install guide comes first — after that, bars, lightboxes and slide-ins all come from the same script.

Related reading

Frequently asked questions