# Countdown

> A live timer counting down to the end of a sale or a product launch, with a heading, text and a button. When time is up, the timer gives way to your own message.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/countdown/

## At a glance

- **In the editor:** Countdown
- **Where it goes:** Any page template, with Add section
- **In the presets:** Not on any page by default – add it where you need it
- **Settings:** 24
- **App blocks:** Yes

## Set it up

1. Write the **Label**, **Heading** and **Text** – what ends, and why it is worth acting now.
2. Enter the **End date** as `YYYY-MM-DD` and the **End time** as `HH:MM` (24 hours).
3. Choose the **Time zone** the end time is in.
4. Set the **Text when finished**, for example *The sale has ended – thank you!*
5. Add a **Button** to the offer.

## Look

**Timer style:** *Text and timer side by side*, large *Tiles* for each unit, or *Plain* numbers. Rename the units with **Days label**, **Hours label**, **Minutes label** and **Seconds label** – useful for other languages or for short forms like *d*, *h*, *m*, *s*. The default color scheme is the strong band (scheme 3), so the countdown stands out.

> **Note:** The timer does not end the sale
>
> The countdown is a display only. End the sale itself in **Discounts**, or change your prices, at the same moment. For a small countdown on every page, use a message in the [Announcement bar](https://themelab.page/tally/docs/sections/announcement-bar.md#rotate).

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Countdown** (24 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Label** | Text | Sample text |
| **Heading** | Rich text (one line) | Sample text |
| **Heading size** | Large · Medium · Small | Medium |
| **Text** | Rich text | – |
| **End date** – Format YYYY-MM-DD | Text | Sample text |
| **End time** – Format HH:MM, 24 hours | Text | Sample text |
| **Time zone** | UTC-8 Pacific · UTC-5 Eastern · UTC · UTC+1 Central Europe · UTC+2 Central Europe summer | UTC+1 Central Europe |
| **Days label** | Text | Sample text |
| **Hours label** | Text | Sample text |
| **Minutes label** | Text | Sample text |
| **Seconds label** | Text | Sample text |
| **Text when finished** | Text | Sample text |
| **Button label** | Text | Sample text |
| **Button link** | Link | – |
| **Timer style** | Text and timer side by side · Tiles · Plain | Text and timer side by side |
| **Color scheme** | Color scheme | Scheme 3 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Announcement bar](https://themelab.page/tally/docs/sections/announcement-bar.md): A slim line of news above the header – delivery, returns, a sale – that rotates, scrolls or counts down.
- [Featured collection](https://themelab.page/tally/docs/sections/featured-collection.md): Products from one collection – or several as tabs – in a grid or carousel, with quick filters and a products-per-row switch.
- [Image banner](https://themelab.page/tally/docs/sections/image-banner.md): A large photo or video with a heading, text and up to two buttons on top – full width or within the page.