> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/countdown-timer/countdown-content.md).

# Countdown content

{% hint style="success" %}
Provides additional "[<mark style="color:blue;">Button</mark>](#button)", "[<mark style="color:blue;">Countdown timer</mark>](#countdown-timer)", "[<mark style="color:blue;">Heading</mark>](#heading)", and "[<mark style="color:blue;">Text</mark>](#text)" blocks.\
**Tip:** Press **"Add block"** to use the desired block.
{% endhint %}

### Button

**Label**\
Enter the text displayed on the button.

**Link**\
Select a page or paste a URL that opens when customers click the button.

**Open in new tab**\
Enable this option to open the linked page in a new browser tab.

**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#buttons).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

***

### Countdown timer

{% hint style="success" %}
Display the counter text by activating the "Show time units" option in *Theme settings -> Countdown timer ->* [*<mark style="color:blue;">Product page and popup</mark>*](/unicorn-shopify-theme/theme-settings/countdown-timer.md#product-page-and-popup).
{% endhint %}

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

By default, the section includes the timer's expiration date 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%2F5OWyUHZ3P8aWuQlLT0H7%2Fcountdown%20timer_timer.png?alt=media&amp;token=93657300-e049-4936-a823-90eb648fe6ed" alt=""><figcaption></figcaption></figure>

#### Colors

**Background**\
Set the base color of the countdown using the picker.

**Border**\
Changes the outer border color of the countdown.

**Countdown background**\
The counter base color can be modified using the color picker.

**Countdown text**\
Colorize the text using the item.

***

### Heading <a href="#heading" id="heading"></a>

**Heading**\
Use the field to title the section. Start typing text in the field to view the additional settings:

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

**Color**\
Use the picker to change the title color. Paste the hex code into the related field or select the color using the paint palette. The color setting applies to all screen sizes.

***

### Text

**Text**\
Use the input field to add accompanying text to the section title that appears underneath the heading. Color settings will be shown after entering text.

**Color**\
Change the color using the provided picker. The color setting applies to all screen sizes.

***

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FyKzE3kcEe2vdy7drsGsB%2Fcountdown%20timer_content.png?alt=media&amp;token=2d25f258-44fc-413f-bd99-151dd301b69d" alt=""><figcaption></figcaption></figure>
