> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/decorative/countdown.md).

# Countdown

The **Countdown** block shows a timer running down to a date you set, so shoppers can see how long is left rather than reading that a sale ends "soon". It is added inside a section, usually next to the offer it belongs to, which is what makes it work on a sale banner, a launch page, or a shipping cutoff notice. Once the date passes, the timer is replaced by a message you write, so the block does not leave zeros on the page.

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

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section holding the offer.
3. Click **Add block** and choose **Countdown**.
4. Enter the **End time** in `MM-DD-YYYY` format.
5. Write the **Expired message** shown after that date.
   {% endhint %}

*Result:* the timer starts running in the preview and counts down to the date you entered.

### General settings <a href="#general-settings" id="general-settings"></a>

| Setting              | Description                                                                                                                                                                  |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **End time**         | The date the timer runs to, written as **MM-DD-YYYY**. When it arrives the timer stops and the expired message takes its place, so set it to the date the offer really ends. |
| **Expired message**  | The wording shoppers see once that date has passed, in place of the timer. Without it the block leaves an ended offer looking unfinished.                                    |
| **Design**           | <p>How the timer is drawn:</p><ul><li>Default</li><li>Modern.</li></ul>                                                                                                      |
| **Mobile alignment** | <p>Where the timer sits across the screen on a phone, which matters because the digits take most of the width</p><ul><li>Left</li><li>Center</li><li>Right</li></ul>         |
| **Color**            | The color of the digits and their labels, opacity included. Set it against the background behind the timer, not against the rest of the page.                                |

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                                              |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the timer so it separates from the offer wording rather than merging with it. Accepts 0px to 100px.                     |
| **Bottom** | Leaves space between the timer and whatever follows, often the button the timer is meant to push shoppers towards. Accepts 0px to 100px. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see the exact time left on the offer, which turns a vague deadline into a reason to decide now.
* After the end date the timer disappears and your expired wording is shown in its place, so no one meets a dead counter.
* The block only displays time. It does not switch prices or close the offer, so the discount itself still has to be ended in your Shopify admin.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Decorative](/velare/customize-your-pages/decorative.md): the other blocks in this group
* [Highlight text](/velare/customize-your-pages/basic/highlight-text.md): a short label such as a promotion tag to sit alongside the timer
* [Button](/velare/customize-your-pages/basic/button.md): the action the countdown is pressing shoppers towards


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/decorative/countdown.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.