> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-elements/business-widgets/countdown.md).

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