Skip to content
Countdown
Section overview
The Countdown section provides a dynamic timer that counts down to a specific date, perfect for creating urgency around limited-time offers, promotions, or events on your Shopify store.
Common use cases
- Highlight time-limited sales or promotions
- Create urgency for product launches or pre-orders
- Display countdown to seasonal events or holidays
- Showcase limited availability for exclusive products
Usage tips
- Set a realistic countdown date that aligns with your marketing campaigns
- Use clear, action-oriented text that explains what happens when the countdown ends
- Include a call-to-action button that directs customers to the relevant offer or collection
- For mobile responsiveness, adjust the width settings for mobile displays to ensure the countdown timer remains legible on smaller screens
- Avoid setting countdowns too far in advance as this may reduce the sense of urgency
- If using an image alongside the countdown, ensure it visually reinforces the promotion's message
Section settings
| Setting | Description |
|---|---|
| Countdown date | The target date that the timer counts down to |
| Top spacing | Controls the padding space above the section (0-300px) |
| Bottom spacing | Controls the padding space below the section (0-300px) |
| Color scheme | Determines the background and text color of the section |
| Border color | Sets the color of any borders in the section (subtle or strong) |
| Button color | Determines the style and color of the button in the countdown block |
| Border position | Controls where borders appear (none, top, bottom, or both) |
| Vertical alignment | Sets how blocks align vertically within the section (top, middle, bottom) |
| Visibility | Controls whether the section appears on all devices, only mobile, or only desktop |
Block settings
Countdown
The Countdown block displays the main timer functionality with optional heading, content, and button. Limited to 1 per section.
| Setting | Description |
|---|---|
| Heading | The title text that appears above the countdown timer |
| Content | Descriptive text that provides context for the countdown |
| Button label | Text displayed on the call-to-action button |
| Button URL | The destination page when the button is clicked |
| Desktop width | Controls how much horizontal space the block occupies on desktop (1-12/12) |
| Mobile width | Controls how much horizontal space the block occupies on mobile (1-12/12) |
| Horizontal alignment | Sets the alignment of content within the block (left, center, right) |
Image
The Image block allows you to add a visual element alongside the countdown timer. Limited to 1 per section.
| Setting | Description |
|---|---|
| Image | The visual to display next to the countdown timer |
| Desktop width | Controls how much horizontal space the image occupies on desktop (1-12/12) |
| Mobile width | Controls how much horizontal space the image occupies on mobile (1-12/12) |