Count Up Hero is a Shopify theme section in the Section Star library. Enhance your store’s impact with a dynamic hero section featuring a built-in count-up effect. Showcase key metrics—like total sales, happy customers, or years in business—in an engaging way that builds trust and captures attention. This interactive element adds movement to your page, making your brand feel more credible and compelling at a glance.
Live demo
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Hero Design
Set the design for the hero
| Setting | Type | Default |
|---|---|---|
| Hero Max Width | Number | 500 |
| Hero Padding Top/Bottom | Number | 100 |
| Hero Padding Left/Right | Number | 10 |
| Subtle Shadow on Text | Checkbox | On |
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Cover Opacity | Range | 25 |
| Box Alignment | Text alignment | center |
Count Display
Set the display of the count section
| Setting | Type | Default |
|---|---|---|
| Count Max Width | Number | 800 |
| Count Padding Top/Bottom | Number | 25 |
| Count Padding Left/Right | Number | 25 |
| Count Overlap | Number | 25 |
| Round Borders on Count | Range | 5 |
| Subtle Shadow on Count | Checkbox | On |
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Count Size | Range | 75 |
| Count Spacing | Number | 10 |
| Count Color | Color | #111 |
| Box 1 Number | Number | 5000 |
| Box 1 Text | Text | Milestone Reached |
| Box 2 Number | Number | 500 |
| Box 2 Text | Inline rich text | Milestone Reached |
| Box 3 Number | Number | 100 |
| Box 3 Text | Inline rich text | Milestone Reached |
| Count Alignment | Text alignment | center |
Headline
Set text for the headline
| Setting | Type | Default |
|---|---|---|
| Hero Image | Image | — |
| 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 |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Link Text | Inline rich text | Shop More |
| Link | URL | — |
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 “Count Up 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.