Countdown Timer

Layout, content and available controls for Countdown Timer.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Add this section from the theme editor on a supported template.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Sticky behavior: Choose the presentation or source that fits this component.Options: None · Sticky on scroll up · Always sticky
Countdown Text: Use the rich text controls to add bold, italic, underline, or links inline.
End Date & Time: Format: YYYY-MM-DDTHH:MM:SS (24-hour format)
Enable Daily Reset: If enabled, countdown resets to midnight every day
Expired Message: Message shown when countdown expires (leave empty to hide bar)
Days Label: Edit the text shown by this component.
Hours Label: Edit the text shown by this component.
Minutes Label: Edit the text shown by this component.
Seconds Label: Edit the text shown by this component.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.
Text Font Size: Adjust within the range offered by the theme editor.
Text Weight: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold
Text Transform: Choose the presentation or source that fits this component.Options: None · Uppercase · Capitalize
Letter Spacing: Adjust within the range offered by the theme editor.
Legacy vertical paddingConditional: Adjust within the range offered by the theme editor.
Text max width: Adjust within the range offered by the theme editor.
Line width: Adjust within the range offered by the theme editor.
Line style: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted
Line colorConditional: Choose a local color when the relevant custom source is enabled.
Box Min Width: Adjust within the range offered by the theme editor.
Box Vertical Padding: Adjust within the range offered by the theme editor.
Box Horizontal Padding: Adjust within the range offered by the theme editor.
Box Border Radius: Adjust within the range offered by the theme editor.
Box Number Font Size: Adjust within the range offered by the theme editor.
Box Number Weight: Choose the presentation or source that fits this component.Options: Medium · Semi Bold · Bold
Label Font Size: Adjust within the range offered by the theme editor.
Label Weight: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Legacy color sourceConditional: Choose the presentation or source that fits this component.Options: Use color scheme · Custom colors
Color schemeConditional: Choose an available Shopify color scheme.
Background ColorConditional: Choose a local color when the relevant custom source is enabled.
Background Gradient (Optional)Conditional: If set, overrides the solid background color above.
Text ColorConditional: Choose a local color when the relevant custom source is enabled.
Timer Box BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Timer Box TextConditional: Choose a local color when the relevant custom source is enabled.
Timer number colorConditional: Choose a local color when the relevant custom source is enabled.
Container Max Width: Adjust within the range offered by the theme editor.