> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/samita-countdown-timer-bar/quick-start/how-countdowns-work.md).

# How countdowns work

The three parts every countdown is built from — content and timing, display, and design.

Every countdown in Countdown Timer Bar Samita is built from the same pieces, whichever of the four types you choose. Once these click, the rest of the docs is just detail about one of them.

## 1. What it says and when it runs — the Settings tab

The **Settings** tab holds the countdown's content and its timing.

**Content** is the text a shopper reads: a heading and subtitle on a timer, a delivery message on a delivery date, a stock message on a stock bar. Text fields can hold variables such as `{stock_number}` or `{delivered_max_date}`, which the app replaces with real values when the page loads.

**Timing** is what makes it a countdown. What this looks like depends on the type:

| Type                    | Timing is…                                                                                      |
| ----------------------- | ----------------------------------------------------------------------------------------------- |
| Countdown timer         | A **Time type**: a fixed end date, a per-visitor number of minutes, or a daily recurring window |
| Estimated delivery date | Dispatch and delivery day ranges, working days, holidays, and a cut-off time                    |
| Stock countdown         | No clock — it counts inventory, not time                                                        |
| Cart countdown          | A **Countdown duration** in minutes, starting when the shopper's cart is seen                   |

## 2. Where it appears — the Display tab

The **Display** tab decides who sees the countdown and where it lands.

**Conditions** narrow it down by product, collection, page type, customer, language, or country. Every condition in the list is joined by **All conditions** or **Any condition**, and a countdown only renders when the current page satisfies them.

**Display position** puts it on the page. Tick **Product page** and the app places the countdown automatically, just below the Add to cart area. For anywhere else — a homepage section, a collection banner, a custom template — copy the **Shortcode** and drop it in through a theme app block.

**Device targeting** can restrict it to desktop or mobile only.

See [Display overview](/samita-countdown-timer-bar/where-countdowns-appear/overview.md) for the whole picture.

## 3. How it looks — the Design tab

Countdown timers and estimated delivery dates get a **Design** tab with colors, fonts, backgrounds, borders, padding, and per-element styling. Stock and cart countdowns keep their (smaller) design options inside the Settings tab instead.

Every type ends with a **Custom CSS (Developer Zone)** box for anything the controls don't cover. See [Design a countdown](/samita-countdown-timer-bar/design-and-translation/design.md).

## Active or Draft

Independently of all of the above, each countdown has a status:

* **Active** — live on the storefront, subject to its timing and conditions.
* **Draft** — saved and editable, but never rendered.

You set this in the builder before saving, and you can flip it later from the [Countdowns list](/samita-countdown-timer-bar/countdowns/manage.md).

{% hint style="info" %}
Read as a sentence, a countdown is: "Show **this text** on **these pages**, for **this long**, styled **like this** — while it's Active and the app embed is on."
{% endhint %}

## What the storefront actually does

When a shopper loads a page, the app embed's script checks which of your active countdowns match that page, works out the remaining time in their browser, and renders the matching ones. Nothing is pre-baked into your theme, which is why changes you save in the app show up without republishing the theme.

For the full version, see [How it works](/samita-countdown-timer-bar/reference/how-it-works.md).

## Next steps

* [Countdown types](/samita-countdown-timer-bar/countdowns/overview.md)
* [Display overview](/samita-countdown-timer-bar/where-countdowns-appear/overview.md)
* [Design a countdown](/samita-countdown-timer-bar/design-and-translation/design.md)
* [How it works](/samita-countdown-timer-bar/reference/how-it-works.md)


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.samita.io/samita-countdown-timer-bar/quick-start/how-countdowns-work.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.