> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/countdown-timer.md).

# Countdown timer

<figure><img src="/files/vohs2RCgaIkwC2alT1Dv" 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="/files/CZYExbTBc7lCa63CRbIg" 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="/files/vVmeeCYYmTfY64rIREn1" 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="/files/hGPLKjJJcSYRVcpbFWUD" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/xqaWa8fUgZyv8rwKFrpO" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Highlight" %}

<figure><img src="/files/TFsKMOFuBUUhukTv3axC" 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="/files/b06cFhsizDMpxUlINGYJ" 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="/files/0xUztzQ7AjPBYZGmu60x" 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;

[General settings](/zest-theme/pages-global-sections/general-settings.md#highlight-text)

<figure><img src="/files/syUkKBEZXNHVVKrUAbaw" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the heading in Theme settings > [Typography](/zest-theme/theme-settings/typography.md)
{% endhint %}
{% endtab %}

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

<figure><img src="/files/V4WmXWlAuHPAhMNkRMPI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the subheading in Theme settings > [Typography](/zest-theme/theme-settings/typography.md)
{% endhint %}
{% endtab %}

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

<figure><img src="/files/wJbh2g242Tdu7PMbpMV8" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Style the text in Theme settings > [Typography](/zest-theme/theme-settings/typography.md)
{% endhint %}
{% endtab %}

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

<figure><img src="/files/bjyfVne8vgW9It0SSFMF" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}