Skip to main content

Smart Cart: Countdown Timer

The Countdown Timer is a Smart Cart component that shows shoppers a live countdown inside the cart drawer. You choose how long it runs, what text appears with it, when the clock starts, and what happens when time runs out.

Written by Christian Sokolowski

What is the Smart Cart Countdown Timer?

The Smart Cart Countdown Timer adds urgency to your cart drawer with a running clock and an optional progress bar that shrinks as time runs down. It works well for limited-time offers, product launch drops, and cart reservation messaging.

Before this component, merchants who wanted a timer in the cart had to build one with a Custom Code Block. Rebuy already offers timers in Widgets, Post Purchase offers, and Smart Flows banners, and the Countdown Timer brings the same option to Smart Cart natively.

Important: The Countdown Timer is a visual countdown. It does not hold or reserve inventory, because Shopify carts do not reserve stock. Other shoppers can still buy the same items while the timer is running.


Requirements and placement rules

The Countdown Timer has a few requirements to check before you add it to your Smart Cart.

Requirement

Details

Smart Cart version

Smart Cart v2 only. Smart Cart v1 does not support the Countdown Timer.

Timers per cart

One. The Countdown Timer tile disappears from Add Component once a timer is added.

Available anchors

Header, Goal Box, Body, Needs Attention, and Footer

Not available in

The Cross-Sells anchor, or as a Cart Tabs tab type

Timer type

Duration only (for example, 10 minutes). A fixed end date and time is not supported yet.


How do I add a countdown timer to my Smart Cart?

To add a countdown timer to your Smart Cart, add the Countdown Timer component to one of your cart’s anchors in the Smart Cart editor.

  1. Open your v2 cart in the Smart Cart editor. See How to edit a Smart Cart if you need help finding the editor.

  2. Open the anchor where you want the timer to appear (Header, Goal Box, Body, or Footer).

  3. Select Add Component > Countdown Timer.

  4. In the sidebar, set your duration, start trigger, and end action under Settings.

  5. your text under Language and your colors under Timer Display. The editor preview updates as you make changes.

  6. Click Save.


Countdown Timer settings

The Countdown Timer settings control how long the timer runs, when it starts, and what it does when it reaches zero. You can find them in the Settings section of the Countdown Timer sidebar.

Setting

What it does

Options

Default

Duration (Minutes and Seconds)

Sets how long the countdown runs

Whole numbers. Minutes from 0 to 1440, seconds from 0 to 59. The total must be more than 0:00.

5:00

Timer starts when

Sets the moment the clock begins

First item added, Page loads, Cart drawer opens

First item added

Actions

Sets what happens when the timer reaches zero

Do nothing, Hide, Restart, Clear cart, Redirect to checkout

Do nothing

Show progress bar

Shows or hides the shrinking line under the timer text

On or Off

On

Note: Smart Cart blocks saving if the duration is 0:00 or the seconds value is above 59.


When does the countdown timer start?

The Timer starts when setting controls the moment the countdown begins for each shopper.

Option

When the clock starts

First item added (default)

When the cart goes from empty to having at least one item. The timer stays hidden while the cart is empty.

Page loads

On the shopper’s first page view in that browser tab, even if the cart is empty. Refreshing the page does not reset it. A new tab opened directly starts its own clock.

Cart drawer opens

The first time the shopper opens the cart drawer with items in it.

Tip: Smart Cart opens the drawer automatically every time a shopper adds an item, unless you’ve turned that off. With auto-open on, Cart drawer opens usually behaves the same as First item added.


What happens when the countdown timer reaches zero?

The Actions setting controls what the Countdown Timer does when time runs out.

Action

What happens at zero

Do nothing (default)

The timer stays in the cart and shows your Expired timer text. The progress bar disappears.

Hide

The timer disappears from the cart.

Restart

A new countdown starts right away and keeps running.

Clear cart

Smart Cart empties the shopper’s cart wherever Rebuy is loaded, whether the drawer is open or closed, and the timer hides. If the shopper was away when time ran out, the cart clears on their next storefront page load.

Redirect to checkout

Smart Cart sends the shopper to checkout, but only if the cart drawer is open and the cart has items. Otherwise, the timer hides.

Important: Clear cart only runs where Rebuy is loaded. A shopper who is already in Shopify Checkout when time runs out keeps their items until they return to your storefront.


How do I change the countdown timer text?

You can change the Countdown Timer text in the Language section of the sidebar. Both text fields support rich text, including headings, bold, italic, underline, links, images, and alignment.

Setting

What it does

Default

Title

The text shown while the timer is running. The {{time_remaining}} placeholder is replaced by the live countdown. If you leave the placeholder out, Smart Cart adds the countdown to the end of your text. If you leave the field blank, only the countdown digits show.

Your cart items are only available for {{time_remaining}}

Expired timer text

The text shown at zero when Actions is set to Do nothing. The placeholder shows 0:00. If you leave the field blank, the title stays on screen showing 0:00.

Your cart reservation has expired


How do I change the countdown timer colors?

You can change the Countdown Timer colors in the Timer Display section of the sidebar.

Setting

What it controls

Default

Background Color

