# Countdown timer

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F49OeiGwoWAv4ym9Pkwgc%2FFox-BG%20Light%20(28).jpg?alt=media&#x26;token=db76a608-e987-49a6-ba55-a95b34f227bd" alt=""><figcaption></figcaption></figure>

Create urgency and boost conversions with the **Countdown Timer** section. This section helps you highlight limited-time offers, flash sales, or new product drops with a live countdown and optional promotional text or background media.

Ideal for homepages, sale banners, or product launches.

## How to add a Countdown timer section to your Shopify store

{% hint style="success" %}
Steps

1. In the theme editor **(Customize)** > click **Add section.**
2. Select **Countdown timer.**
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

## How to edit a Countdown timer section

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FrTGBIL4Jyb2z9wu1eaMv%2Fimage.png?alt=media&#x26;token=88f07828-da64-4711-ab19-0bcc90170fb6" alt=""><figcaption></figcaption></figure>

### Section settings&#x20;

<details>

<summary>Settings</summary>

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Countdown position</strong></td><td>Align the countdown: <code>Left</code>, <code>Center</code>, or <code>Right</code>.</td></tr><tr><td><strong>Text alignment</strong></td><td>Align the heading and text content.</td></tr><tr><td><strong>Background image</strong></td><td>Upload a custom background or choose from free images.</td></tr><tr><td><strong>Image overlay opacity</strong></td><td>Add a dark overlay to improve text contrast. Adjust from <code>0%</code> (no overlay) to <code>100%</code> (fully opaque).</td></tr></tbody></table>

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FWP3UPqfCUdFNtgEJ0Aou%2Fimage.png?alt=media&#x26;token=a376b718-132b-44c6-ae3c-4b774f4325e8" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary>Background video</summary>

<table><thead><tr><th width="240">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Show background video</strong></td><td>Enable to display a video behind the content.</td></tr><tr><td><strong>Video type</strong></td><td>Choose from <code>Shopify-hosted</code> or external (YouTube/Vimeo).</td></tr><tr><td><strong>Shopify-hosted video</strong></td><td>Upload a video file directly via Shopify Files.</td></tr><tr><td><strong>External video URL</strong></td><td>Paste a link to a YouTube or Vimeo video.</td></tr></tbody></table>

</details>

### Blocks settings

You can add 5 types of blocks to the **Countdown timer** section:

* Heading
* Subheading
* Text
* Countdown timer
* Button

{% tabs %}
{% tab title="Countdown timer" %}
Add a countdown timer and adjust the end time of the event.&#x20;

The **Countdown type** offers two modes:

* **Evergreen**: A repeating countdown that resets after a specified duration (e.g., every month).
  * This is useful for recurring sales, daily deals, or subscription cycles.

{% hint style="info" %}
The **Evergreen** setting is only available in Zest **version 9.0.0 and above**. :sparkles:

See [Changelog](https://help.foxecom.com/changelog/zest).
{% endhint %}

* **Fixed time**: A one-time countdown that ends at a specific date and time.
  * Ideal for limited-time promotions, event registrations, or product launches.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FA1tEVxNnhA7r1ToeAQ61%2Fimage.png?alt=media&#x26;token=bf2e6f70-9f11-409d-b9b6-0aae53ab4a88" alt=""><figcaption></figcaption></figure>

The countdown timer can be displayed in different **Style**s: Minimal/ Highlight

{% tabs %}
{% tab title="Minimal" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FZdNyhaQwipzj9qbZ6qis%2Fimage.png?alt=media&#x26;token=07990e7b-d9f7-4a49-a8f3-0a201fabd711" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Highlight" %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FtYFf68PVDKqcJ75dZCP3%2Fimage.png?alt=media&#x26;token=1829b107-063e-4743-bdb5-f288ea182dca" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

The **Number size** and **Number spacing** can be adjusted to improve readability and aesthetics:

* Small
* Medium
* Large

{% hint style="info" %}
If you choose the **Evergreen** countdown, you must specify the **Duration** for when the timer should reset.

**Duration** determines how often the countdown restarts.&#x20;
{% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FlzwpeWFdPEt91Fixf57g%2Fimage.png?alt=media&#x26;token=c9d297f2-88f8-406d-ab7f-0cfb653dc248" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you choose the **Fixed time** countdown, you need to specify when the countdown should end.

Enter the exact date and time in the **Ends time** field when the countdown should stop.
{% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F2CoaJfReqXQGhB4iwXJ8%2Fimage.png?alt=media&#x26;token=20ecb0e5-b781-4c87-a4dd-91bc6e432074" alt=""><figcaption></figcaption></figure>

*Date formats accepted:*

| Name           | Format              | Example             |
| -------------- | ------------------- | ------------------- |
| 24 hour format | YYYY/MM/DD HH:MM    | 2023/10/04 23:30    |
| 12 hour format | YYYY/MM/DD HH:MM AA | 2023/10/04 11:30 PM |
| {% endtab %}   |                     |                     |

{% tab title="Heading" %}
Add a heading to the section.&#x20;

[#highlight-text](https://docs.foxecom.com/zest-theme/pages-global-sections/general-settings#highlight-text "mention")

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FeYhahSw6BhCsPKmRtpiY%2Fimage.png?alt=media&#x26;token=a09bd1f2-7a94-46dc-bfed-0c01aee5a674" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the heading in Theme settings > [typography](https://docs.foxecom.com/zest-theme/theme-settings/typography "mention")
{% endhint %}
{% endtab %}

{% tab title="Subheading" %}
Add a subheading to the section.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FMibLAeagK5QAIxZNil4O%2Fimage.png?alt=media&#x26;token=e55eaf49-242a-4360-b61a-cd6095316ea1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the subheading in Theme settings > [typography](https://docs.foxecom.com/zest-theme/theme-settings/typography "mention")
{% endhint %}
{% endtab %}

{% tab title="Text" %}
Add a description to the section.&#x20;

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fd2NBcjBb6jhlVvnIWezq%2Fimage.png?alt=media&#x26;token=c843ad50-bd90-4306-b5f1-beeda1804615" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the text in Theme settings > [typography](https://docs.foxecom.com/zest-theme/theme-settings/typography "mention")
{% endhint %}
{% endtab %}

{% tab title="Button" %}
You can also display a call-to-action button to redirect customers to your desired pages.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FhKLErvvdA76meT2xCjqP%2Fimage.png?alt=media&#x26;token=3178651e-47dc-4351-add6-663ab3907716" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/zest-theme/theme-sections/countdown-timer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.