# 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FmKTVK9CghQmsJQjRM32K%2Fimage.png?alt=media&#x26;token=b412c9f8-5832-432f-8f66-14e5f342099b" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FMxf56S6VnF1RlVAwKg2k%2Fimage.png?alt=media&#x26;token=e5fa3cc0-ba45-42cc-b009-ea92f75ce964" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F5sEYwG5LOeZSnIsmSupW%2Fimage.png?alt=media&#x26;token=4544d75c-294b-4e43-aa6d-45404691af96" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FbZClpNjFWyGt3PP5LT2C%2Fimage.png?alt=media&#x26;token=df90f5ec-8a82-45d9-8df4-e0ba82065eeb" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHVuqSaRftOvWnMrMKotw%2Fimage.png?alt=media&#x26;token=6711907c-c612-4e6b-9515-9dac092cf4a6" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2FHKMgDmTPy9lCmCMhFZNG%2Fimage.png?alt=media&#x26;token=2d38bb35-3b07-43d6-8048-0dc028e9caae" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2F4hP28bDxhMYWNIcCC4IU%2Fimage.png?alt=media&#x26;token=cecad1a3-a667-42a4-901c-e2dea9b9222a" 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="https://4288789091-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcZrhJDsqJxZMsvuaSaiJ%2Fuploads%2Fxz2J2psFR9lkEfFovX8y%2Fimage.png?alt=media&#x26;token=1f8bc7d0-1d9a-428e-a957-69d0651201a9" 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).