# Countdown timer

<div data-full-width="true"><figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2Fa5w6LQkUFhLWSt58jhjP%2FHelp%20Center%20banner%20%201250%20x%20200-2.png?alt=media&#x26;token=ab0daf12-b917-4435-a603-9a3f6613f853" alt=""><figcaption><p><a href="https://foxecom.com/pages/affiliate?utm_source=minimog%2Bhelp%2Bcenter&#x26;utm_medium=banner&#x26;utm_campaign=foxaffiliatelaunch2024">Explore FoxEcom Affiliate Program now </a> <span data-gb-custom-inline data-tag="emoji" data-code="2728">✨</span></p></figcaption></figure></div>

{% embed url="<https://youtu.be/RVWtidPZKS8>" %}

A countdown clock for promotion/new collection release can bring excitement to customers that have been waiting for the event.&#x20;

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FTl3nugn0VYWPv932RG69%2FScreen%20Shot%202021-10-15%20at%2022.26.53.png?alt=media\&token=40e343fe-73d2-4aca-b1e7-967ad4faa74a)

{% hint style="success" %}
Steps

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

The settings include:

### General settings

Change the container type, height and add a background image for the timer. You can display different images on desktop and mobile view.

<figure><img src="https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F4ZG3f8wTaw98Wk9XDxbD%2Fimage.png?alt=media&#x26;token=34bb33be-938f-4463-a741-40a7f4c7ed49" alt=""><figcaption></figcaption></figure>

### Content settings

Add heading and the end time of the event.

{% hint style="info" %}
**Date format**: YYYY-MM-DD HH:MM:ss.
{% endhint %}

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2FPlTcRkSJ3DQyuogwTOGj%2FScreen%20Shot%202021-10-15%20at%2022.36.30.png?alt=media\&token=a3370d4f-6534-491d-aa9d-dc57b6e9e6ee)

### Button settings

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** and adjust the **Button size.**

![](https://1997835572-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlL6sK9D7unq8F2VPPp%2Fuploads%2F5d4teKj19xErc81z8WrV%2FScreen%20Shot%202021-10-15%20at%2022.36.41.png?alt=media\&token=82345737-373b-4e4c-a7ae-5e5217caa510)