Countdown Banner is a Shopify theme section in the Section Star library. Create urgency that converts — add a sleek countdown banner to your promotions and watch shoppers act before time runs out.
About the Countdown Banner section
The Count Down Banner section is designed to create a dynamic and engaging countdown timer on your Shopify store. It can be used to highlight sales, promotions, or any event that requires a countdown. The section is fully customizable with options for font styles, icon choices, colors, and more.
Live demo
Use cases
-
Flash Sales: Create urgency for your customers by highlighting limited-time flash sales.
-
New Product Launch: Build anticipation for a new product launch by counting down to the exact launch time.
-
Seasonal Discounts: Use the countdown banner to promote seasonal discounts such as Black Friday, Cyber Monday, or Christmas sales.
-
Event Countdown: Perfect for highlighting upcoming events like webinars, special announcements, or any event where a countdown could increase engagement.
-
Limited Stock Notification: Inform customers of limited stock availability or an offer that expires soon.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Text Font | Font | sans-serif |
| Timer Font | Font | sans-serif |
| Override text sizes | Checkbox | On |
| Text Size | Range | 15 |
| Timer Size | Range | 15 |
Text Colors
| Setting | Type | Default |
|---|---|---|
| Text Color | Color | #fff |
| Timer Color | Color | #111 |
| Link Color | Color | #005bd3 |
| Underline Link? | Checkbox | On |
Banner Colors
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #222… |
| Countdown Background Color | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
Grid Design
| Setting | Type | Default |
|---|---|---|
| Grid Spacing | Number | 10 |
Section Design
Set the design for the section
| Setting | Type | Default |
|---|---|---|
| Show Section | Select (All Devices, Mobile Only, Desktop Only) | all |
| Max Width of Section | Number | 1000 |
| Padding Top | Number | 25 |
| Padding Bottom | Number | 25 |
| Padding Left | Number | 10 |
| Padding Right | Number | 10 |
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 |
|---|---|---|
| Days Text | Text | days |
| Hide days? | Checkbox | Off |
| Hours Text | Text | hours |
| Minutes Text | Text | mins |
| Seconds Text | Text | seconds |
| Hide seconds? | Checkbox | Off |
Icon Display
| Setting | Type | Default |
|---|---|---|
| Icon Size | Range | 30 |
| Icon Color | Color | #0D8BF4 |
| Icon | Select (No Icon, Cart, Gift, Gift Card, Shipping, Payment…) | tag |
Content
Set the content for section
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Select (Left, Center, Right) | left |
| Mobile Text Alignment | Select (Left, Center, Right) | left |
| Countdown Alignment | Select (Left, Center, Right) | right |
| Mobile Countdown Alignment | Select (Left, Center, Right) | left |
| Content | Inline rich text | This is the sample banner text |
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 Banner”.
- 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.