Countdown Timer
Create urgency by displaying a countdown timer.
Countdown Timer adds a ticking timer to your product pages to nudge customers toward buying now instead of later. You can run it as a fixed-date campaign that counts down to a real deadline, or in evergreen mode where each customer gets their own personalized timer that quietly resets in the background. Seven visual themes let you match the look to any storefront style.
Which mode should I pick?
The timer has two modes — pick based on whether you're running a real campaign or just want ongoing urgency:
| If you want to… | Use this mode |
|---|---|
| Run a flash sale, product launch, or holiday promo with a real end time | Fixed end date |
| Add gentle, always-on urgency without managing campaign dates | Evergreen |
Fixed end date counts down to a date and time you set — when that moment passes, the timer disappears for everyone. Honest, simple, perfect for real deadlines.
Evergreen gives each customer a unique timer randomly picked from a range you define (e.g., 2–3 hours). When it expires, it hides for a cool-off period and then resets the next time the customer comes back. No campaign work required, but use this with care — be mindful that the urgency is psychological rather than tied to a real deadline.
What's Included
Two Timer Modes: Fixed and Evergreen
The "Countdown timer end date" setting picks the mode.
In Fixed end date mode, you set "Countdown starts at" and "Countdown ends at" dates. The timer only shows during that window and disappears once the end time passes — ideal for sales, launches, and holiday promotions.
In Evergreen mode, the app picks a random countdown duration for each customer (within a min/max range you define) and saves it to their browser. The same customer sees the same timer on return visits until it expires. After the timer ends, it stays hidden for a configurable cool-off period, then resets with a new random duration.
Seven Visual Themes
The "Theme" setting gives you seven distinct designs to match your store's vibe:
- Classic — the default; a clean horizontal layout.
- Hexagon Timer — bold geometric units.
- Progress circles — circular progress rings per unit.
- Cards — each time unit in its own card block.
- Modern — minimal single-line layout.
- Progress bar — a horizontal bar that depletes over time.
- Minimalist — stripped-down text display.
Each theme has its own color controls so you can fine-tune the look.
Discounted Products Only
When to keep this on: Almost always. By default, "Only show the countdown timer for products that are currently discounted" is enabled, so the timer only shows on products with a sale price set. That keeps the urgency tied to something real — a discount that's actually ending — which is much more credible than a ticking clock on a regular-priced item.
Turn it off only if you have a specific reason to show the timer on all products regardless of pricing.
Customizable Labels
The timer's heading and every unit label can be edited and translated. The "Title" field (default: "Sale ending in") appears above the timer. Separate fields for "Day", "Days", "Hour", "Hours", "Minute", "Minutes", "Second", and "Seconds" let you customize or translate each time unit independently — useful for multilingual stores or custom messaging like "Offer expires in" or "Ends in".
Milliseconds Display
The "Show miliseconds" setting adds a rapidly ticking milliseconds counter for extra urgency. Use it sparingly — it can feel intense and isn't right for every brand.
Advanced Placement
By default the timer appears above the add-to-cart form on product pages. The "Countdown Timer Inject Selector" setting accepts a CSS selector that redirects the widget to any element in your theme — handy when your theme's form structure needs a different injection target.
How It Works
What Customers See
The timer only appears on product pages, and only when the current product variant is available for sale. When the countdown reaches zero, the widget removes itself from the page.
- Fixed mode: The timer counts down to the date set in "Countdown ends at". It only shows if the current time is within the window defined by "Countdown starts at" and "Countdown ends at". Once the end date passes, the timer disappears for all customers.
- Evergreen mode: When a customer visits a product page for the first time, the app picks a random countdown duration within your configured range and saves it to that customer's browser. On return visits, the same timer keeps counting down from where it left off. After it expires, it stays hidden until the "Cool off period" elapses, then resets with a new random duration on the next visit.
Tracking consent is handled automatically: on stores with privacy banners, the timer only activates after a customer accepts tracking.
What You Do in the Dashboard
The app installs above the add-to-cart form by default. From the Countdown Timer section of your Vitals dashboard you can:
- Toggle the app on or off
- Choose the timer mode and configure the dates or duration ranges
- Pick from seven themes and adjust colors
- Customize the title and time unit labels
- Limit the timer to discounted products (default) or show on all products
- Optionally override the placement with a custom CSS selector
Setup, Step by Step
- Enable the app — Go to the Countdown Timer section in your Vitals dashboard and toggle it on.
- Choose a timer mode — Set "Countdown timer end date" to Fixed end date for a real campaign deadline, or Evergreen for always-on urgency.
- Configure the timer dates or range:
- For Fixed: fill in "Countdown starts at" and "Countdown ends at" with your campaign window.
- For Evergreen: set the min/max days, hours, and minutes for the duration range, and set the "Cool off period" for how long the timer stays hidden after it expires.
- Choose a theme — Pick from the seven visual styles in the "Theme" setting.
- Adjust colors — Set the digit color, background, title color, and any other color pickers to match your brand.
- Customize the title and labels — Update "Title" from "Sale ending in" to a phrase that fits your promotion. Translate the time unit labels if your store serves non-English customers.
- Decide on discounted-only mode — Leave "Only show the countdown timer for products that are currently discounted" enabled for credible urgency, or disable it to show the timer everywhere.
- Save and test — Visit a product page on your store (with a sale price if discounted-only is on) to confirm the timer shows and counts down correctly.
Tips for Getting the Most Out of It
- Match your tone. The default "Sale ending in" works, but a quick tweak — "Hurry — offer ends in" or "Last chance:" — can lift performance with no extra effort.
- Pick the right mode for the message. Use Fixed for anything you've publicly committed to. Use Evergreen for ongoing nudges where no real deadline exists.
- Don't overdo the urgency. Combining the timer with milliseconds, bold colors, and aggressive copy can feel pushy and erode trust. Pick one strong cue, not three.
- Test on mobile. Some themes feel different on a small screen than they do on desktop — preview both before committing.
- Keep evergreen ranges believable. If your range is too wide (5 minutes to 7 days), returning customers may notice the inconsistency. Tight, realistic ranges feel more natural.
Settings Reference
Timer Mode
| Setting | Type | Description |
|---|---|---|
| Countdown timer end date | Dropdown | Picks how the timer counts down. Fixed end date — counts to a specific date you set. Evergreen — generates a unique randomized timer per customer within a duration range. Default: Fixed end date. |
| Countdown starts at | Text (date/time) | (Fixed mode) The date and time when the timer begins showing. The timer will not appear before this date. |
| Countdown ends at | Text (date/time) | (Fixed mode) The date and time the timer counts down to. The timer disappears when this date passes. |
Evergreen Duration Range
These settings define the minimum and maximum timer duration in evergreen mode. The actual countdown for each customer is a random value within this range.
| Setting | Type | Description |
|---|---|---|
| Minimum Days | Number field | Minimum number of days in the timer range. Default: 0. |
| Minimum Hours | Number field | Minimum number of hours in the timer range. Default: 2. |
| Minimum Minutes | Number field | Minimum number of minutes in the timer range. Default: 1. |
| Maximum Days | Number field | Maximum number of days in the timer range. Default: 1. |
| Maximum Hours | Number field | Maximum number of hours in the timer range. Default: 3. |
| Maximum Minutes | Number field | Maximum number of minutes in the timer range. Default: 10. |
| Cool off period (minutes) | Number field | How long (in minutes) after the timer expires before it resets and shows again for the same customer on the same product. Default: 15. |
Display
| Setting | Type | Description |
|---|---|---|
| Theme | Dropdown | Visual style of the timer. Options: Classic (default), Hexagon Timer, Progress circles, Cards, Modern, Progress bar, Minimalist. |
| Title | Text field | Heading text displayed above the timer. Default: "Sale ending in". Translatable. |
| Font size | Number field | Font size for the timer display, in pixels. Default: 30. |
| Timer alignment | Dropdown | Horizontal position of the timer on the page. Options: Left (default), Center, Right. |
| Show miliseconds | On/Off toggle | Adds a rapidly updating milliseconds counter to the timer. Off by default. |
| Only show the countdown timer for products that are currently discounted | On/Off toggle | Limits the timer to products with a compare-at (sale) price set. On by default. |
Colors
Different themes use different color controls. The settings below apply depending on the active theme.
| Setting | Type | Description |
|---|---|---|
| Digits color | Color picker | Color of the digit numbers. Default varies by theme (red #de4848 for Classic, dark #444444 for Default/Hexagon). |
| Background color | Color picker | Background fill of the timer units. Default: light gray (#cccccc). |
| Title color | Color picker | Color of the heading text above the timer. Default: gray (#626262), or dark (#222222) for the Modern theme. |
| Border color | Color picker | Border color around the timer units. Default: black (#000000). |
| Gradient start color | Color picker | Starting color of the gradient applied to the timer background. Default: white (#f7f7f7). |
| Gradient end color | Color picker | Ending color of the gradient applied to the timer background. Default: white (#f7f7f7). |
| Digits text size | Number field | Font size for digit numbers in the Modern theme. Default: 24. |
Labels / Translation
| Setting | Type | Description |
|---|---|---|
| Day | Text field | Label for a single day. Default: "day". |
| Days | Text field | Label for multiple days. Default: "days". |
| Hour | Text field | Label for a single hour. Default: "hour". |
| Hours | Text field | Label for multiple hours. Default: "hours". |
| Minute | Text field | Label for a single minute. Default: "minute". |
| Minutes | Text field | Label for multiple minutes. Default: "minutes". |
| Second | Text field | Label for a single second. Default: "second". |
| Seconds | Text field | Label for multiple seconds. Default: "seconds". |
Advanced
| Setting | Type | Description |
|---|---|---|
| Countdown Timer Inject Selector | Text field | A CSS selector pointing to a specific element where the timer should be injected. Leave blank to use the default position above the add-to-cart button. |
Frequently Asked Questions
What's the difference between Fixed end date and Evergreen mode?
Fixed end date counts down to a real date and time you choose — when that time passes, the timer disappears for everyone. Evergreen generates a unique timer for each customer per product, chosen randomly within your min/max duration range. After it expires, it hides for the "Cool off period" and then resets on the next visit. Evergreen is always-on urgency; Fixed is campaign-based urgency.
Does the Evergreen timer stay the same if a customer comes back?
Yes. The countdown is saved to the customer's browser when they first see it. If they return before it expires, they see the same timer continuing from where it left off. Once it expires and the cool-off period passes, they get a new random timer on their next visit.
Why isn't the timer showing on my product page?
Check that the app is enabled and, if using Fixed mode, that today's date falls between "Countdown starts at" and "Countdown ends at". If "Only show the countdown timer for products that are currently discounted" is on (the default), the timer will only appear on products with a compare-at price set. Also confirm the current product variant is available for sale — the timer doesn't show on out-of-stock variants.
Can I show the timer on all products, not just discounted ones?
Yes. Disable the "Only show the countdown timer for products that are currently discounted" setting. The timer will then appear on all available products regardless of pricing.
Can I use the timer in a campaign with a real deadline?
Yes — use Fixed end date mode. Set "Countdown starts at" to when you want the timer to begin appearing, and "Countdown ends at" to your actual sale end time. When that time arrives, the timer disappears from all product pages automatically.
What happens when the timer reaches zero?
The timer widget removes itself from the product page. In Fixed mode, it stays gone (the campaign ended). In Evergreen mode, it reappears after the "Cool off period" elapses, starting fresh with a new random duration.
Can I change the language of the timer labels?
Yes. The "Title" field and all time unit labels ("Day", "Days", "Hour", "Hours", etc.) are fully editable. Update them to any language or custom text that fits your store.
Does the countdown timer appear on the cart page or homepage?
No. The timer only appears on product pages.
Can I move the timer to a different position on the product page?
Yes. By default it appears above the add-to-cart button. Use the "Countdown Timer Inject Selector" field to provide a CSS selector targeting a specific element, and the timer will be inserted at that location instead.
Which theme should I choose?
It depends on your store design. Classic is a safe default that works with most themes. Cards and Hexagon Timer are bold and eye-catching for stores with high-energy branding. Minimalist and Modern suit clean, minimal storefronts. Progress bar and Progress circles add a visual sense of depletion that can reinforce urgency. Try a few and use your theme editor preview to compare.
Does the timer slow down my product pages?
No. The timer is lightweight and loads as part of the Vitals storefront bundle. It does not make external requests or delay page rendering.