Countdown Hero is a Shopify theme section in the Section Star library. A countdown image hero that creates urgency and drives sales during promotions, launches, and flash events.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the settings for the grid
| Setting | Type | Default |
|---|---|---|
| Grid gap | Number | 20 |
Image Design
Set the image for the section
| Setting | Type | Default |
|---|---|---|
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1) | 16 / 9 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Image | Image | — |
| Media Location | Select (Left, Right) | left |
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 |
| Hours Text | Text | hours |
| Minutes Text | Text | minutes |
| Seconds Text | Text | seconds |
| Padding | Number | 15 |
| Spacing Between Time Blocks | Number | 5 |
| Show Days | Checkbox | On |
| Show Seconds | Checkbox | On |
| Timer Size | Range | 25 |
| Timer Label Size | Range | 13 |
| Timer Text Color | Color | #555 |
| Timer Background Color | Color or gradient | linear-gradient(164deg, rgba(255, 255… |
| Round Borders | Range | 5 |
| Subtle Shadow | Checkbox | On |
Content
Set the content for the section
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Inline rich text | This is the placeholder text for the … |
| Spacing between Headline and Features | Number | 15 |
Button
Set content for the buttons.
| Setting | Type | Default |
|---|---|---|
| Show buttons? | Checkbox | On |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
Secondary Button
Set content for the secondary button
| Setting | Type | Default |
|---|---|---|
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
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 Hero”.
- 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.