# Create a Countdown Timer

The Countdown Timer is used to create customers’ eagerness for the upcoming products and increase sales to your store. In order to manage this setting, kindly follow the below instructions to know how to set it up:&#x20;

#### **Step to manage:**

From the **Countdowns** page of the app > Click on **Create countdown** > Choose **Countdown Timer**<br>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FdSY2KF16lh6oxi5x0mjF%2Fimage.png?alt=media&#x26;token=4e4e8ec8-329a-40ab-b1c2-918e8f683377" alt=""><figcaption></figcaption></figure>

There are 3 steps to set up a Countdown timer: **Settings, Design,** and **Display**. The Settings page is showing first when accessing the Countdown timer:

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FybyJJIYjyKX4zVOXiTRl%2Fimage.png?alt=media&#x26;token=92ae5e41-3d69-4937-9362-254661c78b6e" alt=""><figcaption></figcaption></figure>

### Setting content:

**You can edit and configure the content of the timer in this step.**&#x20;

1. In the **Content** section, click on the **Template** and choose the one you like:

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fiob53kJfbXlYjXAagtAt%2Fimage.png?alt=media&#x26;token=9602bf67-c5a5-4c18-8e40-76e371e6aa96" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FIFCbiomkSc3nW561kiVg%2Fimage.png?alt=media&#x26;token=0c9d75ae-7b06-4a33-8498-4b647f4671d1" alt=""><figcaption></figcaption></figure>

&#x20;     2\. Set up **Title**, **Subtitle** and **Date format** for the Timer:&#x20;

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FMjSQy5kurtsxXngASnij%2Fimage.png?alt=media&#x26;token=fe0e26bd-3b30-4a5b-90b5-74978effc17c" alt=""><figcaption></figcaption></figure>

&#x20;    3\. **Show button** (Optional): This setting helps you redirect the customers to the page where the sale presents to purchase stuff easily.&#x20;

To use this feature, please turn on the slide **“Buy now, add to cart” button**, there will be a **Text** field for you to add content and a **Link** field so you can add the page URL you want the customers to be redirected to:<br>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FqVJ93aFmbm0P1nxiwlZ0%2Fimage.png?alt=media&#x26;token=2abdadc7-7803-42b5-9062-5c9e822665f4" alt=""><figcaption></figcaption></figure>

### Setting Timer:

There are 3 timer types in this section. Depending on your choice, you can decide to apply the kind of time to the Countdown timer. For further understanding and explanation for each time type, please review this [**guide**](#configure-the-setting-timer).&#x20;

### **Design the Countdown timer**

**Step to manage:**

1. Click on the **Design icon**
2. You can choose to set up the template color or use the upload image setting:&#x20;

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FSr21eAv2utM9hM94D5DR%2Fimage.png?alt=media&#x26;token=f4cc1371-aa04-4230-8ab8-91d805e355c0" alt=""><figcaption></figcaption></figure>

&#x20;     3\. Set up the color for the Countdown timer <br>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FATqZuLGGX4VjdXJMLOvJ%2Fimage.png?alt=media&#x26;token=63f82a4d-956e-444b-90da-b105a7db55c4" alt=""><figcaption></figcaption></figure>

&#x20;     4\. Design font text and border size for the **Title**, **Subtitle**, **Padding** and **Button** (Show button setting that is mentioned above)

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FLlMOAdHIrBdr9q7k7Mia%2Fimage.png?alt=media&#x26;token=9721ad11-7300-4c38-b6aa-6035417ef81d" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fh76OqnYUz3fQaHRDTXgG%2Fimage.png?alt=media&#x26;token=860d9603-a9ee-4052-bb85-4f30aba0e6d2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FFDj4cFJq9xMCaGoHZpJd%2Fimage.png?alt=media&#x26;token=e8132ca0-a6bc-4c66-a833-81c0cfbfcbdf" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2F29sboSR9Sz5H4sZr3BaC%2Fimage.png?alt=media&#x26;token=749c0ac4-3d3f-4691-a742-a157ab657bfc" alt=""><figcaption></figcaption></figure>

&#x20;     5\. Click on the small arrow to design the **Timer section**, Countdown timer size **on Mobile**&#x20;

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2F0fp7KjKSIfwtbQ6taSfT%2Fimage.png?alt=media&#x26;token=e9b1a61c-78ee-4e56-8ad0-6cb7a7110462" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2F2UygMwwbu8STtg4AJpti%2Fimage.png?alt=media&#x26;token=0853e631-5f5c-4f1f-b7e0-37987ee30240" alt=""><figcaption></figcaption></figure>

&#x20;     6\. For further customization, you can use the **Custom CSS** box below to add CSS for the Countdown timer design:&#x20;

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2Fp0FakZI5WKf7NmmOkhsc%2Fimage.png?alt=media&#x26;token=2ae7801f-9db3-418b-ad7f-bebec079c1ca" alt=""><figcaption></figcaption></figure>

### Setting Display condition for the Countdown timer:

1. Configure the condition for the Countdown timer&#x20;
2. Set up display position: Show the timer on the **product page** or display it in other places by the **Shortcode**
3. Set device targeting to choose the device you want to show the Countdown timer on: **Desktop** or M**obile**.

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FQmQ0dOBlv8XDLEPzGcRI%2Fimage.png?alt=media&#x26;token=161430f9-ed29-4af5-81b2-9e459fabbe30" alt=""><figcaption></figcaption></figure>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FkB8EVJ9iaHJXX31RdvFi%2Fimage.png?alt=media&#x26;token=216c75a1-66ca-4d11-9593-17857e79e10a" alt=""><figcaption></figcaption></figure>

For further information about this step, please review this [**guide**](https://help.samita.io/docs/samita-countdown-timer-bar/setup-display-conditions-and-display-position-for-the-timer/) for better understanding.&#x20;

After finishing all steps to create the Countdown, click **Save** and start checking on the front store

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FAmy1GVvTfOjlFX4p9Mp2%2Fimage.png?alt=media&#x26;token=e84cb851-dfe4-47a5-9d4e-e4993059dbd1" alt=""><figcaption></figcaption></figure>

**Important step!**

In order to enable the app data to your front store, please don’t forget to [activate our app embed](https://docs.samita.io/samita-countdown-timer-bar/general-1/theme-integration) to your theme.<br>

<figure><img src="https://855148666-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FaOJwtwIUCsbYLCDqZD0u%2Fuploads%2FvnY0a8x0JUIHGgjBCxUN%2Fimage.png?alt=media&#x26;token=1e6ef3cc-e2aa-405e-ae00-caa598449b38" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Friendly reminder!**\
If you do encounter any difficulty while proceeding with these steps, don’t show any hesitation to contact us promptly via the email address [<mark style="color:green;">support@samita.io</mark>](https://samita.io/pages/contact)
{% endhint %}
