Where to find it
In Online Store → Themes, open the unpublished theme editor, choose a compatible template, then Add section → Countdown. Availability follows the selected template and section group.
This section is not available in the Header group.
Set it up
- Choose Minimal, Card or Full banner, then add a Countdown block if the preset does not already contain one.
- In the Countdown block, set End date and time and UTC offset. Use the input format shown by that control and verify the intended time zone.
- Add supporting Heading, Text and Button blocks with accurate event details.
- Choose timer style and size, then decide whether the section shows a completed message or hides when the countdown ends.
- Preview a future and a completed state before using the section for an active event.
Main settings to review
| Setting | Choices or control |
|---|---|
| Layout | Minimal · Card · Full banner |
| Timer style | Boxes · Minimal · Circles |
| Timer size | Small · Medium · Large |
| When the countdown ends | Show completed message · Hide section |
| Background image | Choose an image |
| Content width | 40–100 %; step 5 |
Blocks and content
The following content blocks have their own setup and control reference. Nested blocks belong inside their parent, such as Slide, Tab, Tile or Story chapter.
App content requires a compatible installed app. Its setup and support come from that app; the theme does not supply the app service.
Content and media
- A background image is optional. Use a quiet area behind the timer and keep the actual date and offer details in text.
- The timer is visual event information. It does not schedule a Shopify discount, publication or inventory change.
Check the mobile layout
- Check all timer units at the mobile width and keep content padding low enough for the chosen timer size.
Common questions and fixes
- The time is wrong: review End date and time together with UTC offset.
- The timer or section disappears: check whether its date has passed and the block/section completion settings.
Full control reference
Names, choices, ranges and defaults below are read from this version of the theme. Defaults are starting examples, not promises about your business. Some controls appear only for the matching layout. Block contents and preset starting values can differ from the base defaults.
All section controls (23)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Width / Section width | Page width · Full width · Custom width | Default: Page width. This control appears only when the relevant layout or related option is selected. |
| Width / Custom width | 50–100 %; step 5 | Default: 80. Percentage of screen width. This control appears only when the relevant layout or related option is selected. |
| Width / Layout | Minimal · Card · Full banner | Default: Card. |
| Width / Color scheme | Choose a color scheme | Default: surface. |
| Width / Background image | Choose an image | Default: Not set. |
| Width / Background position | Top · Center · Bottom | Default: Center. This control appears only when the relevant layout or related option is selected. |
| Width / Background behavior | Scroll with section · Fixed to viewport | Default: Scroll with section. This control appears only when the relevant layout or related option is selected. |
| Width / Background color | Choose a color | Default: #f4f4f4. |
| Width / Background color opacity | 0–100 %; step 5 | Default: 100. |
| Width / Timer style | Boxes · Minimal · Circles | Default: Boxes. |
| Width / Timer size | Small · Medium · Large | Default: Medium. |
| Width / When the countdown ends | Show completed message · Hide section | Default: Show completed message. Uses the first countdown block in this section. |
| Width / Content width | 40–100 %; step 5 | Default: 70. |
| Width / Content padding | 16–80 px; step 4 | Default: 40. |
| Width / Block spacing | 0–48 px; step 2 | Default: 20. |
| Width / Corner radius | 0–32 px; step 2 | Default: 12. This control appears only when the relevant layout or related option is selected. |
| Width / Top padding | 0–120 px; step 4 | Default: 48. |
| Width / Bottom padding | 0–120 px; step 4 | Default: 48. |
| Width / Mobile top spacing | 0–120 px; step 4 | Default: 24. |
| Width / Mobile bottom spacing | 0–120 px; step 4 | Default: 24. |
| Advanced / Hide on desktop | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Hide on mobile | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Advanced / Section anchor | Text | Default: Not set. Optional. Use a unique name for links that jump to this section. |