Drop countdown

A clock counting down to the next drop. It’s a section you place wherever the announcement belongs — usually high on the homepage — in one of two layouts.

Settings

Setting	Type	Default	What it does
Layout	Select	panel	panel is a bordered block in the page; banner is a wider, louder treatment
Kicker	Text	Next drop	Small accent label above the heading
Heading	Text	Friday, 18:00	The headline. Larger in banner layout
Text	Text	Run-size copy	A line under the heading
Counts down to	Text	2026-12-25 18:00	The target date and time
When it is over	Text	The drop is live	Replaces the clock once the date passes
Result button	Text	Join the list	Optional CTA. Needs a link to render
Button link	URL	(empty)	Where the CTA goes
Colour scheme	Select	default	Flip the section onto the light or deep plane
padding_top / padding_bottom	Range	48 px	Section spacing

The date format

until is parsed by the browser, so use a format browsers agree on:

2026-12-25 18:00
2026-12-25T18:00:00
2026-12-25T18:00:00Z

Caution

A date with no timezone is interpreted in the shopper’s local time, not yours. 2026-12-25 18:00 counts to 6pm wherever they are — so a drop at 6pm London time shows a clock that’s five hours out in New York. If the moment matters, write it in UTC with a Z (2026-12-25T18:00:00Z) and the clock is correct everywhere.

An unparseable date hides the clock rather than showing NaN, and leaving until empty renders the section’s copy with no clock at all — which is a legitimate way to use it as a plain drop announcement.

The finished state

When the date passes, the units are replaced by done_text rather than left at zeros or allowed to count into negatives, and the interval stops. A countdown that ran out three weeks ago reads “The drop is live”, not 00 : 00 : 00 : 00.

Tip

That makes done_text worth writing properly. “The drop is live” with the CTA pointing at the collection turns an expired countdown into a working banner — which is what it’ll be for most of its life if you forget to update the date.

Behaviour

• Numbers are zero-padded, so the layout doesn’t jump between 9 and 10.
• Days, hours, minutes and seconds each have their own unit block.
• role="timer" with aria-live="off" — so assistive technology knows what it is without announcing every single second, which would make the page unusable.
• With no date set, no clock is rendered at all — it isn’t drawn and then hidden, so there’s no flicker on load.

Two sections, one selector

The theme used to ship this as two separate files — a drop banner and a countdown — which both rendered a clock and both bound their script to the same selector. With both on one page, each section’s handler matched the other’s element, found no date on it, and hid it; a merchant who set a deadline on the banner watched its clock vanish.

It’s one file with a layout setting now. If you want both a banner at the top of the homepage and a panel further down, add the section twice with different layouts — each gets its own independent ticker.