How to add a countdown timer

A countdown timer in Bundlex Bundles displays a clock beside your bundle offers. Choose a fixed duration, local midnight or a custom deadline, with a full digit-block layout or a compact bar. The timer is a visual feature: reaching zero does not deactivate the discount or stop shoppers receiving it. If a promotion must end, manage the discount separately and use wording that matches your actual offer.

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. Open the Add-ons tab and find the Countdown timer section.
3. Turn on the switch next to the Countdown timer title.
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 Countdown layout setting controls how the timer looks:

• Full - a larger block with separate day, hour, minute, and second digits, plus an optional title and subtitle.
• Compact - 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, with a new daily deadline when the page loads on 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). The countdown uses browser-local timing, so a page refresh does not reliably give the visitor a fresh full duration. On an already open page, reaching zero applies the selected expiry behavior. Do not rely on the clock automatically restarting on that page. Test both expiry and a later page load before publishing your wording.

Custom end date

When you select Custom end date, pick the End date & time. The editor displays a detected time zone beside the field. Check the resulting countdown in your target markets, especially if you need a deadline shared across time zones. The timer is not an enforcement mechanism for a promotion ending worldwide. Once the displayed deadline passes, it follows your selected expiry behavior.

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, "Timer finished. Offers remain available.").

Expiry behavior also matters for Fixed duration. In our one-minute test, the message stayed visible after zero while the discount continued to work in cart and checkout.

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:

Routine timer: {{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. When the timer's corners differ from your bundle's, a Match countdown corners to main widget note appears below the presets; click Apply 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.

Save and test the result

Save the discount and open a targeted product page with the discount active. Check the timer on desktop and mobile. For a quick expiry test, temporarily use one minute and wait for zero, then restore your intended duration. Verify the expired state and use Add to cart and checkout to confirm the actual offer behavior.

Our example uses a 15-minute compact timer above the offers. The one-minute test confirmed that the timer message changes at zero but two $24 bags still receive 10% off, giving a $43.20 merchandise subtotal in cart and checkout. Shipping is separate. Keep your timer wording consistent with that behavior.