Countdown banner
A panel that counts down to a date and time you set, such as the end of a sale or a product launch, with a box each for days, hours, minutes and seconds. It counts to your real end time, in your store’s timezone, and never restarts. For a one-line countdown above the header on every page, use a Countdown message in the Announcement bar.
Add the section
Section titled “Add the section”Online Store → Themes → Customize
- In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
- At the top of the theme editor, open the template you want to change, such as the home page.
- In the sidebar, select Add section.
- Choose Countdown banner.
- Type the end in End date and time, for example 2026-12-31 23:59, then select Save.
The section isn’t on any page until you add it. You can add it to any template, but not to the header or the footer.
Settings
Section titled “Settings”- Heading: the heading above the countdown.
- Text: a short text under the heading, such as what ends and when.
- Button label: the button’s label.
- Button link: where the button goes. The button shows once it has a label and a link.
Countdown
Section titled “Countdown”- End date and time: when the countdown ends, typed as YYYY-MM-DD HH:MM in your store’s timezone, for example 2026-12-31 23:59. Your store’s timezone is set in Settings → General. A date that doesn’t exist, such as 2026-02-30, or any other format keeps the section hidden in your store.
- When the countdown ends: Hide it removes the section from the page. Show a message replaces the heading, text, countdown and button with your message.
- Ended message: the message that shows after the end. Shown when When the countdown ends is Show a message. If you leave it empty, the section hides instead.
- Color scheme: the colors of the panel. You edit color schemes in Theme settings.
- Panel style: Panel is a rounded panel inside the page margin. Flush spans the full page width with square corners.
- Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
- Top padding: space above the content, from 0 to 120 px.
- Bottom padding: space below the content, from 0 to 120 px. On mobile, both paddings are scaled down: 64 px becomes 40 px.
- The end takes effect live: on a page that’s open at that moment, the section goes or its message appears, and it stays that way on every visit after. To run a new countdown, type a new end.
- Daylight saving time is taken into account, so the countdown ends at the time you typed, on your store’s clock.
- A hidden countdown still shows in the theme editor, with its heading and a note that says why, so you can find it and fix it.
- Screen readers also hear the end in words, such as “Ends December 31, 2026 at 11:59 pm (EST)”. In a browser without JavaScript, that line shows in place of the digits.