Add a countdown timer to your product pages and sections to create urgency and boost conversions.
Countdown Timer
The Timer block displays a countdown to a deadline. It is available as a block in product pages and in many sections (Banner, etc.). It creates a sense of urgency that drives action.
How to Add It
- Open the Shopify theme editor
- Navigate to the desired section (product page, banner, etc.)
- Click Add a block
- Select Timer
Timer Date
The timer can use two date sources:
| Source | Description | Use Case |
|---|---|---|
| Global timer | Date configured in Theme Settings > Timer | Sitewide promotions, same date everywhere |
| Custom date | Date specific to this block | Unique timer for a page or section |
To use a custom date, enable Override timer and fill in:
| Setting | Type | Default | Format | Description |
|---|---|---|---|---|
| Date | Text | 2026-12-31 | YYYY-MM-DD | Countdown end date |
| Time | Text | 23:59 | HH:MM | End time |
💡The global timer is configured in Theme Settings > Timer. This is the most convenient option for a sitewide promo: change the date once and all timers without an override will update.
4 Display Styles
| Style | Description | Ideal For |
|---|---|---|
| Cards | Each unit (D/H/M/S) in a separate card | Product pages, hero sections |
| Bold | Large, bold numbers, minimalist style | Promotional sections |
| Flip | Flip animation, mechanical clock style | Premium visual impact |
| Badge | Compact inline format with optional icon | Product, compact, inline |
Settings
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Title | Text | "Limited offer" | Title displayed above the timer |
| Text | Inline richtext | - | Description below the title (optional) |
| End text | Text | - | Message displayed when the timer reaches zero |
Display
| Setting | Type | Options / Range | Default | Description |
|---|---|---|---|---|
| Style | Select | Badge / Cards / Bold / Flip | Cards | Visual style of the timer |
| Size | Range | 50-300% | 100% | Timer scale |
| Color | Select | Accent 1 / Accent 2 / Foreground | Accent 1 | Timer accent color |
| Alignment | Select | Left / Center / Right | Center | Horizontal alignment |
Badge Style Options
These settings only appear when the Badge style is selected:
| Setting | Type | Options | Default | Description |
|---|---|---|---|---|
| Icon | Select | Icon list | None | Icon displayed before the timer |
| Custom icon | Image picker | - | - | Custom image as icon |
| Floating label | Text | - | - | Short text above the badge |
| Background | Select | Transparent / Tinted | Transparent | Badge background |
Global vs Custom Timer
Theme Settings > Timer
└─ Date: 2026-03-15, Time: 23:59
│
├── Banner Section > Timer Block (no override)
│ → Displays: 2026-03-15 23:59
│
├── Product Page > Timer Block (no override)
│ → Displays: 2026-03-15 23:59
│
└── Product Page #2 > Timer Block (override)
→ Custom date: 2026-04-01
→ Displays: 2026-04-01 23:59ℹ️When the timer reaches zero, it displays the end text if configured. Otherwise, the counters simply show "00" everywhere. Remember to configure a relevant end message such as "Offer ended" or hide the block when the promotion is over.
Use Cases
Flash sale on product page
- Cards or Flip style for strong visual impact
- Custom date (override) for this specific promotion
- Title: "Flash sale - Ends in:"
- Size: 100%
Subtle urgency on product page
- Compact Badge style
- Tinted background to stand out
- Clock or fire icon
- Floating label: "Sale"
- Size: 80%
Sitewide promotional banner
- Bold style for large numbers
- Global timer (same date everywhere)
- Size: 150%
- Accent 1 color to catch the eye
⚠️Avoid using "evergreen" timers that reset on every visit with dates always in the future. Returning customers notice the trick, which erodes trust. Use real promotion end dates.