> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://stoqapp.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add a 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.

| **Tip:** If your offer already has a start date and/or end date configured in the **Status** tab, the countdown timer can use those dates automatically — no need to enter them again.

### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image15rok1e_euhw2z.png)

##### 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.

|| **Note:** When you first enable the timer, STOQ automatically picks the best default mode based on your offer's current schedule. For example, if your offer has both a start and end date, STOQ defaults to "Countdown to launch and deadline."

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/image195a3j2_zk5dfj.png)

##### 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).

|| **Note:** The "Countdown to launch and deadline" mode always uses your schedule dates from the Status tab. You cannot set custom dates for this mode.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-43_ta3m1s.png)

##### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-45_156mtfu.png)

| **Tip:** For the "Countdown to launch and deadline" mode, STOQ automatically uses your schedule dates and shows them in a banner. Click **Edit dates in Status tab** to change them.

##### 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.

| **Tip:** Keep headings short and action-oriented. Examples: "Launching in," "Order before," "Limited time — preorder ends in."

##### 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-46_1qxtvme.png)

##### 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**.

|| **Note:** If you leave the position field empty, STOQ places the timer in its default location near the preorder button.

### Translating the Countdown Timer for Other Languages

If your store serves customers in multiple languages, you can translate the countdown timer heading text using STOQ's built-in translations editor. The two translatable fields are:

**Countdown timer starts text** — The heading shown before the preorder opens (e.g., "Preorder starts in").
**Countdown timer ends text** — The heading shown during the preorder period (e.g., "Preorder ends in").

Both fields support the following variables, which you can include in any language:

{{ days }} — The number of days remaining.
{{ hours }} — The number of hours remaining.
{{ minutes }} — The number of minutes remaining.
{{ seconds }} — The number of seconds remaining.

### How to Translate

1. In your Shopify admin, open the STOQ app.
2. Go to **Preorders** > **Settings** tab.
3. Scroll down and click on "Manage Languages" under "Other" section
4. Click on "Edit translations" for "Preorder offers" 
5. Choose the preorder offer and language from the field dropdowns
6. Find the Countdown timer starts text and Countdown timer ends text fields.
7. Enter the translated heading text for each field. You can include the {{ days }}, {{ hours }}, {{ minutes }}, and {{ seconds }} variables in your translated text.
8. Click **Save changes** on bottom left.

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-2026-04-25t12521284_1viaqnc.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/f/6/9/b/f69b1402a211d800/screenshot-2026-04-25t12542653_qyuj4o.png)

For example, to translate the countdown headings into French:

| Field | Default (English) | French Translation |
| ---- |
| Countdown timer starts text | Preorder starts in | La précommande commence dans |
| Countdown timer ends text | Preorder ends in | La précommande se termine dans |

|| Note: The time unit labels below the countdown numbers (Days, Hours, Minutes, Seconds) are rendered by the storefront script and follow the customer's browser language. Only the heading text above the countdown is translatable through the STOQ translations editor.

### 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

| Symptom | Possible Cause | Solution |
| ---- |
| "Show countdown timer" option is disabled | You are on a free STOQ plan | Upgrade to a paid plan to unlock the countdown timer |
| Timer does not appear on the product page | The countdown dates have passed, or the timer is disabled | Check that the timer is enabled and that at least one date is in the future |
| Timer not showing for an in-stock preorder with a start date | The product is available (in stock) and the offer has not launched yet | This is a known limitation. The pre-launch countdown only appears when the product is unavailable. The timer works once the offer is live and counts down to the deadline |
| Only some countdown modes are available | Your offer's schedule does not support all modes | Set a start date, end date, or both in the Status tab to unlock all three modes |
| Timer disappeared after changing the offer status | STOQ resets the countdown timer when the status changes | Re-enable the countdown timer and reconfigure dates and settings |
| "Use schedule date" option is disabled | The relevant date is not set in the Status tab | Go to the Status tab and set the start date or end date for your offer |
| Timer shows on the wrong part of the page | Default positioning does not work for your theme | Set a custom CSS selector in Advanced settings > Countdown timer position |
| Timer numbers are hard to read | Text and background colors have low contrast | Adjust the text color and background color in the Styling section for better contrast |

### 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.