A timer to a real end date, with a heading, text and a button, as a band or a card.
What it does
A live timer counting down to a date and time you set, with days, hours, minutes and
seconds. Around it, the usual content blocks: label, heading, text and a button. Band
runs it across the section; Card puts it on a card with its own color scheme. When
the moment passes, the section hides itself or shows a message you wrote.
When to use it
A launch, the end of a pre-order window, a seasonal offer with a real end. On the home
page above the featured collection during the campaign, or on the product page above the
buy box. Remove or empty the date afterwards; the theme hides an expired timer, but the
template stays cleaner without it.
Blocks
Label, Heading, Text, Button.
Setting it up
Set End date as YYYY-MM-DD and End time as HH:MM.
Choose what happens After the end and write the Message after the end if you
chose to show one.
Add a Heading and a Button to the offer.
Choose Layout.
Settings
Setting
Type
What it does
General
Color scheme
Color scheme
The surface of the section: background, text, buttons and accent as one contrast-checked set. Schemes are edited under Theme settings, Colors.
Width
Select
Fixed width keeps the section inside the page margin so it lines up with the sections around it. Full width runs it to the edge of the screen.Options: Fixed width, Full width · Default: Fixed width
Layout
Select
Band runs the timer across the section. Card puts it on a card in the card color scheme.Options: Band, Card · Default: Band
Card color scheme
Color scheme
The surface of each card, separate from the section behind it, so cards can stand off the section background.
Timer
End date
Text
The day the offer really ends, as YYYY-MM-DD. Empty keeps the section off the live page.
End time
Text
The time on that day, as HH:MM on a 24 hour clock, in your store's time zone.Default: 00:00
Show days
Checkbox
Shows a days unit. Off counts the whole remaining time in hours, for deadlines within a day or two.Default: on
After the end
Select
Whether the section disappears when the moment passes or shows the message below.Options: Hide the section, Show a message · Default: Hide the section
Message after the end
Text
What the section says after the end, when After the end is set to Show a message.
Section padding
Top padding
Range
Space between the top of the section and its content. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60
Bottom padding
Range
Space between the content and the bottom of the section. On a phone the theme tightens it by a quarter.0 to 120 px · Default: 60
Label block
Setting
Type
What it does
Text
Text
A short kicker above the heading, such as a chapter name. Rendered small, spaced and uppercase.Default: Add a short label
Alignment
Select
Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit
Heading block
Setting
Type
What it does
Heading
Text
The heading text. Italicize a word to set it in the accent font.Default: Add a heading that says what you stand for
Size
Select
How large the heading renders, on the shared type scale.Options: Large, Medium, Small, Extra small · Default: Medium
Heading level
Select
Page heading is the one heading that names what the page is about; use it once per page. Section heading and Subheading are for everything else.Options: Page heading, Section heading, Subheading · Default: Section heading
Accent font
Select
Highlight words puts the italicized words on the accent font. Whole heading sets the entire line in it. Off keeps the heading font.Options: Highlight words, Whole heading, Off · Default: Highlight words
Alignment
Select
Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit
Text block
Setting
Type
What it does
Text
Rich text
A short kicker above the heading, such as a chapter name. Rendered small, spaced and uppercase.Default: <p>Use this text to explain the product, the story, or the promise behind it.</p>
Size
Select
How large the heading renders, on the shared type scale.Options: Large, Medium, Small · Default: Medium
Alignment
Select
Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit
Button block
Setting
Type
What it does
Button label
Text
The text on the button.Default: Shop now
Button link
Link
Where the button leads.
Button style
Select
Solid is the primary button in the scheme colors, Outline a bordered button, Text link a plain underlined link.Options: Solid, Outline, Text link · Default: Solid
Size
Select
How large the heading renders, on the shared type scale.Options: Large, Medium · Default: Medium
Alignment
Select
Overrides the alignment of the section for this block only.Options: Inherit, Left, Center, Right · Default: Inherit
This section also accepts app blocks, so apps that provide one can add content here.
Tips
Only set an end date something really ends on. A timer that resets or a deadline that does not exist is against the Theme Store rules and, in most countries, against consumer law.
The end time is read in your store's time zone (Settings, General). A visitor elsewhere sees the same moment converted to their clock.
With no end date the section stays off the live page. You can leave it in the template between campaigns.
Turn off Show days for a deadline within two days; the hours then count the whole remaining time, which reads as more urgent and is more honest.
