# 4.3. Countdown

The **Countdown** widget allows you to easily create a countdown timer on your landing page. This timer can count down the time remaining for events, promotions, or important deadlines, helping users feel a sense of urgency and increasing motivation to take action.

<figure><img src="/files/8k7w1AohOFBp6MdOPjWg" alt=""><figcaption></figcaption></figure>

## **1.** Add a Countdown to the landing page

* Click on **Widgets** in the sidebar of the editor.
* Select **Countdown** from the **Business** section.
* Choose the **Countdown** element and drag it onto your landing page.

<figure><img src="/files/0ge5hSwZpD1H9C5uz4V8" alt=""><figcaption></figcaption></figure>

## **2. Countdown Editor**

### 2.1. Content Editor

* To access the **Content** **Editor**, click on the **Countdown** widget you wish to modify on the screen and select **Content** from the quick settings bar.

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

* **Style:** Choose the display style for the countdown timer.
  * **Default:** This is the default display style of the countdown timer, usually a basic design with countdown elements displayed in a simple manner.
  * **Circle:** Displays the countdown timer in a circular format, with elements (days, hours, minutes, seconds) surrounded by a circle. This is an eye-catching and modern option.
  * **Inline:** Displays the countdown timer as a horizontal or vertical strip, with countdown elements arranged in rows or columns.

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

* **Type:** Choose the type of countdown timer you want to use, such as:
* **Type:** Choose the type of countdown timer you want to use, such as:
  * **Minute:** counts down a specific number of minutes from the current time.&#x20;
  * **Daily:** counts down to a specific time of day.
  * **Duration:** counts down for a specific duration.

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

* **Duration:** Enter the specific time that the timer will count down to. This can be in minutes, hours, or days, depending on the countdown type you choose
* **Loop:** Decide whether the countdown timer should restart after it ends. When this option is enabled, the countdown timer will start over from the beginning after it concludes.
* **Auto hide when timeout:** Enable this feature to automatically hide the countdown timer when the countdown ends. This can help keep your website’s interface tidy and clean after the timer finishes.
* Toggle countdown elements and edit label names.

<figure><img src="/files/4jHCjXncJDmVDVahh74T" alt=""><figcaption></figcaption></figure>

### 2.2. Design Editor

To access the **Design Editor**, click on the **Countdown** widget you wish to modify on the screen and select **Design** from the quick settings bar.

<figure><img src="/files/1RPYiRgRBM64JQpEW07b" alt=""><figcaption></figcaption></figure>

* **Align**: Allows you to align the widget within its container. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align).
* **Size**: Adjust the size of the widget, including width, height, and the margin from the widget to the section's edges. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size).
* **Display on**: Select the devices where the widget will be displayed (Desktop, Mobile).
* **Styles:** Allows you to add background and shadow to the widget. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles).
* **Border**: Add and customize borders around the widget, including adjusting the border radius. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border).
* **Items:** Allows you to set up the formatting for the group of label and number elements.
* **Label:** Allows you to customize the formatting for the time label.
* **Number:** Allows you to set up the formatting for the displayed numbers.
* **Timeout:**
* **Countdown style:** Allows you to configure the formatting for the countdown interface style.

### 2.3 Advanced Editor

To access the **Advanced Editor**, click on the **Countdown** widget you wish to modify on the screen and select **Advanced** from the quick settings bar.

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

* **Animation**: Allows you to add dynamic animations to the widget on your landing page to make it more attractive and lively. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/animation).
* **Desktop/Mobile sync design**: Allows you to set synchronization options for the design between desktop and mobile. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/desktop-mobile-sync-design).
* **Position type**: Lets you choose the appropriate positioning style to optimize the webpage and provide the best experience for users. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/position-type).
* **Custom advance**: Allows you to customize the appearance and behavior of the component using CSS layers and custom CSS code. See details [**here**](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance).


---

# 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.shopone.io/english/basic-elements/business-widgets/countdown.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.