> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/countdown-timer.md). # Countdown timer Run a live countdown in banners, the announcement bar, popups, and on product pages. Set the end date, choose what happens at zero, and target single products. A visible deadline is one of the cheapest ways to move a hesitant visitor. In Avante the countdown is a **block**, not a section, so the same timer can run inside a hero banner, in the announcement bar, in a popup, or right above the Add to cart button — wherever the offer actually lives. The block counts down in days, hours, minutes, and seconds, and you decide what the storefront shows once the clock reaches zero. *** ### Where you can add it The **Countdown timer** block is available in these sections: | Section | Group | | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | [Image banner](/docs/avante-themes/sections/banners/image-banner.md) | Banners | | [Video banner](/docs/avante-themes/sections/banners/video-banner.md) | Banners | | [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md) | Banners | | [Fullscreen banner with product](/docs/avante-themes/sections/banners/fullscreen-banner-with-product.md) | Banners | | Rich text | [Content / Text](/docs/avante-themes/sections/content-text.md) | | Media with text | [Media](/docs/avante-themes/sections/media.md) | | Newsletter | [Call to Action](/docs/avante-themes/sections/call-to-action.md) | | [Announcement bar](/docs/avante-themes/global-sections/header-and-navigation/announcement-bar.md) | Global sections | | [Popup](/docs/avante-themes/global-sections/footer-group/popup.md) | Global sections | | [Flyout](/docs/avante-themes/global-sections/footer-group/flyout.md) | Global sections | | Product overview, on any product template | [Default product](/docs/avante-themes/templates/default-product.md) | | Featured product | Products | | Quick view | Products | In **Slideshow with media** the countdown belongs to the slide rather than to the section, so one sale slide can run a timer while the rest stay evergreen. *** ### Adding the block {% stepper %} {% step %} #### Open the section In the Theme Editor, select the section that should carry the timer. {% endstep %} {% step %} #### Add the block Click **Add block** and choose **Countdown timer**. Drag it into place — above the buttons in a banner, under the price on a product page. {% endstep %} {% step %} #### Set the deadline Fill in **End date**, and **End time** if the offer ends at a particular hour. {% endstep %} {% step %} #### Choose what happens at zero Pick an option under **When the expiration date and time pass**, write a **Complete message** if you need one, then **Save**. {% endstep %} {% endstepper %} *** ### Setting the deadline **End date** uses the `YYYY-MM-DD` format — `2026-12-24`, not `24/12/2026`. **End time** is optional and uses `HH:MM` in 24-hour form. Leave it empty and the timer ends at `00:00`, the first minute of the day you entered — so a sale that should run through Christmas Eve needs `2026-12-25`, or `2026-12-24` with an end time of `23:59`. {% hint style="warning" %} **The clock runs on your store's time, not the visitor's.** The countdown is calculated from your store's primary timezone, set in **Shopify Admin → Settings → General**. A customer in another country sees the same number of hours left as a customer next door. {% endhint %} {% hint style="info" %} **The end date has to be within 99 days.** The days field holds two digits, so anything further out is rejected and the timer does not run. For long campaigns, set the timer when the final stretch begins. {% endhint %} Both fields are validated strictly. A date in the wrong format, an impossible date such as `2026-02-30`, or a date more than 99 days away all count as invalid. *** ### When the timer runs out **When the expiration date and time pass** has four options: | Option | What the customer sees | | -------------------------- | ----------------------------------------------------------------------- | | **Hide the timer** | The timer disappears. Nothing replaces it. | | **Show zeros** | The timer freezes at `00 : 00 : 00 : 00`. | | **Show message** | The timer is replaced by your **Complete message**. | | **Show zeros and message** | The frozen timer stays and the **Complete message** appears next to it. | The **Complete message** is a rich text field, so it can hold a link — useful for sending latecomers to a collection that is still live. {% hint style="warning" %} **The announcement bar is the exception.** Its countdown block offers only **Hide the timer** and **Show zeros**, has no Complete message field, and uses the short D / H / M / S labels because of the limited height. {% endhint %} *** ### Showing a timer on specific products only A block added to the Default product template appears on every product that uses it. To run a timer on a handful of products, give those products their own template. {% stepper %} {% step %} #### Create a product template In the Theme Editor, open the template selector at the top, go to **Products → Default product**, and choose **Create template**. Name it something recognisable, such as `sale`. {% endstep %} {% step %} #### Add the countdown In the new template, add the **Countdown timer** block to the **Product overview** section and set the end date. {% endstep %} {% step %} #### Assign the template to the products In **Shopify Admin → Products**, open each product and pick the new template under **Theme template**. You can do this for many products at once by selecting them in the product list and using **Bulk edit**. {% endstep %} {% endstepper %} The theme editor repeats this in the block description: to show a countdown timer on specific products, create a product template with the timer and assign it to those products. *** ### The timer in Quick view The Quick view countdown behaves differently on purpose. Its block has no date fields — it reads the **end date**, **end time**, and **complete message** from the Countdown timer block in that product's own template, so a quick view opened from a collection page shows exactly the same deadline as the product page. What the Quick view block does control is its own styling and its **When the expiration date and time pass** option. {% hint style="info" %} If a product's template has no Countdown timer block, the Quick view timer has nothing to read and removes itself. That is the intended behaviour: products without a sale template simply show no timer. {% endhint %} *** ### Good to know **The theme editor and the live store react differently to a bad date.** With an invalid or out-of-range date, the editor keeps the timer visible and frozen at zeros so you can see the block and fix it. On the live storefront the same block is removed entirely. Always check a new timer on the published store, not only in the editor. **Hiding the timer can take the rest of the section with it.** When the countdown is the only block in a Rich text, Image banner, Newsletter, Video banner, or Media with text section — or the only block on an announcement bar or slideshow slide — hiding it leaves an empty content area, so the theme removes that area too. A typo in the end date can therefore blank out a banner. Keep at least a heading or a button alongside the timer if the section must stay visible. **The timer updates live.** It ticks down in the customer's browser without a page reload, and the expiration action fires the moment the clock reaches zero. *** ### Customization ideas **Pair it with the announcement bar for a store-wide sale.** One timer at the very top of every page carries the deadline through the whole visit, while the product page timer repeats it where the decision is made. **Use the Complete message as a second offer.** Instead of "This offer has ended", link to the next promotion: "Sale closed — see what's new". **Match the timer to the banner.** The block has its own text colour, text size, optional background with colour or gradient, corner radius, and outline, so it can sit on a photo without a panel behind it, or stand out as a bold badge. **Turn labels off for a compact look.** **Show labels** hides the Day / Hr / Min / Sec captions and leaves only the digits — cleaner in a narrow column. *** ### Best practices Use a deadline that is real. A timer that resets every day teaches customers to ignore it. Give the countdown a reason next to it. "Ends in" above the digits converts better than four numbers on their own. Decide what happens after zero before you publish. **Hide the timer** is the safe default when the section has other content; **Show message** is better when the block is carrying the whole promotion. Check the timer on mobile. Four pairs of digits plus labels need room, and a long complete message wraps differently on a phone. *** ### Related * [Announcement bar](/docs/avante-themes/global-sections/header-and-navigation/announcement-bar.md) * [Popup](/docs/avante-themes/global-sections/footer-group/popup.md) * [Slideshow with media](/docs/avante-themes/sections/banners/slideshow-with-media.md) * [Default product](/docs/avante-themes/templates/default-product.md) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/countdown-timer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.