> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/theme-sections/counter.md).

# Counter

Highlight key numbers about your brand in cards that count up when shoppers scroll to them.

{% hint style="warning" %}
**Pro feature.** This section requires a Pro or Max License key. Without one, it's hidden on your live store and shows a 🔒 Pro notice in the theme editor. [Learn about plans and License keys](/articles/general-information/license-key-and-plans.md)
{% endhint %}

***

The **Counter** section shows a row of stat cards, each with a large number and a short description. When the section scrolls into view, the numbers count up from zero to their final value. Use it to build trust with results like customer satisfaction, orders shipped, years in business or product ratings.

### 1. Our guide to set up a Counter section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Counter.**
* Click **Save.**
  {% endhint %}

### 2. Section settings

* **Subheading:** Small text shown above the heading.
* **Heading:** The main title of the section.
* **Heading size:** 15–80px.
* **Header alignment:** Left / Center.
* **Footnote:** Small text shown below the cards, for example a source or disclaimer for your numbers.
* **Numbers**
  * **Number size:** Size of the stat numbers, 30–120px. Numbers are shown slightly smaller on mobile.
  * **Animate numbers on scroll:** Counts each number up from zero when the section comes into view. When off, the final numbers are shown right away.
* **Card**
  * **Card alignment:** Alignment of the number and text inside each card: Left / Center.
  * **Columns on desktop:** Number of cards per row on desktop, 2–6.
  * **Columns on mobile:** 1 column / 2 columns.
  * **Card padding:** Space inside each card, 0–80px.
* **Colors**
  * **Section:** Color scheme for the section background: Accent 1 / Accent 2 / Accent 3 / Background 1 / Background 2 / Background 3 / Inverse.
  * **Card:** Color scheme for the stat cards, with the same options.
* **Corner radius**
  * **Card:** Rounds the corners of each card, 0–40px.
* **Section padding**
  * **Top padding:** 0–100px.
  * **Bottom padding:** 0–100px.

### 3. Stat block settings

Each **Stat** block is one card. You can add up to 6 stats.

* **Number:** The number to show. Use numbers only; decimals such as 4.5 are supported.
* **Prefix:** Text shown before the number, such as $.
* **Suffix:** Text shown after the number, such as % or +.
* **Text:** A short description of what the number means.

### 4. Tips

* Put symbols in **Prefix** or **Suffix**, not in **Number**. For example, for "10K+" enter 10 as the number and K+ as the suffix.
* Don't use commas or spaces in **Number** (enter 10000, not 10,000), or the count-up animation won't run correctly.
* Match **Columns on desktop** to the number of Stat blocks so every row is full. On tablets, cards are shown 2 or 3 per row.
* Use the **Footnote** to note where your numbers come from, especially for claims like satisfaction rates.