How to add countdown timer for preorders

A countdown timer for preorders creates urgency on your product pages by showing customers exactly how much time remains before a preorder opens or closes. STOQ lets you add a live countdown timer to any preorder offer, customize when it appears, choose your own dates, and style it to match your store's branding.

This guide covers every option available in the countdown timer settings, including display modes, date sources, heading text, and styling — plus limitations you should know about.

Overview

The countdown timer appears on your product page near the preorder button. It counts down in real time, showing days, hours, minutes, and seconds (or whichever units you choose). STOQ supports three countdown modes depending on your offer's schedule:

• Before preorder opens — Counts down to the launch date, building anticipation before the offer goes live.
• During preorder period — Counts down to the deadline, motivating customers to order before the offer ends.
• Countdown to launch and deadline — Shows the launch countdown first, then automatically switches to the deadline countdown once the offer is live.

The countdown timer is configured per offer, so each preorder offer can have its own timer with different dates, text, and styling.

Before You Begin

Make sure the following are in place before adding a countdown timer.

• You have an active paid STOQ plan. The countdown timer is available on paid plans only.
• You have at least one preorder offer created with products added.
• You know when your preorder should start and/or end. You can use your offer's schedule dates or set custom dates just for the timer.

How to Add a Countdown Timer

Follow these steps to enable and configure a countdown timer on your preorder offer.

Step 1: Open the Countdown Timer Settings

1. In your Shopify admin, open the STOQ app.
2. Go to Preorders.
3. Click on the offer you want to edit.
4. In the offer editor sidebar, click the Countdown timer icon to open the countdown timer settings panel.

Step 2: Enable the Timer

The Display section controls whether the timer is visible to customers.

1. Select Show countdown timer to enable it.
2. If you select Don't show timer, the countdown timer is hidden from your storefront.

Step 3: Choose When the Countdown Appears

After enabling the timer, the When should the countdown appear? section displays the available modes. The modes shown depend on your offer's current status and schedule dates.

Before preorder opens

The timer counts down to the offer's launch date. This mode is available when the offer is disabled or has a scheduled start date. Use this to build anticipation before the preorder window opens.

Once the start date passes, the timer disappears (unless you also have an end date and use the "both" mode).

During preorder period

The timer counts down to the offer's end date (deadline). This mode is available when the offer is currently live or has a scheduled end date. Use this to create urgency and motivate customers to preorder before the deadline.

Countdown to launch and deadline

The timer first counts down to the launch, then automatically switches to count down to the deadline once the offer goes live. This mode requires both a start date and an end date in your offer's schedule (set in the Status tab).

Step 4: Choose a Date Source

For the Before preorder opens and During preorder period modes, you can choose where the countdown dates come from.

Option A: Use schedule dates from the Status tab

Select Use 'Start' date set in Status settings (for before-launch mode) or Use 'End' date set in Status settings (for during-preorder mode). The timer uses the same dates already configured in your offer's Status tab.

• If the relevant date is set, STOQ displays it as a help text below the option (e.g., "Start: 15 Apr 2026, 12:00 pm").
• If the relevant date is not set, STOQ shows a warning: "A start date is not set for this offer. Set it up in 'Status' tab." This option is disabled until you set the date.

Option B: Set a custom date

Select Set a custom start date or Set a custom end date to enter a date and time specifically for the countdown timer. This is useful when you want the timer to count down to a different date than your offer's actual schedule.

1. Click Change to open the date picker.
2. Select a date from the calendar.
3. Choose a time from the dropdown (options are in 30-minute intervals, from 00:00 to 23:30).
4. To remove a custom date, click the Clear button.

Step 5: Customize the Timer Heading Text

The timer displays a heading above the countdown numbers. You can customize this text for each phase.

• Heading — before launch: Shown while counting down to the start date. Default placeholder: "Preorder starts in".
• Heading — during preorder: Shown while counting down to the end date. Default placeholder: "Preorder ends in".

Both fields appear only when relevant to your selected mode. If you use "Countdown to launch and deadline," both heading fields are shown.

Step 6: Customize the Timer Styling

Click Show under the Styling section to reveal the visual customization options. Click Hide to collapse them again.

Text color

The color used for the heading text, countdown numbers, and unit labels. Click the color swatch to open a color picker. Default: #000000 (black).

Background color

The background color of each countdown number box. Click the color swatch to open a color picker. Default: #f5f5f5 (light gray).

Corners

The border radius (in pixels) of each countdown number box. Controls how rounded the corners appear. Enter a value from 0 (square) to 50 (fully rounded). Default: 8.

