How to create an announcement bar with Nudgesmart
Add a slim sticky bar at the top or bottom of every page for sale announcements, shipping promos, and click-to-reveal coupons.
Announcement bars are the lowest-friction way to add a sitewide message — but only when the message is short enough to read at a glance.
TL;DR
Pick the announcement-bar template, write a short message, position the bar at the top or bottom of the page, and publish. If you want shoppers to interact, add an optional coupon-reveal stage — clicking the bar shows a discount code they can copy. The bar stays visible across every storefront page without interrupting browsing.
When an announcement bar wins
Popups interrupt; teasers wait in a corner; bars are persistent — always visible at the edge of the viewport, never covering the page. That makes bars the right tool for messages every shopper should see, on every page, without breaking their flow.
Use a bar for:
- Site-wide sales — "20% off everything this weekend"
- Shipping promos — "Free shipping on orders $75+"
- Holiday hours or store updates — "Closed Dec 25-26"
- Click-to-reveal coupon codes — a 2-step bar where shoppers click to expose the code
Skip the bar when the message is too long for a mobile line, when you only want it on certain pages or triggers, or when you need an inline form — those are popup jobs.
There's also a separate Full Page Takeover template for full-page announcements — that's for major moments like product launches and grand openings. The slim announcement bar is the everyday tool.
Step 1 · Pick the announcement-bar template
In the campaign editor, find the template with the Announcement badge — described as a "Slim bar for sitewide announcements and promotions."
Template picker with the announcement-bar template card highlighted, showing the Announcement badge and the Sitewide banner, Non-intrusive, and Sticky position feature tags
Screenshot coming soon
This template ships with the right defaults — sitewide banner positioning, non-intrusive layout, and sticky behavior. It's listed under sale announcements, shipping promos, and store updates.
Step 2 · Customize the bar text and brand styling
In the visual editor, edit the bar's headline, call-to-action text, and colors to match your brand and offer.
Visual editor showing the announcement bar canvas with the headline text field, CTA text field, and background and text color pickers
Screenshot coming soon
Keep the headline short. Bars have limited horizontal space, especially on mobile — a long sentence wraps and starts to look like a banner ad rather than a quiet announcement. Use brand colors but make sure text contrasts cleanly with the background. Aim for at least a 4.5:1 ratio per the WCAG 2.1 color contrast minimum; low-contrast bars get ignored.
Examples of bar copy that consistently works:
- "Free shipping on orders $75+ — limited time"
- "Holiday hours: closed Dec 25-26"
- "20% off everything — code AUTUMN20"
- "New collection drops Friday — sign up to be first"
Each fits under 30 characters and survives a single-line mobile layout.
Step 3 · Position the bar (top or bottom)
In the layout settings, choose whether the bar sits at the top of the page (under the header) or at the bottom (above the footer).
Top is the default and matches what shoppers expect from Shopify announcement bars. Bottom works for mobile-first stores where the top is already crowded with nav, search, and cart icons. Sticky behavior keeps the bar visible as shoppers scroll — that's the point of a bar instead of a static banner that disappears the moment a shopper scrolls past it.
Step 4 · (Optional) Add a coupon-reveal stage
Turn the bar into a 2-step interaction: the Initial View shows the announcement, and clicking the bar reveals the Coupon Stage with a discount code shoppers can copy.
Stage switcher in the campaign editor showing the Initial View and Coupon Stage tabs side by side
Screenshot coming soon
This is the bar's killer feature. The shopper sees "Click for 15% off," clicks the bar, sees the code revealed in place, copies it, and applies it at checkout. Conversion is higher than a static banner because the action is in line with the offer — no popup, no second click, no leaving the page.
The two stages are labeled exactly that way: Initial View for the default message, and Coupon Stage for what shoppers see after clicking. You can edit the headline, code, and styling for each stage independently.
Step 5 · Mobile sizing
Preview the bar on mobile before publishing — long announcement text can wrap to two lines on 320-375px viewports and start overlapping the theme's mobile nav.
The device toggle lets you preview both layouts. If the desktop version wraps on mobile, shorten the headline — under 30 characters keeps it on a single line on the smallest screens. A clean two-line wrap is also fine; what's not fine is a bar that pushes against the theme's nav buttons or clips behind a sticky header.
Step 6 · Accessibility
Test the bar with keyboard navigation — shoppers can press Esc to dismiss it, and screen readers should announce the bar text on page load.
Bars need to meet basic accessibility expectations because they show up on every page. Esc dismisses the bar, so keyboard-only shoppers always have an exit. Color contrast should hit WCAG 2.1 AA (4.5:1 for body text) — particularly important because bars often use saturated brand backgrounds where light-gray text disappears. Don't make the bar so visually loud that it overwhelms the page; even non-disabled shoppers find a screaming bar exhausting after a few page views.
Common pitfalls
- The bar overlaps the theme's existing announcement bar. Many Shopify themes ship with their own bar. Disable it in the theme editor first, or position the Nudgesmart bar at the bottom instead.
- Mobile text wraps and clips behind the theme nav. Shorten the message or test on real devices, not just the visual-editor mobile preview.
- Low contrast makes the bar invisible. Bright brand backgrounds with light-gray text fail. Use white or near-white text on saturated backgrounds; reserve dark text for light backgrounds.
- The bar runs forever and shoppers tune it out. Pause or unpublish announcement bars after the campaign window ends — a "Black Friday Sale" bar still showing in February damages trust faster than no bar at all.
Frequently asked questions
Will the bar show on every page including checkout?
No. Shopify locks down checkout pages, and Nudgesmart respects that boundary. The bar shows on every storefront page — homepage, collections, products, cart — but not in the checkout flow.
Can I have an announcement bar and a popup at the same time?
Yes, but pick different page slots. A sitewide bar at the top plus an exit-intent popup on product pages works fine. Don't stack a bar and a popup that both trigger on the same view.
Does the bar push down the rest of the page or sit on top?
At the top, the bar adds height and your theme's nav slides down to make room. At the bottom, the bar overlays the page and covers roughly 40-50px of footer content. Test both before publishing.
Can the bar contain a clickable button instead of being click-to-reveal?
Yes. Use the visual editor to add a CTA button instead of, or alongside, the click-to-reveal coupon stage. The button can link to any URL on your store.