Countdown counts down the days, hours, minutes and seconds to the end of a sale, a launch or a drop, with a heading, text and a button. The Broadsheet preset uses it on its home page.
Under the numbers the section says when it ends in words, for example "Ends 31 December 2026, 23:59". Screen readers read that sentence instead of the numbers, so they are not interrupted every second.
Where to find it
In the theme editor, click Add section and choose Countdown. You can add it to the home page or any other page that takes sections, as many times as you like.
Setting the end
Enter the End date and time as 2026-12-31 23:59: year, month, day, then the time on a 24-hour clock.
- The countdown runs once, to that one moment, then stops. It never restarts and never shows negative numbers, so it always tells customers the truth.
- If the date can't be read, the theme editor shows a note in the section so you can correct it; customers never see that note. Until it is fixed, the section shows its heading, text and button without numbers.
Time zones
Time zone decides whose clock the end time is read on:
- Store time zone: the time in your store's time zone, set in your Shopify admin under Settings > General. The countdown ends at the same moment for every customer, wherever they are. Use it for an offer that ends at a fixed time, such as a discount code.
- Customer's time zone: the time on each customer's own clock. A sale that ends at midnight ends at midnight in Paris for a customer in Paris, and at midnight in New York for a customer in New York. Use it only when the offer itself really does end at different moments.
After it ends
After the countdown ends decides what happens next: Hide this section removes the section from your storefront, and Show a message replaces the countdown and button with the text in Message after it ends. A page that is open when the time runs out changes at that moment, without reloading.
A countdown that has ended and is set to hide still shows a note in the theme editor, so you can find it and remove it.
Section settings
Select the section in the theme editor to see these settings, in this order.
| Setting | Options | What it does |
|---|---|---|
| Eyebrow | Text. | A short label above the heading, such as "New in". With Show editorial numbering on in theme settings, the section's number is shown before it. |
| Heading | Text. | The section's heading. Select a word and make it italic for emphasis. Leave it empty to show no heading. |
| Heading size | Small, Medium, Large or Extra large. Default: Large. | How large the heading is set. |
| Text | Formatted text. | Optional text under the heading, for example what is on offer. |
| Countdown | ||
| End date and time | Text. | When the countdown ends, in the format 2026-12-31 23:59. |
| Time zone | Store time zone or Customer's time zone. Default: Store time zone. | Whether the end time is read in your store's time zone or in each customer's. |
| After the countdown ends | Hide this section or Show a message. Default: Hide this section. | What the section does once the countdown has ended. |
| Message after it ends | Text. | The message shown after the end, when Show a message is chosen. |
| Button | ||
| Button label | Text. | The text on the button. Leave it empty to hide the button. |
| Button link | Link. | Where the button goes, for example the sale collection. |
| Color scheme | Color scheme. | Which of your color schemes the section uses. Schemes are edited in theme settings under Colors. |
| Section spacing | ||
| Top spacing | None, Small, Medium or Large. Default: Medium. | The space above the section, as a share of Space between sections in theme settings. None lets the section touch the one above it. |
| Bottom spacing | None, Small, Medium or Large. Default: Medium. | The space below the section. None lets it touch the one below. |
Tips
- Set the end time to match the discount's end time in Shopify, so the countdown and the offer end together.
- Remove or update the section after a sale. With Hide this section it disappears by itself, but it is still in your template.
- For a countdown inside a bold banner built from theme blocks, use the Promo banner instead.