The Number counter section displays animated numbers alongside short descriptions. Each Counter block contains a number, an optional unit, and a title. The numbers animate when the counters come into view on the storefront.
Steps:
Add the Number counter section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the counters.
- Click Add section and select Number counter.
- Move the section to your preferred position and click Save.
The default section preset includes four Counter blocks. You can edit, remove, reorder, or add blocks as needed.
Configure Counter blocks
- Open the Number counter section in the Theme Editor.
- Select an existing Counter block or click Add block > Counter.
- Enter a Title to describe the number.
- Enter the value in Number.
- Use Unit for a suffix such as
%orK+, if needed. - Adjust Duration to control the count-up animation speed (from 0.5 to 5 seconds).
- Repeat for the other Counter blocks and click Save.
Configure the desktop layout
- Open the main Number counter section settings.
- Use Gap spacing to choose Small, Medium, or Large spacing between counters.
- Use Number of columns on desktop to show 1–5 columns.
- Adjust Desktop content alignment to align the counters to the left, center, or right.
- Click Save.
Configure the mobile layout
- Under the mobile settings, choose Number of columns on mobile: 1 column or 2 columns.
- Enable Enable swipe on mobile if you want customers to swipe horizontally through the counters.
- Adjust Mobile content alignment.
- Click Save.
Customize colors and section spacing
- Under Colors, adjust Text, Background, and Background gradient.
- Use Highlight or Highlight gradient to style the counter numbers.
- Under Section, adjust Top padding and Bottom padding.
- Enable Show section divider, Make section full width, or Make section rounded, if needed.
- Click Save.
Preview the Number counter section
- Preview the storefront and scroll to the Number counter section.
- Confirm that each block shows the correct Number, Unit, and Title.
- Check the count-up animation and the desktop column layout.
- Preview mobile to verify the columns, alignment, and swipe behavior.
Section behavior
- Each Counter block displays its own number, unit, title, and animation duration.
- The count-up animation starts when the counter becomes visible in the viewport.
- The section supports 1–5 desktop columns and 1–2 mobile columns.
- Mobile swiping is optional.
- If the visitor prefers reduced motion, the animated count-up is not initiated.
- Concept 6.1.0 also includes a separate Number counter theme block for block-based layouts. Its settings are different from those of the Number counter section described here.
Troubleshooting
- The counter does not appear: Make sure the section is visible and the Counter block has a value in Number.
- The unit is missing: Enter the suffix in the block's Unit field.
- The numbers do not animate: Scroll the section into view and check whether reduced motion is enabled in your browser or operating system.
- The layout looks different on mobile: Check Number of columns on mobile, Mobile content alignment, and Enable swipe on mobile.
- The numbers are not highlighted: Check the Highlight and Highlight gradient colors in the section settings.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please contact our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Quiz Kit Section in Concept
How to Set Up the Portfolio on Scroll Section in Concept