# Countdown Hero

> A countdown image hero that creates urgency and drives sales during promotions, launches, and flash events.

URL: https://sectionstar.app/sections/countdown-hero/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.889Z

---

**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 |