Countdown Scroll is a Shopify theme section in the Section Star library. Pair a scrollable product list with a countdown timer — create urgency and sell more during time-limited promotions.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Grid Design
Set the design for the feature grid
| Setting | Type | Default |
|---|---|---|
| Show Scrollbars | Checkbox | Off |
| Grid Gap | Number | 20 |
| Width | Number | 300 |
| Arrow Background Color | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Arrow Color | Color | #111 |
Card Design
Set the design for the feature section
| Setting | Type | Default |
|---|---|---|
| Uniform height? | Checkbox | On |
| Vertical Alignment | Select (Top, Center, Bottom) | center |
| Make Entire Card Clickable? | Checkbox | Off |
| Hide button? | Checkbox | Off |
| Spacing between Elements | Number | 5 |
| Card Padding | Number | 10 |
| Card Text Size | Range | 13 |
| Card Headline Size | Range | 18 |
| Card Background Color | Color | #fff |
| Card Text Color | Color | #111 |
| Round Borders on Card | Range | 5 |
| Subtle Shadow on Card | Checkbox | On |
| Show the description? | Checkbox | On |
| Truncate description? | Checkbox | On |
| Truncate Length | Number | 50 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Round Borders on Button | Range | 5 |
| Border Size on Button | Range | 0 |
| Border Color on Button | Color | #888 |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Text Size | Range | 13 |
| Button Text Color | Color | #fff |
Image Design
Set the design for your image
| Setting | Type | Default |
|---|---|---|
| Media Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 3:4, 9:16…) | 4 / 3 |
| Media Aspect Ratio (mobile) | Select (21:9, 16:9, 4:3, 1:1, 9:16, Auto) | 4 / 3 |
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 |
|---|---|---|
| Timer Text Alignment | Text alignment | center |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Background Image | Image | — |
| Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Headline Text Color | Color | #111 |
| Headline Size | Range | 25 |
| Timer Text Color | Color | #FFF |
| Timer Size | Range | 25 |
| Headline | Inline rich text | <b>Shop our Holiday Sale Today</b> |
| Text | Inline rich text | Save 20% for a limited time |
| Days Text | Inline rich text | days |
| Hours Text | Inline rich text | hours |
| Minutes Text | Inline rich text | minutes |
| Seconds Text | Inline rich text | seconds |
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>Check out our Products</b> |
| Text | Inline rich text | Shop our extensive range of amazing p… |
| Spacing between Headline and Features | Number | 15 |
Feature block settings
| Setting | Type | Default |
|---|---|---|
| Background Image | Image | — |
| Headline | Inline rich text | <b>Feature Headline</b> |
| Description | Inline rich text | This is a sample description |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |
| Open in New Tab | Checkbox | Off |
Product block settings
| Setting | Type | Default |
|---|---|---|
| Product | Product | — |
| Call to Action | Inline rich text | Shop Now |
| Open in New Tab | Checkbox | Off |
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 Scroll”.
- 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.