Counter number showcase

The section is designed to visually highlight key figures or achievements that represent your brand’s success, growth, or credibility.

It displays numbers that automatically count up when the section appears on the screen, creating an engaging and dynamic visual effect.

This section is ideal for presenting statistics, milestones, or performance indicators — such as years in business, products sold, satisfied customers, or awards earned. By turning data into a visual element, it helps convey trust and authority in a simple, impactful way.

On the storefront, the Counter Number Showcase adds an interactive and professional touch to your storytelling. It draws attention to important facts while maintaining a clean and minimal layout that fits seamlessly into your brand’s visual narrative.

In essence, this section allows you to transform numbers into part of your story, helping customers quickly grasp your accomplishments and the scale of your brand’s impact.

Location: Sections -> Templates -> Storytelling: Counter number showcase

---

Counter number showcase – Options Overview

Option	Values / Description
Heading
Subheading	Adds a small line of text above the main heading to introduce the section.
Heading	The main title displayed above the counters.
Counter number showcase	Defines the name or label of the section for internal reference.
Description	Adds supporting text to describe the meaning or purpose of the counters.
Heading alignment	Left, Center – Aligns the heading and text content.
Layout
Top spacing	None, Small, Medium, Normal – Adjusts the top margin of the section.
Width	Default, Boxed, Wide – Controls section width. The Wide option applies to screens 1440px and larger.
Number of columns	2–4 – Defines how many counters are displayed per row on desktop.
Number of columns on tablet	2–5 – Defines how many counters are displayed per row on tablet.
Text align	Left, Center – Adjusts text alignment within each counter block.
Icon width	20–100px – Sets the display width of icons in each counter.
Underline on hover	Adds an underline effect to headings or links when hovered.
Dividing line
Show	Displays or hides a horizontal line to visually separate the section.
Background
Background	Hide, Color, Gradient, Image – Defines the background style for the section.
Colors
Base	Sets the main color tone for the section.
Accent	Defines the highlight or accent color for active elements.
Lines	Adjusts the color of divider lines or subtle design elements.

Counter – options overview

Each Counter subsection represents one individual statistic or number block. You can add as many counters as needed to highlight multiple achievements or data points. Each counter can include icons, numbers, and labels with flexible formatting for both integers and decimals.

Option	Values / Description
Icon name	Selects the icon displayed above or beside the counter number.
Heading	The title or label describing what the number represents.
Description	Short explanatory text providing context for the counter.
Link	Adds a hyperlink to make the counter clickable.
Counter
Counter start	Integer – The initial number from which the counter animation begins.
Counter end	Integer – The target number at which the counter animation stops.
Decimal places	Defines the number of decimal digits shown.
Use grouping	Enables or disables digit grouping (e.g., 1,000 instead of 1000).
Separator	Defines the character used for digit grouping (e.g., comma or space).
Decimal	Defines the symbol for decimal separation (e.g., period or comma).
Prefix	Adds a symbol or text before the number (e.g., “$” or “+”).
Suffix	Adds a symbol or text after the number (e.g., “k”, “%”, or “items”).
Colors
Heading	Sets the color of the counter heading.
Heading link hover	Defines the heading color on hover when linked.
Description	Adjusts the color of descriptive text.
Icon	Defines the color of the counter icon.
Counter	Sets the color of the numerical counter display.