---
description: >-
  Add the section to promote sales using the Countdown timer combined with the
  descriptive strings and link redirection to the preferred collection.
  Diversify your content with related images.
---

# Countdown timer

Use the **"Heading"** placeholder to add a section title. It will be centered and placed on the top of the timer by default.

The font size of the title can be changed to "Small", "Medium", or "Large" in the **"Heading font size"** drop-down.

If you need to set up the color of the title, use the **"Heading color"** picker. Here you can paste the hex code to the related field or choose the color using the paint pallet. The color settings will be used for both desktop and mobile.

Use the **"Description"** input field to add some descriptive text strings to the section that will appear under the heading.

The color of the description and icon can be set in the **"Description color"** picker. The color you apply for the item will be used for a desktop and mobile.

Use the settings described below to add or edit the button that will appear under the countdown itself:

Change the internal button text in the **"Label"** field. Leave the field blank to hide the button.

To redirect customers to the desired page, edit the **"Link"**. Use the link from the source selector, or paste the one if you use an external link.

Use the **"Style"** drop-down to change the button's appearance in the sections. The theme includes three styles that can work out in your store: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style the colorized text and border inside the button will be added. If you used the "Link style", the color will be applied to the text link.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfwAGeELJAjFplVLqUeo3%2Fcountdown%20timer_heading.png?alt=media&#x26;token=b0a7e409-fb22-4359-99ce-4f77ac7325ec" alt=""><figcaption></figcaption></figure>

### Content

The expiration date and time of the Time countdown can be specified in the **"End date and time"** field. &#x20;

By default, the section contains the expiration date for the timer to simplify setup. Replace the default settings with yours using the format dd/mm/yyyy hh:mm:ss. Example: 30/05/2024 23:00:00.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fc7CoR8UyDh0N3BXnjQgz%2Fcountdown%20timer_timer.png?alt=media&#x26;token=eba6f2b7-a24e-40fd-b9ac-94ca9c8873c8" alt=""><figcaption></figcaption></figure>

**First image/Second image**

Place the images on both sides of the Countdown timer using the **"First image"** and **"Second image"** pickers. Press **"Select image"** to upload the necessary images both for desktop and mobile.

On the desktop view, the content specified in the "First image" selector will be displayed on the left by default. The "Second image" is set to showcase on the right. Images will be displayed as two items in a row above the timer on mobile.

Choose the appropriate aspect ratio of the images in the **"Image ratio"**. You can use one of the options that display well on both desktop and mobile views: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". Each image ratio, you can check [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#content).

### Layout

To add a divider between sections, use the **"Dividing line"** to set the position: "Top", "Bottom", or "Both". The dividing line will be hidden once you use the option "None".

On the **"Top spacing"** and **"Bottom spacing"** scales, decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.



Here is the example view of the section on a desktop and mobile:

{% tabs %}
{% tab title="Desktop" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeyCrwBM8Hziul5Qf8usI%2Fcountdown%20timer_desktop.png?alt=media&#x26;token=cdf59444-fbdd-46d6-9878-78fa2aac1430" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}
<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FuwlTnPHAuR1tvbNFbUVA%2Fcountdown%20timer_mobile.png?alt=media&#x26;token=7b9f8244-3300-4606-bbac-0450e1ec5773" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