The timer’s background

#f4f4f4

Text Color

The timer text and digits

#434343

Progress Color

The progress bar. If you clear this field, the progress bar matches your Text Color.

Matches Text Color

Custom CSS in your Smart Cart can override these countdown colors.


Additional Details

How the countdown timer behaves on your live store

The Countdown Timer on your live storefront follows your settings exactly. It is designed to keep one consistent countdown for each shopper as they browse.

Does the timer keep counting when shoppers change pages?

Yes, the Countdown Timer keeps the same countdown when shoppers move between pages, refresh, or close and reopen the cart drawer. For the First item added and Cart drawer opens triggers, Smart Cart saves the deadline to the shopper’s cart.

A fresh countdown starts the next time the trigger happens if:

  • The shopper empties their cart

  • The shopper gets a new cart

  • You change the timer duration

Is the countdown the same on every device?

No, each shopper’s countdown is stored in their own browser, so it is not shared across devices. A shopper who switches from their phone to their laptop will see a separate countdown.

How is the time displayed?

The Countdown Timer shows time as minutes and seconds (for example, 4:45). For durations of 60 minutes or more, it shows hours, minutes, and seconds (for example, 1:15:00).

Is the countdown timer accessible to screen readers?

Yes, the Countdown Timer is built so screen readers are not interrupted every second. Screen readers announce the Expired timer text once when the timer reaches zero.

Why does the countdown timer look different in the editor preview?

The Countdown Timer in the Smart Cart editor preview behaves differently from your live store so you can see every state while you design it. In the preview, the timer always shows and counts down, holds the expired text for about three seconds at zero, and then restarts. The preview never clears the cart or redirects to checkout.

To test your end action, use your live storefront or a development theme.

Countdown Timer callbacks and events (for developers)

The Countdown Timer includes callbacks and page events so developers can send analytics tags or build a custom ending. You can find the callbacks in the sidebar under Advanced > Event Callbacks. The Advanced section also includes the standard Smart Cart custom template option.

Moment

Callback

Page event

Timer starts

Countdown Timer Started

rebuy:smartcart.countdown-timer-started

Timer reaches zero

Countdown Timer Expired

rebuy:smartcart.countdown-timer-expired

How the callbacks and events work:

  • The page events fire even if you haven’t set up a callback.

  • Both pass the action, component ID, deadline, duration, remaining time, and start trigger.

  • Countdown Timer Started fires every time a clock starts, including each Restart cycle and each preview loop. It does not fire when a saved countdown continues after a page load.

  • Countdown Timer Expired fires once per deadline, before the built-in action runs.

  • The callbacks are turned off by default on new carts.

Tip: To build your own ending, set Actions to Do nothing and add your custom logic to the Countdown Timer Expired callback.


Countdown Timer limitations

The Countdown Timer has these limitations in its current version:

  • Smart Cart v2 only. Smart Cart v1 carts are not affected.

  • One timer per cart. It can go in any anchor except Cross-Sells, and it can’t be used as a Cart Tabs tab.

  • Duration only. You can’t set a fixed end date and time yet.

  • No inventory reservation. The timer does not hold stock, because Shopify carts do not reserve inventory.

  • No built-in analytics. Use the callbacks or page events to send your own tracking tags.

  • Private browsing. If a shopper’s browser blocks storage (for example, in private mode), the timer runs only until they change pages.


Countdown Timer FAQ

Does the Smart Cart Countdown Timer reserve inventory?

No, the Smart Cart Countdown Timer does not reserve or hold inventory. Shopify carts don’t reserve stock, so other shoppers can buy the same items while the timer runs. The timer is a visual countdown with an optional action at zero.

Can I add more than one countdown timer to my Smart Cart?

No, each Smart Cart can have one Countdown Timer. Once you add it, the Countdown Timer tile disappears from Add Component.

Can I set the countdown timer to end at a specific date and time?

No, the Smart Cart Countdown Timer currently supports duration-based countdowns only, such as 10 minutes from when the shopper adds their first item. A fixed end date is not supported yet.

Why didn’t my countdown timer redirect the shopper to checkout?

The Countdown Timer only redirects to checkout if the cart drawer is open and the cart has items when time runs out. If either isn’t true, the timer hides instead.

Why didn’t my countdown timer reset when I refreshed the page?

The Countdown Timer is designed to keep the same countdown through refreshes and page changes. To start a fresh countdown for testing, empty your cart and add an item again, or open a new browser tab if you’re using the Page loads trigger.

Will Clear cart empty the cart of a shopper who is already in checkout?

No, Clear cart only runs where Rebuy is loaded, so it does not affect shoppers inside Shopify Checkout. If the shopper returns to your storefront after time has run out, their cart clears on that page load.

Can I see analytics for my countdown timer?

The Countdown Timer does not include built-in analytics in this version. You can track starts and expirations with the Countdown Timer Started and Countdown Timer Expired callbacks or page events.

Why can’t I save my countdown timer?

Smart Cart blocks saving the Countdown Timer if the duration is 0:00 or if the seconds value is above 59. Set a duration greater than zero with seconds between 0 and 59, then click Save.


Related articles

Did this answer your question?