Countdown timer section with hero image, 3 display variants, and evergreen mode.
Countdown
The Countdown section displays a visual countdown timer with a striking background image. Perfect for creating urgency around a flash sale, product launch, or event.
3 Variants
| Variant | Description | Ideal for |
|---|---|---|
| Hero | Timer overlaid on a full-screen image | Launches, major events |
| Split | Image on one side, timer + content on the other | Promotions with details |
| Minimal | Compact timer without background image | Banners, embedded sections |
Main Settings
Timer
| Setting | Description | Options |
|---|---|---|
| Target date | Countdown end date | Date picker |
| Target time | Exact end time | Time picker |
| Evergreen mode | Automatically restarts for each visitor | On / Off |
| Evergreen duration | Timer duration in evergreen mode | Hours / Minutes |
| Show seconds | Display seconds | On / Off |
| Action at zero | Behavior when the timer reaches 0 | Hide section / Show message / Redirect |
Media
| Setting | Description | Options |
|---|---|---|
| Desktop image | Background image | Image picker |
| Mobile image | Dedicated mobile image | Image picker |
| Overlay | Overlay opacity | 0-100% |
| Height | Section height | Small / Medium / Large / Full screen |
Timer Style
| Setting | Description | Options |
|---|---|---|
| Digit style | Visual appearance | Cards / Circles / Minimal / Flip |
| Size | Timer size | Small / Medium / Large |
| Labels | Text below the digits | Days/Hours/Min/Sec customizable |
Available Blocks
| Block | Description |
|---|---|
| Heading | Main title (e.g., "Flash Sale") |
| Subheading | Complementary subtitle |
| Text | Offer description |
| Button | CTA to the collection/product |
| Timer | The countdown timer itself |
Evergreen Mode
Evergreen mode creates a personalized timer for each visitor. Instead of a fixed date, the timer starts on the first page load and resets automatically.
| Parameter | Description |
|---|---|
| Duration | Total countdown time (e.g., 2h, 24h) |
| Cookie | How long the timer is remembered per visitor |
| Restart | The timer restarts after expiration |
ℹ️Evergreen mode uses a cookie to remember when the timer was first displayed. Each visitor therefore sees a different timer, always running. Ideal for permanent "limited time" offers.
Use Cases
Flash Sale
- Hero variant in Full screen
- Fixed target date (end of the promo)
- Flip style for a dynamic effect
- Heading block "Flash Sale" + Button "View offers"
- Action at zero: hide section
Product Launch
- Split variant with product image
- Launch date as target
- Cards style, Large size
- Heading + Text (description) + Button (pre-order) blocks
Permanent Offer with Urgency
- Minimal variant embedded in the page
- Evergreen mode enabled (2h duration)
- Minimal style, Small size
- Message: "This offer expires in..."
- Automatic restart
💡The Flip style (digit flip animation) is the most visually engaging. It catches the eye and reinforces the sense of urgency.
⚠️Do not overuse evergreen mode. If your regular customers notice the timer resetting, it can damage trust. Reserve it for offers that are genuinely time-limited for each visitor.