Countdown timer

At a glance

Countdown timer block for launches and sales.

Used in

Configure where this block is available in the parent section.

Settings

General

Setting	What it does	Default	Shows when
Timer heading	Controls “Timer heading” on the storefront. Open the theme editor to preview live.	Limited time offer!	Always

Schedule

Setting	What it does	Default	Shows when
Timer mode	Counts down and restarts automatically. Choose duration below. Persists for the visitor's browser session (like the cart timer).	repeat	Always
Repeat duration	Controls “Repeat duration” on the storefront. Open the theme editor to preview live.	repeat_24h	timer mode == 'repeat' or timer mode == 'repeat 24h'
Start date & time	Optional. Shows the "before start" message until this moment. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2025-09-20 09:00:00 AM. Leave blank to start immediately. Times use the visitor's local browser timezone.	—	Timer mode is Schedule
End date & time	When the countdown reaches zero. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2026-12-25 10:00:00 AM. Times use the visitor's local browser timezone.	2026-12-25 10:00:00 AM	Timer mode is Schedule

Messages

Setting	What it does	Default	Shows when
Message before timer starts	Controls “Message before timer starts” on the storefront. Open the theme editor to preview live.	Sale will start soon...	Timer mode is Schedule
Prefix text	Controls “Prefix text” on the storefront. Open the theme editor to preview live.	Hurry! Only	Always
Suffix text	Controls “Suffix text” on the storefront. Open the theme editor to preview live.	left!	Always
Message after expiry	Controls “Message after expiry” on the storefront. Open the theme editor to preview live.	Sale ended!	Always

Behavior

Setting	What it does	Default	Shows when
Loop timer after expiry	When enabled, after the timer expires the end time moves forward by 24 hours until the current time is inside the window. When start time is set, both start and end advance together; if start is blank, only end time advances.	Yes	Timer mode is Schedule

Timer typography

Setting	What it does	Default	Shows when

Mobile (up to 639px)

Setting	What it does	Default	Shows when
Prefix font size	Sets prefix font size in pixels for the matching screen size.	14	Always
Suffix font size	Sets suffix font size in pixels for the matching screen size.	14	Always
Timer font size	Sets timer font size in pixels for the matching screen size.	48	Always
Label font size	Sets label font size in pixels for the matching screen size.	18	Always
Message font size	Sets message font size in pixels for the matching screen size.	16	Always

Tablet (640px – 879px)

Setting	What it does	Default	Shows when
Prefix font size	Sets prefix font size in pixels for the matching screen size.	16	Always
Suffix font size	Sets suffix font size in pixels for the matching screen size.	16	Always
Timer font size	Sets timer font size in pixels for the matching screen size.	60	Always
Label font size	Sets label font size in pixels for the matching screen size.	22	Always
Message font size	Sets message font size in pixels for the matching screen size.	18	Always

Desktop (880px+)

Setting	What it does	Default	Shows when
Prefix font size	Sets prefix font size in pixels for the matching screen size.	18	Always
Suffix font size	Sets suffix font size in pixels for the matching screen size.	18	Always
Timer font size	Sets timer font size in pixels for the matching screen size.	72	Always
Label font size	Sets label font size in pixels for the matching screen size.	28	Always
Message font size	Sets message font size in pixels for the matching screen size.	20	Always

Font weights

Setting	What it does	Default	Shows when
Prefix font weight	Sets how bold prefix text appears.	400	Always
Suffix font weight	Sets how bold suffix text appears.	400	Always
Timer font weight	Sets how bold timer text appears.	400	Always
Label font weight	Sets how bold label text appears.	600	Always
Message font weight	Sets how bold message text appears.	400	Always

Setting details

Each control from the tables above, explained simply:

Timer heading

Controls “Timer heading” on the storefront. Open the theme editor to preview live. Default: Limited time offer!.

Timer mode

Counts down and restarts automatically. Choose duration below. Persists for the visitor's browser session (like the cart timer). Default: repeat.

Repeat duration

Controls “Repeat duration” on the storefront. Open the theme editor to preview live. Default: repeat_24h. This control appears when: timer mode == 'repeat' or timer mode == 'repeat 24h'.

Optional. Shows the "before start" message until this moment. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2025-09-20 09:00:00 AM. Leave blank to start immediately. Times use the visitor's local browser timezone. Default: —. This control appears when: Timer mode is Schedule.

End date & time

When the countdown reaches zero. Use YYYY-MM-DD HH:MM:SS (24h) or YYYY-MM-DD HH:MM:SS AM/PM (12h), e.g. 2026-12-25 10:00:00 AM. Times use the visitor's local browser timezone. Default: 2026-12-25 10:00:00 AM. This control appears when: Timer mode is Schedule.

Message before timer starts

Controls “Message before timer starts” on the storefront. Open the theme editor to preview live. Default: Sale will start soon.... This control appears when: Timer mode is Schedule.

Prefix text

Controls “Prefix text” on the storefront. Open the theme editor to preview live. Default: Hurry! Only.

Suffix text

Controls “Suffix text” on the storefront. Open the theme editor to preview live. Default: left!.

Message after expiry

Controls “Message after expiry” on the storefront. Open the theme editor to preview live. Default: Sale ended!.

Loop timer after expiry

When enabled, after the timer expires the end time moves forward by 24 hours until the current time is inside the window. When start time is set, both start and end advance together; if start is blank, only end time advances. Default: Yes. This control appears when: Timer mode is Schedule.