Countdown Timer
Add urgency to promotions with a countdown timer. Display a countdown to a sale start, product launch, or limited-time offer.
Configure the Section
- In the theme editor, click Add section.
- Select Countdown timer.
- Add a countdown block and set the target date.
Section Settings
| Setting | Description |
|---|---|
| Section width | Page width, Full width, or Custom (60–100%). Default: Page width. |
| Section height | Auto, Full screen, or Custom. Default: Auto. |
| Content direction | Column (stacked) or Row (side by side). Default: Row. |
| Stack on mobile | Collapse row layout on mobile. Default: On. |
| Horizontal alignment | Start, Center, End, or Space between. Default: Center. |
| Vertical alignment | Start, Center, or End. Default: Center. |
| Content gap | Spacing between blocks. Range: 0–100px. Default: 12px. |
| Padding | Top and bottom padding with unified or separate controls. Range: 0–100px. Default: 32px. |
Blocks
Add theme blocks (text, buttons, countdown component) and app blocks to compose the countdown section layout. Combine with image blocks for a more engaging promotion.
Countdown Block
The countdown block is the core timer component. It counts down to a target date and time and displays days, hours, minutes, and seconds.
| Setting | Description |
|---|---|
| Target date | The date and time to count down to. |
| Expired message | Text shown after the countdown ends. |
| Color scheme | Color scheme for the timer digits. |
| Digit size | Size of the countdown numbers. |
| Show labels | Display “Days”, “Hours”, “Minutes”, “Seconds” labels. Default: On. |