# Countdown timer

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(14)_Zi6CXMJX.jpg)

A countdown clock for promotion/new collection release can bring excitement to customers that have been waiting for the event.

## 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. Locate **Countdown timer.**
3. Make necessary changes.
4. **Save.**

</Hint>

## How to edit a Countdown timer section

### Section settings

#### General settings

Pick a **Background image** for the timer and set the opacity for it in the **Image overlay opacity** range.

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

#### Content settings

Change the **Content alignment** (Left/Center/Right) and then align the text inside - **Text alignment** (Left/Center/Right).

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

### Block settings

You can choose to add more elements to the Countdown timer section:

<Expandable title="Heading">

Give the section a **Heading** and adjust the **Heading size**.

![](https://docs-assets.foxecom.app/hyper-theme/image_MtBXKyz9.png)

</Expandable>

<Expandable title="Subheading">

Give the section a **Subheading.**

![](https://docs-assets.foxecom.app/hyper-theme/image_oLnZEFN9.png)

</Expandable>

<Expandable title="Description">

Give the section a **Description** and adjust its size.

![](https://docs-assets.foxecom.app/hyper-theme/image_IkkNeJqc.png)

</Expandable>

<Expandable title="Countdown timer">

Choose between two countdown types: Evergreen or Fixed time.

* Evergreen: This timer repeats after a set duration.
  * Ideal for:
    * Ongoing promotions (e.g., flash sales every month).
    * Seasonal offers that repeat periodically.
* Fixed time: Counts down to a specific date and time.
  * Ideal for:
    * Product launches.
    * Limited-time promotions (e.g., holiday sales).
  * **Settings:**

    * **Ends time:** Set the exact date and time in the format `YYYY/MM/DD HH:MM` or `YYYY/MM/DD HH:MM AM/PM.`

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

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

</Expandable>

<Expandable title="Button">

Add a Button to link customers to your desired page.

![](https://docs-assets.foxecom.app/hyper-theme/image_C9coNhUY.png)

</Expandable>

<Expandable title="Image">

You can add multiple **Image** blocks in the Countdown timer section on both desktop and mobile screens to attract customers' attention.

Adjust the **Desktop Image width** between 150px and 350px.

Especially, you are able to change the **Desktop vertical position** and **Desktop horizontal position** for the Image blocks.

⚠️ On mobile view, images will be vertically stacked by default.&#x20;

![](https://docs-assets.foxecom.app/hyper-theme/image_qRXjVvu2.png)

</Expandable>

<Hint type="info">

Add the following predefined **custom classes** for the image's floating effects:

* media-mover
* media-mover-slower
* media-mover-reverse

</Hint>

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