Timer and Announcement Bar in the Cart Drawer
The cart drawer has two message bars at the top: a Timer with a countdown, and an Announcement bar for any message. This article covers both. For the bar on the Sticky Add-to-Cart, see The Sticky Add-to-Cart Bar.
Timer
- In the editor's left menu, open Timer (under Header).
- Switch it on with the toggle.
- Write the message. Use {timer} where the countdown should show, for example: This price expires in {timer}.
- Under Timer settings, pick the timer type.
- Click Save.
| Timer type | How it counts |
|---|---|
| Countdown to date | Ends at the date and time you pick. Every shopper sees the same end |
| Fixed minutes | Each shopper gets their own countdown, starting the first time it shows in their browser tab |
Countdown to date ends at the same moment for every shopper, wherever they are.
When the timer ends
| Choice | What happens |
|---|---|
| Hide the timer | The bar disappears |
| Repeat the timer | It starts again. Fixed minutes only |
| Show message | Your end message replaces the countdown |
| Remove all items from cart | The cart is emptied. Cart drawer timer only, not the Sticky Add-to-Cart bar |
Timer labels
The labels d, h, m and s are the unit words shown with the countdown, for days, hours, minutes and seconds. You can change them in the Timer section.
Style the timer
On the Design tab: Background color, Border size and color, and spacing above and below. Text colour is set in the message editor, on the text itself.
Announcement bar
- Open Announcement bar (under Header).
- Switch it on.
- Write the message in the text editor. Use the toolbar for text colour, bold, italic and links. You can type or paste emoji.
- Click Save.
On the Design tab: Background color, Border size and color and spacing.
Common questions
| Question | Answer |
|---|---|
| How do I change the text colour? | Select the text in the message editor and use the text colour button |
| How do I turn it off on mobile only? | Yes. Turn off the mobile setting for that bar. The timer and the announcement bar each have their own desktop and mobile settings. (The Sticky Add-to-Cart bar has Enabled on mobile) |
| How do I remove the green Get it while it lasts bar? | That's the Sticky Add-to-Cart's announcement bar. Untick Enabled on desktop and Enabled on mobile in its Announcement bar section |
| I changed the text but see the old one | Save, then hard-refresh your store or check in a private window |
| Can I show the timer on product pages? | Not with the drawer timer. |
| Can I translate it? | Yes, in the section's Translations card: the message, end message and labels |
| Different message per market? | No. Messages can only differ by language |