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

# Countdown Timer

The Countdown Timer block displays a live countdown to a specific date and time. It's perfect for creating urgency around sales, promotions, product launches, or limited-time offers. The timer automatically counts down in real-time and shows how much time is left until your event ends, helping encourage visitors to take action before time runs out.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2F63rJCiaSux79X6TIrVea%2Fimage.png?alt=media&amp;token=98167938-fa1f-4df9-868a-12b1f0f80bbb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**).&#x20;
3. Click **Add block** and select **Countdown Timer**.
4. Make your changes, preview live, then click **Save**.
   {% endhint %}

***

### Settings

* **End date**: The date when your countdown should end. Enter the date in YYYY-MM-DD format (for example, 2026-12-01 for December 1st, 2026).
* **End time**: The exact time when your countdown should end. Enter the time in 24-hour format as HH:MM:SS (for example, 12:00:00 for noon, or 23:59:59 for 11:59 PM).
* **Text to show when countdown ends**: The message that appears after the countdown reaches zero. This is typically something like "Event has ended!" or "Sale has ended". You can use basic formatting like bold or italic text.
* **Number size**: Choose how large the countdown numbers appear. Options range from 2XS (smallest) to 2XL (largest). Larger numbers create more visual impact and urgency.
* **Label size**: Choose how large the labels appear below the numbers (like "Days", "Hours", "Minutes", "Seconds"). Options range from S (smallest) to 2XL (largest). The label size should complement your number size.
* **Container**: When enabled, the countdown timer appears inside a styled container box. When disabled, the timer appears without a background container for a cleaner, more minimal look.
* **Color scheme**: Choose the color scheme for your countdown timer. This controls the colors of the numbers, labels, and container background to match your section's design.

***

### Tips

* Use larger number sizes for maximum impact, especially on hero banners or important promotional sections.&#x20;
* Remember to update the "Text to show when countdown ends" so visitors know what happens after the timer reaches zero.

***

### Available in

{% columns %}
{% column %}
{% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %}
[Image with text](/docs/theme-sections-by-category/media/image-with-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %}
[Multirow](/docs/theme-sections-by-category/media/multirow.md)
{% endcontent-ref %}

{% content-ref url="/pages/plfRkW5949tNZcZs5CWA" %}
[Featured product](/docs/theme-sections-by-category/product/featured-product.md)
{% endcontent-ref %}

{% content-ref url="/pages/NpvoMbyiyf6QqtM0oPwj" %}
[Announcement bar](/docs/group-sections/header-group/announcement-bar.md)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/Wmt8TDWWKKgM4L4MnFhX" %}
[Media Banner](/docs/theme-sections-by-category/banners/media-banner.md)
{% endcontent-ref %}

{% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %}
[Rich Text](/docs/theme-sections-by-category/informative/rich-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/zRB5vW3gLgrR1a3IiGaa" %}
[Popup](/docs/group-sections/overlay-group/popup.md)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}