Time units to display

Choose which time units appear in the countdown. Each unit can be toggled independently using checkboxes:

• Days — Show the days remaining.
• Hours — Show the hours remaining.
• Minutes — Show the minutes remaining.
• Seconds — Show the seconds remaining.

The default format is DHMS (all four units shown). You can uncheck any unit to hide it. For example, uncheck "Seconds" if you only want to display days, hours, and minutes.

Step 7: Save Your Changes

After configuring the countdown timer, click Save in the offer editor to apply your changes. The timer appears on your product pages for the products in this offer.

Changing the Timer Position on the Product Page

By default, the countdown timer appears near the preorder button. If you need to reposition it, you can set a custom CSS selector in the Advanced settings.

1. In the offer editor sidebar, click the Advanced settings icon.
2. Scroll to the Countdown timer position field.
3. Enter a CSS selector for the element you want to place the timer relative to (e.g., .product-form).
4. Choose an Insertion type:

• After element — Places the timer immediately after the selected element.
• Before element — Places the timer immediately before the selected element.
• Inside element (at end) — Places the timer inside the element, at the end.
• Inside element (at start) — Places the timer inside the element, at the start.

5. Click Save.

Known Limitations

• Paid plan required — The countdown timer is only available on paid STOQ plans. On free plans, the "Show countdown timer" option is disabled.
• In-stock offers with a start date — If your offer uses the "in-stock" inventory provider (Show 'Preorder' for in-stock products) and has a future start date, the "before launch" countdown timer does not appear on the storefront. This is because the product is still available for purchase (in stock), and STOQ only shows the pre-launch countdown when the product is unavailable. The timer works normally once the offer goes live and counts down to the deadline.
• Mode availability depends on schedule — The three countdown modes are only available when your offer's schedule supports them. "Before preorder opens" requires a start date. "During preorder period" requires the offer to be live or have an end date. "Countdown to launch and deadline" requires both a start and an end date.
• "Both" mode requires schedule dates — The "Countdown to launch and deadline" mode always uses your schedule dates from the Status tab. You cannot use custom dates for this mode.
• Countdown timer resets when status changes — If you change your offer's status in the Status tab (e.g., from "Available from start date" to "Available now"), STOQ automatically disables the countdown timer and clears its settings. You will need to re-enable and reconfigure it after the status change.
• Timer is per-offer — Each preorder offer has its own countdown timer settings. There is no global countdown timer that applies to all offers.
• Heading text is translatable — The heading text fields ("Preorder starts in" and "Preorder ends in") support translations if you use STOQ's multi-language features.

Troubleshooting

FAQs

Q: Can I use different dates for the countdown timer and the offer schedule?

A: Yes. For the "Before preorder opens" and "During preorder period" modes, you can choose between using your offer's schedule dates or setting custom dates specifically for the timer. This lets you show a countdown to a different date than when the offer actually starts or ends.

Q: What happens when the countdown reaches zero?

A: When the countdown reaches zero, the timer automatically disappears from the product page. If you are using the "Countdown to launch and deadline" mode, the timer switches from the launch countdown to the deadline countdown once the start date passes.

Q: Can I show only days and hours, without minutes and seconds?

A: Yes. In the Styling section, uncheck Minutes and Seconds under "Time units to display." The timer will only show the days and hours remaining.

Q: Why does the countdown timer not appear on an in-stock preorder with a start date?

A: When a product uses the "in-stock" inventory provider (meaning it shows "Preorder" while the product is in stock), the pre-launch countdown timer does not display because the product is still available for purchase. STOQ only shows the pre-launch countdown when the product is unavailable. Once the offer goes live, the "during preorder" countdown works normally.

Q: Does the countdown timer work on collection pages?

A: No. The countdown timer only appears on product pages where the preorder button is displayed. It does not appear on collection pages or other listing pages.

Q: Can I have multiple countdown timers on the same product page?

A: No. Only one countdown timer is shown per product page at a time. If a product is part of multiple preorder offers, STOQ picks the most relevant one (prioritizing market-specific offers, then checking for valid countdown dates).

Q: Will changing the offer status reset my countdown timer?

A: Yes. Changing the offer status in the Status tab (e.g., switching from "Available from start date" to "Available now") automatically disables the countdown timer and clears all its date settings. You will need to re-enable and reconfigure the timer after the change.

Q: Can I preview the countdown timer before saving?

A: Yes. The offer editor shows a live preview of the countdown timer on the right side of the screen. The preview updates in real time as you change settings, so you can see exactly how the timer will look before saving.

Updated on: 13/04/2026