Countdown timers
Novara includes countdown timers in several places. All use the <countdown-timer> web component and assets/countdown.css.
Where timers appear
| Location | How to configure |
|---|---|
| Announcement bar | Header → Announcement bar → block → Countdown deadline |
| Product page | Product section → add Countdown timer block |
| Featured collection / deal | products-deal section settings |
| Image with text overlay | Section countdown setting |
| Featured product | Section or block countdown |
| Stock countdown | _product-stock-countdown block on product page |
Date format
For announcement bar and most timers, use:
YYYY-MM-DD HH:MM:SS
Example: 2026-12-31 23:59:59
Use your store timezone. When the deadline passes, the timer hides automatically.
Announcement bar timer
- Customize → Header
- Select Announcement bar section
- Edit an Announcement block
- Fill Countdown deadline field
- Announcement text shows beside the live countdown
HTML structure (for developers):
<countdown-timer
data-endtime="2026-12-31 23:59:59"
data-format="dd:hh:mm:ss"
data-days="Days"
data-hours="Hours"
data-mins="Mins"
data-secs="Secs">
</countdown-timer>
Product page timer
- Customize → Products
- Select Main product section
- Add block → Countdown timer
- Set message text and timer style (default / highlight)
Product countdown can use metafields or section settings depending on block configuration. See Product countdown timer block.
Styling
Timer appearance is controlled by:
assets/countdown.css- CSS variables:
--countdown-text-size,--countdown-text-weight - Color scheme of the parent section
Tips
- Do not use fake urgency timers that mislead customers (Shopify Theme Store policy).
- Test on mobile — timers wrap in announcement bar on small screens.
- Clear the deadline field to hide the timer without removing the block.