# Countdown timer

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

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

{% hint style="success" %}
Steps

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

## How to edit a Countdown timer

### Section settings

#### General

Adjust the **Container** (Fixed width/Small) and **Color scheme** for this section.

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

Moreover, you can also pick a **Background image** for the timer and set the opacity for it in the **Image overlay opacity** range.

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

#### Content settings

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

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

#### **Section padding**

You can modify the spacing above and below the section by adjusting the slider to change the values of the **Top padding** and **Bottom padding**.

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

#### Section divider

This divider line provides a clear boundary between the current section and the above.

To activate the divider line, enable the :white\_check\_mark: **Show divider** checkbox.&#x20;

You can choose a suitable **Divider width** for it (Fixed width/ Full width).

<figure><img src="/files/9EmLUupMc7qZYSYBt2KU" alt=""><figcaption></figcaption></figure>

### Block settings

You can choose to add more elements to the Countdown timer section by selecting **(+) Add block**.

<figure><img src="/files/2rhtd3vPa3p55Gt0yWoc" alt=""><figcaption></figcaption></figure>

#### Heading

Add the **Heading** of the event to attract customers' attention.

* Leave it blank if you do not want to display it.

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl&#x20;
* Display md&#x20;
* Display lg
* Display xl&#x20;

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

#### Subheading

Add the **Subheading** of the event.

* Leave it blank if you do not want to display it.

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

#### Description

Add the **Description** to describe the event.

* Leave it blank if you do not want to display it.

<figure><img src="/files/9T6hFR8AXuBrNmkuuHVu" alt=""><figcaption></figcaption></figure>

#### Button

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

Add a **Label** and **Link** for one or both, then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

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

#### Countdown timer

Add a countdown timer and adjust the end time of the event.

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="warning" %}
The Evergreen setting is only available in Sleek **version 1.8.0 and above**. ✨

See [Changelog](/sleek-theme/changelog.md).
{% 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/nuJN8IB20AHZksJAM3kQ" alt=""><figcaption></figcaption></figure>

You can also choose a **Style** for the timer and change the **Number size** to Small/ Medium/ Large.

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

{% tabs %}
{% tab title="Only number" %}

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

{% tab title="Number with text" %}

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

{% 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.
{% endhint %}

<figure><img src="/files/FLByuynrxXyiChHiAkmp" 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/xUZsYBIY3nTMxXejsMHY" 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 |

#### 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.

<figure><img src="/files/9OgmE2wgJBotrwKFOTUp" alt=""><figcaption></figcaption></figure>


---

# 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/sleek-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.