# Count Up Hero

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

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

---

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