How to add a countdown timer

A countdown timer adds urgency to your bundle widget by showing shoppers a ticking clock before the offer "ends." You can run a fixed countdown, a daily reset at midnight, or a one-time deadline, in either a full digit-block layout or a slim compact bar.

Enable the countdown timer

The countdown timer is configured per bundle deal, in the bundle editor, so it only appears where that bundle's widget shows.

1. Open the bundle deal you want to edit.
2. Find the Countdown timer section. The badge next to the title shows whether it is currently Enabled or Disabled.
3. Turn on Enable countdown timer.
4. Save the bundle.

As with the rest of the widget, your app embed (or app block) still needs to be on, with a published bundle matching the product, for the timer to show on the storefront.

Choose a layout

The Layout setting controls how the timer looks:

• Full (digit blocks) - a larger block with separate day, hour, minute, and second digits, plus an optional title and subtitle.
• Compact (slim bar) - a single slim line that combines a short message with the time, using the Compact title field.

Set the position

The Position setting decides where the timer sits:

• Above widget - inside the product page, just above the bundle.
• Below widget - inside the product page, just below the bundle.
• Sticky bar (top) - pinned to the top of the browser window. This is only available in Compact layout.

If you switch to the Full layout while Sticky bar is selected, the position falls back to Above widget automatically.

Pick a timer type

Under Timer type, choose how the countdown behaves:

• Fixed duration - counts down a set number of minutes for each visitor.
• Ends at midnight (user's local time) - counts down to midnight in each shopper's own time zone, then resets the next day.
• Custom end date - counts down to one specific date and time you set.

Fixed duration

When you select Fixed duration, set the Duration in minutes. The value must be between 1 and 1440 minutes (24 hours). Progress is saved per browser, so refreshing or returning to the page continues from where the visitor left off, and when the timer reaches zero it automatically restarts.

Custom end date

When you select Custom end date, pick the End date & time. The field shows your detected time zone next to the label so you know which clock the deadline uses. Once this deadline passes, the timer follows your expiry behavior below and does not restart.

Decide what happens when the timer ends

Use When timer ends to control the expired state:

• Hide timer - the countdown disappears.
• Show zeros - the countdown stays visible, frozen at zero.
• Show message - the countdown is replaced by an Expiry message you write (for example, "Offer has ended").

Because Fixed duration timers restart automatically, the expired state mainly applies to the Ends at midnight and Custom end date types.

Use the {{timer}} variable

In the Compact title field you can insert the {{timer}} variable wherever you want the live time to appear. For example:

Hurry! Offer expires in {{timer}}

The app replaces {{timer}} with the running countdown. The Compact title is also reused in the sticky add-to-cart bar when Show countdown in sticky bar is enabled, so keep it short and clear. In the Full layout you style the title, subtitle, and digit blocks separately rather than embedding the time in a single line, so {{timer}} is not used there. For the other placeholders you can use in widget text, see Template variables.

Style the timer

Below the behavior settings you can match the look to your widget:

• Apply a color preset, or use Match countdown corners to main widget to align the corner radius with your bundle.
• Open Countdown style to adjust the background, container (padding, border, shadow, alignment), and text. In the Full layout you can style the title, subtitle, digits, and unit labels individually.

Setting the timer to the Sticky bar position squares off the corners automatically, since a pinned top bar reads better flush. To reuse the same countdown inside the floating add-to-cart bar, see Sticky add to cart.