Stats counter

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

1. What is Stats counter?

Stats counter is a section that displays key numbers (statistics) in an eye-catching way using animated counters, headings, and short descriptions.

It is commonly used to show achievements, scale, trust signals, or performance metrics such as:

Years of experience
Products sold
Customers served
Partners, locations, or milestones

2. Section Components

Section		Stat counter	Display a list of statistics with animated numbers and supporting content/ media.
Available blocks	1st-level available blocks (Blocks you can add directly inside the Stat counter section)	Header	Show an image outside the content area.
		Stat list	Used to contain multiple Stat items. (similar to Item list block)
		Image	Used to add an image to the section.
		Video	Used to add a video to the section.
	Sub-level available blocks (Blocks you can add inside the 1st-level above blocks only)	> Counter	Used to display numbers with a counting animation.
		> Heading	Used to display a main title or the group's headline.
		> Subheading	Used to display a small line of text above or below a heading.
		> Text	Used to add descriptive or explanatory text.
		> Icon	Used to add visual symbols to highlight features or benefits.
		> Image	Used to add supporting images inside the group.
		> Button	Used to add a call-to-action button such as “Shop now” or “Learn more”.
		> Countdown timer	Used to display a countdown with animated numbers.
		> Group	Create “blocks inside blocks” to build more complex layouts.
		> Item list	Similar to Group, but with layout control. Make the items inside display as Grid or Carousel.

3. Location & Setup

Go to “Online Store” > “Themes” > ”Customize”.
Select where you want to place it.
Click "Add Section".
Search for Stats counter
Click on it to add.

4. Highlight features

Grid or Carousel layout: Choose to show all stats at once (Grid) or slide them horizontally (Carousel).
Responsive items per row: Set how many stats appear per row on desktop, tablet, and mobile.
Rich content inside each stat
Add icons, images, text, buttons, countdown timers, and more.
Spacing & sizing control
Adjust padding, gap, and width at section, list, and stat level.

5. Common Use Cases

🤔 How to create a basic Stats counter section?

Want to show a simple row of statistics with numbers and text?

STEP 1: Add the section
At your desired position, click "Add section" and choose the Stats counter section.

You will see:

A Header block
A Stat list block that contains 4 Stat blocks.

Now let’s set them up.

STEP 2: Adjust the header

By default, there is a Subheading and a Heading block inside the Header block. Click on each, enter your content, and add Text highlight if you want some styles.

⚠️ Note: You cannot delete this Header block, just click the eye 👁️ icon to hide if you don't need it.

STEP 3: Customize each Stat block.

Now, it's time for the Stat list block. By default, you see 4 Stat blocks inside. Click on one of them to edit the sub-blocks:

Block's name	How to edit?
Counter	Enter your destination number to Counter field. For example: 30+, 200. Adjust Duration to control how fast the number counts up.
Heading	Enter your text into the Heading field Adjust the Heading tag, Font size. Add a Highlight effect if needed
Text	Similar to Heading block.

Feel free to add, delete, or arrange the position of the sub-blocks. You can also add other blocks such as Button, Countdown timer, and more.
Repeat the steps for other Stat blocks until you have enough counter groups.

STEP 4: Click “Save” when done.

🤔 How to display the Stats as a carousel?

Like this:

STEP 1: Prepare your section

Before starting, complete the "How to create a basic Stats counter section?" guide to have your Stats Counter section ready.

STEP 2: Turn on Carousel mode

Tap on the Stat list block to open its settings panel
Go to Display Type (Desktop/Mobile) > choose Carousel

STEP 3: Adjust the Items per row

Still in the Stat list's setting panel, find the Items per row (Desktop/Tablet/Mobile) setting, and adjust the number.

⚠️ Note: Make sure the Items per row are smaller than the total number of Stat blocks you have for the Carousel to work.

For example: Under the Stat list blocks, you have 4 Stat blocks, then Items per row should be 1,2, or 3.

STEP 4: (Optional) Adjust the Carousel Behavior

In Stat list block > Find the Carousel behavior group:

Turn on Show navigation arrows.
Adjust Auto-play every to set the slide duration (set to 0 to disable).

STEP 5: Click “Save” when done.

🤔 What other customization options can you give your Image with text?

For the whole Stats counter section:
✨ Change the direction of the blocks inside:	Click on the Stats counter section, under the Section Layout settings group, and in Desktop/ Mobile direction, choose Vertical or Horizontal.
✨Use an image as the background	Click on the Stats counter section, under the Appearance settings group, you can: Find Background media and choose Image. Add an image to the Desktop image. If you need a different image for mobile, add it to the Mobile image. Or else, leave it blank.
For a single Header or Stat block:
✨Adjust the layouts for the items inside	Click on the Header or Stat block, under the Layout setting group, choose Vertical or Horizontal for your Desktop and Mobile.
✨ Adjust the alignment for the items inside	Click on the Header or Stat block, under the Alignment setting group, from here you can change both Vertical and Horizontal alignment for Desktop and Mobile.
✨ Adjust the width of the whole group	Click on the Header or Stat block, under the Size setting group, from here you can choose your group's width in relation with the whole section. Fit: This option will auto-adjust your Group's width according to the number of the 1st level blocks Custom: You can adjust the width of the group on both desktop and mobile.
✨ Add a link to the whole group	Click on the Header or Stat block > under the Link setting group, assign a link, and turn on Open this link in a new tab if needed.

Need help? Contact our support team at Omni Themes Support