Appearance
Countdown Timer
A countdown clock that ticks down to a specific date and time. Use it for product launches, flash sales, or event registrations.
What it looks like
Here's the countdown timer section alongside its settings in the theme editor. The left panel shows the settings you'll see in Customize, and the right shows the result on your storefront.
Storefront preview
Settings
| Setting | What it does |
|---|---|
| Color scheme | Picks which set of colors to use for this section |
| Heading | The text above the countdown clock |
Block Settings
Countdown scheduling and display are configured via the Countdown block. Add the Countdown block to access all timing and expiry options.
| Setting | What it does |
|---|---|
| Start year | Optional year the timer becomes visible from (2026–2040). Pick Always show to show the timer immediately. When a year is picked, month/day/time selects appear below. |
| Start month | Month the timer becomes visible from (January–December). Only shown when Start year is picked. |
| Start day | Day of the month the timer becomes visible from (1–31). Only shown when Start year is picked. |
| Start time | Time of day the timer starts (24-hour HH:MM dropdown, 30-min increments). Defaults 00:00. Only shown when Start year is picked. |
| End year | The target year the timer counts down to. Pick Always show if you want the timer to keep running indefinitely (rarely useful for countdowns). |
| End month | The target month (January–December). Only shown when End year is picked. |
| End day | The target day of the month (1–31). Only shown when End year is picked. |
| End time | The target time of day in 24-hour HH:MM (30-min dropdown). Defaults 23:30. Only shown when End year is picked. |
| Display variant | How the timer digits are presented (full, compact, etc.) |
| Show seconds | Shows or hides the seconds counter |
| After expiry | What happens when the countdown reaches zero — hide the timer, show an expired message, or redirect to a URL |
| Expired message | Text to show after the countdown ends (if After expiry is set to show message) |
| Redirect URL | Page to redirect to when countdown expires (if After expiry is set to redirect) |
| Color scheme | Color scheme for the countdown block |
The section must contain a Countdown block for any scheduling to take effect.
Scheduling (Phase 06.17-B v2)
Date and time are split into four select dropdowns each side: Year, Month, Day, Time. The year is the gate — picking it reveals the month/day/time selects below. Picking Always show in the year dropdown means "no schedule on this side" (the timer is visible immediately on the start side; the timer never expires on the end side — usually you want a real end year and date).
Year/month/day/time are select dropdowns rather than text inputs, so the schedule is "tap, tap, tap, tap" with no typing required and no possible typos. Time is a 24-hour HH:MM dropdown with 48 half-hour increments.
Invalid date combinations like February 30 or April 31 fall through to a defensive default; if you save Feb 30 by accident, reload the editor, pick a real day, and save again.
If your store previously used the single-field Start at / End at text inputs OR the v1 Start date / Start time text-input pair, those values still resolve correctly: Liquid walks a three-tier ladder — legacy *_at first, then v1 *_date + *_time, then v2 *_year + *_month + *_day + *_time. The legacy and v1 fields are hidden from the editor; removal is planned for a Phase 7+ cleanup.
Tips
- Always set a realistic end date. A countdown that resets every day trains visitors to ignore the urgency.
- Use the "After expiry" setting to automatically hide the section when the sale ends, so you don't accidentally leave an expired countdown on your homepage.