How do I show animated numbers and stats (Indicator section)?

The Indicator section shows a row of numbers, such as "10,000+ happy customers" or "98% positive reviews". Each number counts up from zero when shoppers scroll to it.

Add the section

1. Open the builder and choose Home page in the Pages tab.
2. In the Sections tab, click Add new section and pick Indicator from the Content group.
3. Select the section and click Add new block to add a Stat (one number). You can also add a Divider to split your stats into groups.

It is only offered on the home page, up to 2 per page. Each indicator holds up to 8 stats and 7 dividers.

Section settings

• Items per row (1 to 8): how many stats sit side by side. It may show fewer per row on small screens, so the numbers never get squeezed.
• Direction: Vertical puts the label above or below the number, Horizontal puts them side by side.
• Font size: the size of the numbers, in pixels.
• Bold: makes the numbers bold.
• Section width, Color scheme, Padding, and a Custom CSS tab.

Each stat

• Value: the number. It takes whole numbers only. Large numbers get thousands separators, for example 10,000.
• Prefix: short text before the number, like $.
• Suffix: short text after the number, like +, %, or K.
• Text position: Top or Bottom, to put the label above or below the number.
• Gap: the space between the number and its label.

The label is a Text block inside the stat (one per stat). Click it to change the words, size, or alignment. See Group, Text, Button, and Divider blocks: how do the layout component settings work?

Dividers

A Divider in this section takes the full width of the section. It does not sit between two numbers in a row: it draws a line across, so the stats before it and the stats after it form two groups. Drag it to the place you want. Its thickness, length, and padding are set like any divider, and the line uses the border color of the color scheme.

Recipes

• Big numbers: for "250K+ orders", type 250 in Value and K+ in Suffix. It is shorter and easier to read.
• Percent: Value 98 with Suffix %, and a label such as "of customers recommend us".
• Years: Value 12 with a label like "years in business".
• Clean row: Items per row equal to your number of stats, and Bold on so the numbers stand out.
• Two groups: four stats about customers, a Divider, then four stats about delivery.

Good to know

• The count up plays once, the first time the section comes into view.
• A stat shows a number with no label? Its Text block was hidden or deleted. Select the stat and click Add new block to add one back.
• The numbers wrap onto two rows on a phone? That is normal: the section shows fewer stats per row when the screen is too narrow.
• Shoppers who turned on reduced motion on their device see the final numbers right away, with no counting.
• Only show numbers that are true. Shoppers notice when they are not.