> 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.md).

# Countdown timer

## Countdown timer

{% hint style="success" %}
This section contains the "[<mark style="color:blue;">Image</mark>](#image)" and "[<mark style="color:blue;">Countdown content</mark>](/unicorn-shopify-theme/dynamic-theme-sections/countdown-timer/countdown-content.md)" blocks.
{% endhint %}

**Image ratio**\
Choose the appropriate image aspect ratio. You can use one of the options that display well on all screen sizes: "Adapt to image", "Portrait", "Square", "Landscape", or "Circle". You can check the image ratios [<mark style="color:blue;">here</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#content).

### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

### Animations

**Hover animation**\
Adds an animation inside the image container. Choose the suggested option from the list:

* **"Use theme settings"**. Select the option if there is no need to apply animation settings for the section individually. In this case, set the animation effect for the banner image in the Theme Editor's global settings using the **"Banner image"** hover animation drop-down. Read the details on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/theme-settings/animations.md#hover-animation).
* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.

Read more about the described options on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#animations).

### Transparent header

Allows the header to overlay the section when a transparent header is used.

**Use inverted header colors**\
Enable the option to link the color of the Header elements, such as navigation menus, Search, Compare, Account, and Cart icons, with the "[<mark style="color:blue;">Background</mark>](/unicorn-shopify-theme/theme-settings/colors.md#background)" item under *Theme settings -> Colors -> Primary colors*. If the option is disabled, the color of the Header elements is related to the "[<mark style="color:blue;">Base</mark>](/unicorn-shopify-theme/theme-settings/colors.md#base)" item.

***

## Image

{% hint style="success" %}
The section provides two "Image" blocks to display media on both sides of the countdown timer.
{% endhint %}

**Image**\
Press the **"Select"** button to upload the necessary image for all devices.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="/files/DpWCKsA9UFtJZvvYUJS4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/S7BHUt2xalEwEDvLZUm8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}