# Countdown Timer

Display a live clock counting down to a specified date and time. You can configure the target date  and customize the heading text, number format (days, hours, minutes, seconds), and styling. When installed, it looks like this on your product page.

<figure><img src="/files/dbK5wiiTu1SARxtDCp6y" alt=""><figcaption></figcaption></figure>

## **Key Features**

* Flexible Target Date: Pick any end date/time (e.g. sale close, product launch) right in the theme editor.
* Customizable Labels & Messages: Edit the heading text, choose which time units to show and set a post-expiry message or action.
* Full Styling Control: Change the fonts, sizes, colors, spacing, and layout in Shopify’s theme editor controls

## Benefits

* Creates Urgency & FOMO: A ticking clock taps into your customer's fear of missing out, nudging them toward an immediate purchase rather than “think it over.”
* Boosts Engagement & Conversions: Using countdown timers can see conversion uplifts of 9–40% as customers respond to time-bound offers more readily.
* Highlights Limited-Time Promotions: Visually emphasizes flash sales, seasonal discounts, or one-day offers, making them stand out on a crowded product page.

## How To Use?

1. After installing the **Countdown Timer** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab.
2. Choose the **Countdown Timer** block

<figure><img src="/files/BB5Envi33LPnvWA8qF7W" alt=""><figcaption></figcaption></figure>

3. Copy the block ID. For example: **smi-block-countdown-timer-1**

<figure><img src="/files/cLGrne1D3L4k7oxdt0tL" alt=""><figcaption></figcaption></figure>

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

<figure><img src="/files/yuTygK6xuINfMRb8rLo8" alt=""><figcaption></figcaption></figure>

5. On the **Smind Block**, insert the block ID of countdown timer which is **smi-block-countdown-timer-1** to the Section ID and change the block name if you want.

<figure><img src="/files/HnR9q8i9GT2uhMTgKATG" alt=""><figcaption></figcaption></figure>

6. Next, you can rearrange the relevant blocks within the product detail sections

<figure><img src="/files/O9jlOeCGi0EH6I7Ky87F" alt=""><figcaption></figcaption></figure>

7. Finally, let's start to customize the **Countdown Timer** block

<figure><img src="/files/GO3ANRfL9Wn2cXi5H1fk" alt=""><figcaption></figcaption></figure>

* Block ID: The unique ID of countdown timer block
* Content Max Width: Set the maximum width of the timer’s content area can stretch to.
* Heading: The rich text field for your main message.
* Heading Size: The font-size presets for your heading.
* Subtext: Optional secondary text below the heading
* Subtext size: Font-size presets for the subtext area.
* End date: The target date (and optional time) when your countdown hits zero. Format: `YYYY-MM-DD` or `YYYY-MM-DD HH:MM`
* Time zone: Which time-zone the end date uses
* Number size: Font-size presets for the numeric digits of days/hours/mins/secs.
* Countdown style: Pick from preset visual layouts (Classic, Border, Solid)
* Hide countdown when time expires: If **on**, the entire block will disappear once the end date passes. If **off**, the date will leave zeros on display.
* Thickness (px): Border width around the block.
* Opacity (%): How transparent the border is (0% = invisible, 100% = fully solid)
* Corner radius (px): Rounds the block’s corners (Higher values = more pill-shaped edges)
* Shadow blur: Choose a drop-shadow preset.
* Opacity (%): Controls how dark or faint that shadow appears.
* Color Scheme: Applies a color scheme of background, text, and accent colors.
* Top margin (px): Space above the block.
* Bottom margin (px): Space below the block.
* Block padding (px): Internal space between the block’s border and its content.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.smind.io/in-app/library/product-blocks/countdown-timer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.