How to add a rotating announcement bar
Show short messages like free shipping, returns and fast replies one at a time in a slim bar near the top of your pages, with a pause button for shoppers.
You have a few things every shopper should know, and room for one line. A rotating announcement bar shows them one at a time, in the same spot.
TL;DR
Go to Store Widgets, click Create Widget and pick Icons with text, then choose the Rotating announcement bar layout. Write 2 to 5 short messages in the Items tab, click Publish, then Add to store. In the theme editor, drag the block to the top of the page, under your header, and click Save.
The rotating announcement bar is a layout of the Icons with text widget. It sits inside your page like any other widget. It isn't a popup and doesn't float over the page. For a bar that floats, see How to create an announcement bar.
Step 1 · Create the bar
In Nudgesmart, open Store Widgets and click Create Widget. Pick Icons with text and choose Rotating announcement bar. Searching the library for "announcement" finds it too.
Widget library with the Icons with text widget in the Rotating announcement bar layout
Screenshot coming soon
You can also turn an existing Icons with text widget into a bar: open the Design tab and choose Rotating announcement bar under Layout.
If you've filled in Store details, your bar starts with four messages built from them: your free shipping or delivery time, your returns, how fast you reply, and secure checkout. If you haven't, it starts with sample messages for you to replace.
Step 2 · Write your messages
Open the Items tab. Each item is one message. Edit its Title and pick an Icon.
Items tab with four messages, each with an icon and a title
Screenshot coming soon
- Keep each message to one short line. A title can be up to 80 characters, but shorter reads better, especially on phones.
- 2 to 5 messages work well. With only one, the bar shows it and doesn't rotate.
- Only the title shows. The Text field other Icons with text layouts use isn't shown in this layout.
Step 3 · Set the timing and style
Open the Design tab. Set Seconds per message and choose a Style.
Seconds per message goes from 4 to 12, and starts at 4. Longer messages stay up longer on their own, so shoppers have time to read them, and a little longer again on phones. The number you set is the shortest time any message shows.
Step 4 · Publish and add it to the top of your pages
In the Visibility card, click Publish. Then click Add to store.
Add to store suggests:
- Top of each page, under your header. Drag it to the top in the theme editor.
- On product pages too, so shoppers see it while they decide.
Click the button for a page to open the theme editor there, with the block added. Drag the block to the top of the page, just under your header. Then click Save.
To add it by hand, go to Online Store → Themes → Customize, open the page, click Add block, then Apps, and pick Icons with text widget. If you have more than one Icons with text widget, choose your bar in the block's Widget setting.
How the bar behaves
- One message at a time. Each one fades out and the next fades in, in the same place. Nothing scrolls sideways, and the page never jumps.
- A pause button. Shoppers can stop the messages with the pause button at the end of the bar, and start them again from the same message. Pausing also stops other moving Nudgesmart widgets on the page, such as a countdown.
- It waits for the shopper. The bar also pauses while a shopper points at it or tabs to it, and while it's off screen.
- It respects motion settings. If a shopper has asked their phone or computer to reduce motion, the bar shows your first message and doesn't rotate.
When a shopper has a code
If your popups give shoppers a discount code, the bar can add one more message with their code and the time left on it. Under When a shopper has a code, tick Add a slide with the shopper's code. It shows only while a shopper has a code, as the last message. Look of the code parts sets whether it matches the popup or your theme.
Tips
- Put the most important message first. It shows the moment the page loads, and it's the only one shoppers who reduce motion will see.
- Use messages that are true for every order. Free shipping over an amount, your returns window, how to reach you. Save sale news for messages you'll remember to remove.
- Add it to your home page and product pages. Those are the pages most shoppers see first.
Common pitfalls
- The bar isn't at the very top. Add to store adds the block to the page, not to your theme's header. In the theme editor, drag the block to the top of the page's sections, just under the header.
- The messages don't rotate. Check that the bar has at least two messages. If it does, your phone or computer may be set to reduce motion. The bar then shows only the first message.
- Publishing asks me to confirm sample content. One or more messages are still samples. Replace them with your own words, or confirm if they're true for your store.
- I see a second line under each message. Your widget is using another layout. Open the Design tab and choose Rotating announcement bar under Layout.