Rotating announcement bar for Shopify
Last updated
Each one loads sample messages, some deliberately flawed. Replace them with yours in step 2 and the plan updates as you type.
Pick one of the three bars above. Which messages to keep, the order, how long each one stays up and a live preview of the app’s bar appear here.
The parts of a rotating bar
A rotating announcement bar on Shopify shows a few short messages one at a time in the same slim bar near the top of the page, such as free shipping, then returns, then support, with a pause button for shoppers, and this tool picks which messages to keep, puts the right one first and checks each one is short enough to read in time before you set it up in the Nudgesmart app.
The title length, the seconds per message and the timing on phones are the ones the Rotating announcement bar layout of the Icons with text widget uses in the Nudgesmart app. Every widget layout the app offers is on the store widgets page, the steps to set the bar up are in the rotating announcement bar help article, and for a single fixed message bar there is the announcement bar generator.
A rotating bar is a few short promises taking turns in one place. These are the pieces the tool weighs, in the words the app uses for them.
- Rotating announcement bar
- A layout of the Icons with text widget in the Nudgesmart app. Each message fades in, stays up for a few seconds and gives way to the next, in the same slim strip. Nothing scrolls sideways.
- Message
- One line, typed as a title in the app, up to 80 characters, with an icon beside it. The longer text field the other layouts use is not shown in this one.
- Seconds per message
- The shortest time each message stays up, from 4 to 12 seconds, starting at 4. Longer messages stay up longer on their own, and every message stays up a little longer on a phone.
- Pause button
- A small button at the end of the bar that stops the rotation, which shoppers can always reach, including on a phone where there is no hover. It also stops any Nudgesmart countdown moving on the page.
- Reduced motion
- A device setting some shoppers turn on to stop movement on screen. For them the bar does not rotate and shows only the first message, which is why the first one matters most.
- One full turn
- The time from the first message coming up to it coming round again. The longer it is, the fewer shoppers ever read the last message.
- Shopper’s code slide
- An option in the app that adds one more slide showing a shopper the discount code they got from one of your Nudgesmart popups, with the time left, only while they have one.
Nudgesmart adds widgets like this one to your store from the theme editor, in your theme’s fonts and colours by default, and is available on the Shopify App Store. See every widget layout or see what it costs.
Five bars and what the tool says about each
Invented stores with typical messages. Every verdict, time and flag comes from the same plan the tool above builds, at the seconds per message shown.
| Scenario | Typed | Rotating | One full turn | What the tool says |
|---|---|---|---|---|
| Four short store promises | 4 messages, 4 seconds each at least | 4 | about 16 seconds | Nothing to flag |
| A sale message placed first | 3 messages, 5 seconds each at least | 3 | about 15 seconds | Message 1: At 44 characters this wraps to two lines on a phone, and the bar keeps the height of its tallest message, so every message gets the taller bar. Message 1: A message tied to a sale or a date is first. Shoppers who ask their device to reduce motion only ever see the first message, so put a lasting one there and this one second. Message 3: At 62 characters this wraps to two lines on a phone, and the bar keeps the height of its tallest message, so every message gets the taller bar. |
| Six messages with a near-duplicate and a code | 6 messages, 4 seconds each at least | 4 | about 16 seconds | You have 6 messages. The app shows the warning “Rotating bars work best with 2–5 short messages.” With this many, each one comes round rarely. Keep 3 or 4. Message 2: Says much the same as message 1. Keep the clearer one. Message 6: The app warns above five messages. Keep this one for a later swap. |
| One message on its own | 1 message, 4 seconds each at least | no | — | Nothing to flag |
| Three messages at 12 seconds each | 3 messages, 12 seconds each at least | 3 | about 36 seconds | One full turn takes about 36 seconds on a computer. Few shoppers wait that long for the last message, so the ones at the end are rarely read. |
What the plan cannot see
It is not in your theme header
The bar is a block on the page, so it sits wherever you drag it in the theme editor, usually just under the header. It cannot go inside the header itself, and your theme’s own announcement bar, if it has one, stays where it is.
Important information belongs elsewhere too
A message that takes turns with others is easy to miss, and shoppers who reduce motion only ever see the first one. Put anything a shopper must know, such as a delivery cut-off, on the product page or at checkout as well.
People read at different speeds
The times are typical, not exact. A shopper who glances up halfway through a message may need another turn to read it, which is another reason to keep each one short.
Promises must match your policy
The tool cannot see your shipping or returns policy. If a message says 30-day returns and the policy says 14 days, shoppers will hold you to the bar.
It is not a marquee
If you want text gliding sideways across the screen, this is not that. The bar fades one message to the next, which is easier to read and does not distract from the page.
Rotating announcement bar questions
How do I add a rotating announcement bar to Shopify?
In the Nudgesmart app, create an Icons with text widget, pick the Rotating announcement bar layout, add your messages and publish it. Add to store then opens the Shopify theme editor with the block already added, ready to save. Drag it to the top of the page, just under your header.
How many messages should it have?
Three or four. The app warns above five, because with more each one comes round so rarely that most shoppers never see it. One message works too, but then the bar does not rotate.
How long does each message show?
At least 4 seconds, and longer for a longer message. On a phone each one stays up a little longer again. You can raise the shortest time to as much as 12 seconds in the app. Type your messages above to see the time for each.
Can shoppers pause it?
Yes. The bar has a pause button that works on a phone and with a keyboard, and it also stops while a shopper points at it or tabs into it. Shoppers who ask their device to reduce motion see only the first message, standing still.
How is this different from the announcement bar generator?
The announcement bar generator builds one fixed message bar you add to your theme yourself. This tool plans a bar of several messages that take turns, which you set up in the Nudgesmart app with no code.
Can it show each shopper their own discount code?
A message you type shows the same words to everyone, code included. On stores that give codes from Nudgesmart popups, the app can add one more slide that shows each shopper their own code and the time left on it.
Shoppers read the top of the page first.
Nudgesmart’s rotating announcement bar shows your messages one at a time with a pause button, in your theme’s fonts and colours by default.
