# Countdown timer

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

Countdown timer is a great way to create urgency and boost engagement on your page. It can be used for flash sales, product launches, or upcoming events. This guide walks you through adding and customizing a countdown timer.

## How to add a countdown timer

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Promotions** > **Countdown timer** or in **Quick add**, select **Countdown** element.
3. Drag the countdown timer onto your canvas.
   {% endhint %}

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

## How to edit a countdown timer

{% hint style="success" %}
**Steps:**

1. **Select** the relevant countdown timer element in the editor.
2. Use the tools bar above the selected countdown timer element to quickly edit it.

All the formatting tools below can be found in the right-handsided **Inspector** panel.
{% endhint %}

### General settings

* **Countdown type:**

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

{% tabs %}
{% tab title="Fixed timer" %}
This timer runs down to a specific date and time that you set (perfect for promotions or limited-time sales).

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

{% tab title="Evergreen timer" %}
This is a new option that allows you to set a countdown that resets after a specific period of time. It’s great for creating urgency on a consistent basis for new visitors.

:star: **Tip**: The Evergreen timer works automatically, so it’s ideal for stores running recurring promotions or time-sensitive offers, such as flash sales or daily deals.

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

* **Content alignment:** Align the countdown timer to the left, center, or right of its container using the alignment options.
* **Hide on end**: Toggle this option ON to automatically hide the timer when it reaches the end.
* **Labels**:&#x20;
  * Toggle the **Show labels** option to display or hide the time unit labels (Days, Hours, Minutes, Seconds).
  * Customize the label text for each time unit as needed, or use the default wordings.

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

### Design settings

Besides settings for [Size](/foxify-app/foxstudio/layout-and-styling/resize-an-element.md) and [Constraints](/foxify-app/foxstudio/layout-and-styling/constraints.md), you can edit specific elements of a countdown timer.

{% hint style="info" %}
Choose what you want to customize from the dropdown menu.

* **Element container**: Adjust the overall container (Text style, Spacing, Background, Borders).
* **Timer blocks**: Style the blocks that display the countdown numbers (Text style, Size, Background, Borders).
* **Numbers**: Change the font style, color, and spacing of the numbers.
* **Labels**: Change the font style, color, and spacing of the numbers.
  {% endhint %}

<figure><img src="/files/b768wyoB3EZ8bSQqvZPr" 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/foxify-app/foxstudio/add-and-edit-elements/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.