Drop countdown

A kicker, a heading, a line of copy, a button — and a live clock counting days, hours, minutes and seconds to a date you set. When the date passes the clock is replaced by a message of your choosing rather than sitting at zero or counting into negatives.

This is the section a drop store is built around. The demo homepage uses it twice: once as a banner announcing the next release, once as a panel further down.

Settings

Setting	Type	Default	What it does
Layout	Select — Panel / Banner	panel	Panel is a bordered block on the page measure. Banner runs edge to edge on the deeper coal ground, with a larger heading and the digits in their own bordered plates.
Kicker	Text	Next drop	Accent label above the heading.
Heading	Text	Friday, 18:00	The heading.
Text	Text	Four hundred units. Nothing is restocked, so the list gets thirty minutes' head start.	Supporting copy, capped at a 48-character measure.
Counts down to	Text	2026-12-25 18:00	The target, written YYYY-MM-DD HH:MM. Leave it empty for a heading with no clock — useful if you want the band but not the ticking.
When it is over	Text	The drop is live	What replaces the clock once the date has passed.
Result button	Text	Join the list	Button text.
Button link	URL	—	Where the button goes. Both label and link must be set for the button to render.
Colour scheme	Select — Default / Light / Deep	default	Which ground the section sits on. The banner layout paints its own deeper ground, so this setting has little effect there.
Top spacing	Range, 0–160 px	48	Top spacing.
Bottom spacing	Range, 0–160 px	48	Bottom spacing.

No blocks.

Presets

Preset	What it is good for
Drop countdown	The panel layout. A bordered block that sits inside the page measure — use it mid-page, where it reads as one more module rather than an interruption.
Drop banner	The banner layout. Full width on the deeper ground with a larger heading and plated digits — use it high on the homepage, right under the hero, when the date is the headline.

Behaviour worth knowing

No date, no clock. If until is empty, the clock markup is not rendered at all — it is never drawn, rather than drawn and then hidden, so there is no flicker. You get a clean announcement band with a kicker, heading, copy and button.

When it expires. The moment the target passes, the four units are hidden, the When it is over text appears in the accent colour, and the timer stops. Nothing counts backwards and nothing sits at 00.

An unreadable date hides the clock. If the value cannot be parsed as a date, the clock block hides itself rather than showing dashes. Stick to YYYY-MM-DD HH:MM — for example 2026-12-25 18:00.

Digits are two-digit padded and set in tabular figures, so the numbers do not jiggle as they tick.

Screen readers are not spammed. The clock is marked as a timer with live announcements switched off, so a screen-reader user is not told the seconds every second.

You can put more than one on a page. The demo homepage does. Each clock runs its own ticker against its own date.

Caution

The date has no timezone marker, so each shopper’s browser reads 18:00 as 18:00 where they are. For a global drop that means the clock hits zero at different moments in different countries. If everyone must count to the same instant, say the timezone in the heading or the copy — “Friday 18:00 GMT” — so the number on screen is read in context.

Caution

Theme Store guidance: countdowns are for genuine, dated deadlines. A clock that resets to “23 hours left” every midnight is manufactured urgency and reviewers flag it. On a drop store you have a real date — use it.

Tip

Point the button at your list sign-up, not at the collection. Before the drop there is nothing to buy; the only conversion available is an email address, and “the list gets thirty minutes’ head start” is the reason to give one. Swap the link to the collection on drop day.