# Countdown timer

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(28)_vohs2RCg.jpg)

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 type="success">

Steps

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

</Hint>

## How to edit a Countdown timer section

![image](https://docs-assets.foxecom.app/zest-theme/image_CZYExbTB.png)

### Section settings

<Expandable title="Settings">

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Countdown position** | Align the countdown: `Left`, `Center`, or `Right`. |
| **Text alignment** | Align the heading and text content. |
| **Background image** | Upload a custom background or choose from free images. |
| **Image overlay opacity** | Add a dark overlay to improve text contrast. Adjust from `0%` (no overlay) to `100%` (fully opaque). |

</Table>

![image](https://docs-assets.foxecom.app/zest-theme/image_vVmeeCYY.png)

</Expandable>

<Expandable title="Background video">

<Table widths="240,auto">

| Setting | Description |
| --- | --- |
| **Show background video** | Enable to display a video behind the content. |
| **Video type** | Choose from `Shopify-hosted` or external (YouTube/Vimeo). |
| **Shopify-hosted video** | Upload a video file directly via Shopify Files. |
| **External video URL** | Paste a link to a YouTube or Vimeo video. |

</Table>

</Expandable>

### 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 type="info">

The **Evergreen** setting is only available in Zest **version 9.0.0 and above**. ✨

See [Changelog](https://docs.foxecom.com/zest-theme/changelog).

</Hint>

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

![image](https://docs-assets.foxecom.app/zest-theme/image_hGPLKjJJ.png)

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

<Tabs>
<Tab title="Minimal">

![image](https://docs-assets.foxecom.app/zest-theme/image_xqaWa8fU.png)

</Tab>

<Tab title="Highlight">

![image](https://docs-assets.foxecom.app/zest-theme/image_TFsKMOFu.png)

</Tab>
</Tabs>

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

* Small
* Medium
* Large

<Hint type="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;

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_b06cFhsi.png)

<Hint type="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.

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_0xUztzQ7.png)

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

</Tab>

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

![image](https://docs-assets.foxecom.app/zest-theme/image_syUkKBEZ.png)

<Hint type="info">

Style the heading in Theme settings > [Typography](https://docs.foxecom.com/zest-theme/theme-settings/typography)

</Hint>

</Tab>

<Tab title="Subheading">

Add a subheading to the section.

![image](https://docs-assets.foxecom.app/zest-theme/image_V4WmXWlA.png)

<Hint type="info">

Style the subheading in Theme settings > [Typography](https://docs.foxecom.com/zest-theme/theme-settings/typography)

</Hint>

</Tab>

<Tab title="Text">

Add a description to the section.&#x20;

![image](https://docs-assets.foxecom.app/zest-theme/image_wJbh2g24.png)

<Hint type="info">

Style the text in Theme settings > [Typography](https://docs.foxecom.com/zest-theme/theme-settings/typography)

</Hint>

</Tab>

<Tab title="Button">

You can also display a call-to-action button to redirect customers to your desired pages.

![image](https://docs-assets.foxecom.app/zest-theme/image_bjyfVne8.png)

</Tab>
</Tabs>