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.
- 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
- Write the Label, Heading and Text – what ends, and why it is worth acting now.
- Enter the End date as
YYYY-MM-DDand the End time asHH:MM(24 hours). - Choose the Time zone the end time is in.
- Set the Text when finished, for example The sale has ended – thank you!
- 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.
All settings
Every setting in the order of the theme editor, with its options and its default value.
Section: Countdown24 settings
| Setting | Options | Default |
|---|---|---|
| Label | Text | Sample text |
| Heading | Rich text (one line) | Sample text |
| Heading size | Large · Medium · Small | Medium |
| Text | Rich text | – |
| End dateFormat YYYY-MM-DD | Text | Sample text |
| End timeFormat 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 | ||
| Top padding | 0–160px | 80px |
| Bottom padding | 0–160px | 80px |
| Top padding on mobile | 0–120px | 56px |
| Bottom padding on mobile | 0–120px | 56px |
| Advanced | ||
| Hide on mobile | Checkbox | Off |
| Hide on desktopMobile 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 IDLink to this section with #anchor-id. | Text | – |
Related
Announcement barA slim line of news above the header – delivery, returns, a sale – that rotates, scrolls or counts down.Featured collectionProducts from one collection – or several as tabs – in a grid or slider, with quick filters and a products-per-row switch.Image bannerA large photo or video with a heading, text and up to two buttons on top – full width or within the page.