Countdown Timers
Countdown timers add a live, ticking clock to your announcement bar that counts down to a specific date and time. They are one of the most effective tools for creating urgency around sales, product launches, and limited-time offers.
Creating a Countdown Announcement
Open the announcement editor (create new or edit existing)
In the Announcement Type dropdown, select Countdown Timer
Set your Target Date and Time using the date picker – this is the moment the countdown reaches zero
Write your message text (e.g., “Summer Sale ends in”)
Choose a countdown visual style
Configure colors, positioning, and other settings as usual
Save and publish
The target date and time are displayed in your account’s timezone, which is set in your Shopify admin under Settings > General.
Countdown Visual Styles
You can choose from five visual styles that control how the countdown digits are rendered:
Flip Cards (default) – Each unit (days, hours, minutes, seconds) appears on a card with a flip animation as digits change. This is the most visually striking option and works well for major promotions.
Compact – Simple inline text showing the countdown as
2d 5h 30m 15s. Takes up minimal space and blends naturally with your message text.Boxes – Each time unit sits inside a bordered box. Clean and structured, good for stores that prefer a contained, organized look.
Circles – Circular progress indicators surround each time unit. The circles deplete as time passes, providing a strong visual cue of urgency.
Minimal – Just the numbers with no decoration, borders, or containers. The countdown integrates seamlessly into your message without drawing attention to itself as a separate element.
Countdown Position
By default, the countdown timer appears after your message text. You can change this:
Before message – The countdown appears first, followed by your text. Example:
[02:15:30:45] Don't miss our biggest sale!After message (default) – Your text appears first, then the countdown. Example:
Sale ends in [02:15:30:45]
Inline Countdown with the {countdown} Placeholder
For more control over where the countdown appears within your message, use the {countdown} placeholder. Place it anywhere in your message text and the countdown timer will render at that exact position.
Examples:
Sale ends in {countdown} -- shop now!Only {countdown} left to save 40%{countdown} until our new collection drops
When you use the {countdown} placeholder, the Before/After position setting is ignored since you are manually controlling placement.
Expired Message
You can set an optional message that replaces the countdown once it reaches zero. This prevents visitors from seeing 00:00:00:00 on your bar.
How to set it:
In the countdown settings, find the Expired Message field
Enter your replacement text
Examples:
Sale has ended! Check back soonThis offer has expiredThanks for shopping with us!
If you leave the expired message blank, the announcement bar will continue to show the countdown at zero.
Style and Design Notes
Countdown Timer announcements always use the Classic announcement style. Even if you select Fade, Running Line, or Typed in the style dropdown, the bar will render as Classic. This ensures the timer digits remain stable and readable without competing animations.
All other design options work normally with countdowns – background styles, colors, positioning, sticky/inline display, dismissibility, and link settings all apply as expected.