On this page
Important Notice: This content is for educational purposes only. Results may vary based on your specific business circumstances, industry, market conditions, and implementation. No specific outcomes are guaranteed.
Shoppers read the top of the page first
The slim bar at the top of a store is one of the first things a shopper reads: free shipping over an amount, the returns window, a sale. A rotating bar shows several of these in the same space, one at a time. It works when each message is short enough to read before it changes, and when there are only a few of them.
To plan your own, the rotating announcement bar tool for Shopify keeps your strongest messages, puts them in order, checks how long each one shows, and previews the bar as a real store widget.
Three or four messages
Two to five messages work; three or four is the sweet spot. Each extra message makes a full turn of the bar longer, and few shoppers wait for the last one. If two messages say nearly the same thing, keep one.
Short enough to read in time
Each message needs to stay up long enough to read, and longer messages need longer. On a phone, a long message also wraps onto two lines, which makes the whole bar taller. Keep each one to a short phrase, such as Free shipping over $50 or 30-day returns.
The first message matters most
Many shoppers only ever see the first message: anyone who leaves quickly, and anyone whose device is set to reduce motion, who should see a still bar instead of a moving one. Put your most important, longest-lasting message first, and keep sale messages with an end date out of first place so they cannot linger after the sale.
Never put anything a shopper must know only in the bar. Returns, delivery times and policies belong on their own pages and in your FAQ too.
A moving bar needs a pause button
Content that moves on its own for more than five seconds needs a way to pause it under WCAG success criterion 2.2.2 (Pause, Stop, Hide). Pausing when the pointer hovers does not count, because phones have no hover. A rotating bar should have a visible pause button, and it should fade between messages rather than scroll sideways like a marquee.
Next step
Write down the messages you want across the top of your store, then open the rotating announcement bar tool to choose and order them and preview the rotating bar from the Nudgesmart app. You publish it from the app and add it under your header. For a single static bar instead, see the announcement bar tool.
For how the bar fits with the other widgets on your store, see which product page widgets earn their place.
Tags
- store-widgets
- announcement-bar
- accessibility
- ux
- messaging