Countdown banner

Countdown banner is a starting layout for the flexible Section. It places a Countdown timer beside a heading and a call to action, all on a rounded image panel. Use it for a launch, a delivery cut-off, or a sale that ends on a set date. For how presets and blocks fit together, see Sections, blocks, and groups.

Add it

In the theme editor, open the page where you want the countdown.
Click Add section.
Under Layout, choose Countdown banner.

It arrives as a Section holding one Parallax pane. Inside the pane sit two things side by side:

A Group with an Eyebrow, an Accent text heading, a Separator, and a Pop-up button. The button opens a dialog with an Email signup form, so shoppers can be told when the date arrives.
The Countdown timer block.

On phones the two stack. Swap, add, or remove any block inside the pane.

Set the background

The background image, overlay, and rounded corners live on the Parallax pane inside the section, not on the section itself. Select the Parallax pane in the block list to set its Background image, Overlay, and Corner radius. Those are the standard container controls covered in Common section settings.

Countdown timer block

Select the Countdown timer block to set the target and how it counts.

Date and time

Date: the day the timer counts down to. Format is YYYY-MM-DD.
Time: the time of day on that date, in 24-hour HH:MM format. The timer uses your store timezone.
Show days: show a days unit alongside hours, minutes, and seconds. Turn it off for a countdown shorter than a day.
Show separator: show a colon between each unit.

Appearance

Alignment: where the timer sits in its space. Left, Center, or Right.
Size: scales the timer from 50% to 150% of its default size.
Show illustration: shows the timer's Illustration child as a backdrop. Open that child block to choose the illustration, size, and color.

When the timer expires

Hide when expired: on by default. Read the warning below before you leave it on.
Expired message: shown in place of the timer after it reaches zero. This field appears only when Hide when expired is off. Use it for a line like "Now open" or "Orders resume Monday".

The timer disappears, and the editor does not show it

This is the one thing to get right about the Countdown banner.

With Hide when expired on (the default), the Countdown timer block stops rendering entirely the moment the target date and time pass. Not a zeroed timer, not an empty box: no block at all. Everything else in the section stays, so the panel is still there, still padded, with a gap where the timer was.

The theme editor does not reproduce this. In the editor an expired block keeps its place and shows the line "This countdown has expired." so that you can still select it and change the date. That note is editor-only. Your customers see nothing there.

So:

Set a reminder for the date you picked, and edit the section on that day.
Or turn Hide when expired off and write an Expired message, so the space says something instead of collapsing.
If you turn Hide when expired off and leave Expired message empty, the timer stays on the page reading all zeros. Usually you want the message.

Check the live storefront, not the editor, to confirm what an expired countdown looks like on your page.

Section settings

The Section that wraps the timer uses the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. See Common section settings.

Tips

Set the Date and Time in your store timezone, not the customer's. A shopper in another timezone sees the same remaining time, counting to the same moment.
Give the countdown a real deadline: the day the new harvest ships, the last order date before a holiday, the hour a limited batch goes live. A countdown that a shopper can tell is fake costs you more trust than it buys you urgency.
One countdown per page is enough. Two on the same page compete and neither reads as important.