# 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)  |