Section reference
Countdown
Count down to the real end of a promotion with Vellmar's countdown section, and hide it automatically when it ends.
Promotion countdown shows the days, hours, minutes and seconds left until a date and time you set, with a heading, text and a button. When the time runs out, the clock is replaced by your Message after the end date, or the whole section is hidden if Hide section after the end date is on.
The end time uses your store's time zone, set in Shopify admin. Every shopper sees the same end moment, wherever they are.
Best practices
- Count down to a real end. Use the date your discount actually ends. A countdown that resets or never ends misleads shoppers, and can break consumer protection rules in many countries.
- Enter the date as YYYY-MM-DD and the time in 24-hour format, for example
2026-12-31and23:59. - Match the discount. Set the discount's end date in Shopify admin to the same moment, so the offer ends when the clock does.
- Hide it afterwards. Keep Hide section after the end date on, so an expired offer doesn't linger. In the theme editor the section stays visible, so you can still edit it.
- Link to the offer. Point the button at the sale collection.
Preset tips
- None of the preset home pages includes a countdown, so add one only while a promotion runs.
- Its default dark scheme stands out on Vellmar and Sorrel. On Graphite, Scheme 4 (acid lime) makes it impossible to miss.
- Handle
countdown- Group
- Heroes and banners
- Where
- Add it to any template with Add section in the theme editor. Up to 16 blocks. Accepts app blocks.
Settings
Counts down to a real launch or the real end of an offer. After the date the timer shows its message instead.
| Setting | Type | Default | Options |
|---|---|---|---|
| Layout | Drop-down | Panel and image | Panel and image, Panel only |
| Image | Image | None | — |
| Image badge | Text | None | — |
| Panel color scheme | Color scheme | Scheme 3 | — |
| Hide section after the date | Checkbox | Off | — |
| Color scheme | Color scheme | Scheme 1 | — |
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 48px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order. A section can have up to 16 blocks.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
This has no settings.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.