Countdown to Date is a Shopify theme section in the Section Star library. Countdown to a specific date for holidays, sales, and promos — build urgency around any time-limited offer.
About the Countdown to Date section
The "Count Down to Date" section is a customizable countdown timer feature that you can add to your Shopify store using the Section Star app. It visually displays the time remaining until a specific date and can be useful for limited-time promotions, sales, and special events. The design is fully customizable, allowing you to adjust fonts, colors, sizes, and alignment to match your store's branding.
Live demo
Use cases
-
Flash Sales: Create urgency by setting up a countdown for limited-time offers. This can help boost sales and encourage customers to make a purchase before the timer runs out.
-
New Product Launch: Build excitement for an upcoming product release by displaying a countdown timer. This helps create anticipation and can increase traffic to your store on the launch day.
-
Holiday Promotions: Use a countdown timer for seasonal sales or holiday events. Inform customers exactly how much time they have to take advantage of special deals.
-
Event Registrations: If you are organizing an event or webinar, a countdown timer can help you keep track of how much time is left for sign-ups, thus driving more registrations.
-
Special Discount Countdown: Offer special discounts that expire after a certain period. Display a countdown to show customers how much time they have left to avail of the discount.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Display
Set the design of the grid
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Text Color | Color | #FFF |
| Column Width | Number | 150 |
| Timer Size | Range | 60 |
| Mobile Timer Size | Range | 20 |
| Timer Alignment | Text alignment | center |
| Padding | Number | 20 |
| Mobile Padding | Number | 10 |
| Space between Columns | Number | 15 |
End Date
Set the end date to count down to.
| Setting | Type | Default |
|---|---|---|
| End Month | Select (January, February, March, April, May, June…) | 01 |
| Day | Range | 1 |
| Year | Select (This Year, Next Year) | 0 |
| Hour | Select (00 (12AM), 01 (1AM), 02 (2AM), 03 (3AM), 04 (4AM), 05 (5AM)…) | 00 |
| Minute | Select (00, 15, 30, 45) | 00 |
| Timezone | Select (UTC-12 (AoE), UTC-11 (NUT), UTC-10 (HST), UTC-9 (AKST), UTC-8 (PST), UTC-7 (MST)…) | Z |
Countdown Design
Set the display of the countdown timer
| Setting | Type | Default |
|---|---|---|
| Mobile Columns | Select (1 column (stacked), 1 column (fit), 2 Columns) | two-column |
| Days Text | Inline rich text | days |
| Hours Text | Inline rich text | hours |
| Minutes Text | Inline rich text | minutes |
| Seconds Text | Inline rich text | seconds |
Display
Display settings for the section
| Setting | Type | Default |
|---|---|---|
| Show Seconds Column | Checkbox | On |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample Headline</b> |
| Text | Inline rich text | Use this block to add a description. … |
| Spacing between Headline and Features | Number | 15 |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Countdown to Date”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.