{"id":22293,"date":"2025-09-23T13:00:00","date_gmt":"2025-09-23T07:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=22293"},"modified":"2025-10-09T17:08:40","modified_gmt":"2025-10-09T11:38:40","slug":"add-number-counter-section-shopify","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-number-counter-section-shopify\/","title":{"rendered":"How to Add a Number Counter Section in Shopify?"},"content":{"rendered":"\n

Showcasing real digits fosters customer trust. A number counter section is a simple yet smart way to grab attention and build trust. <\/p>\n\n\n\n

In this blog post, learn how to add a number counter section in Shopify using various ways to highlight sales, achievements, or other success numbers.<\/p>\n\n\n\n

Ways to Add an Animated Shopify Number Counter<\/h2>\n\n\n\n

Shopify doesn\u2019t offer a built-in number counter feature, giving you two direct options: Using the Shopify app or creating a custom code. <\/p>\n\n\n\n

The quickest and easiest method is to use a dedicated Shopify app, which can give you ease of use and quicker, better results. It lets you add beautiful, customizable counters to any page without writing a single line of code. <\/p>\n\n\n\n

Alternatively, you can create a custom number counter section using Shopify\u2019s Liquid templating along with CSS animations. The only trouble here is to create a code that brings your vision perfectly into your Shopify theme editors. There are high chances of back and forth with a steep learning curve.  <\/p>\n\n\n\n

Further, we\u2019ll see the steps for both of them.<\/p>\n\n\n\n

Add a Number Counter Section in Shopify (Custom Code)<\/h2>\n\n\n\n

Here are the detailed steps to create a number counter section through code.<\/p>\n\n\n\n

Step 1: Create a New Section<\/h3>\n\n\n\n

In your Shopify admin, go to Online Store > Themes<\/strong> > \u2026(three dots) > Edit code<\/strong>. In the left-hand sidebar, click the Sections<\/strong> to add a new section.<\/p>\n\n\n\n

Save it as animated-number-counter.liquid<\/strong>.<\/p>\n\n\n\n

Step 2: Add the Liquid Code<\/h3>\n\n\n\n

Paste the following code in the newly created animated-number-counter.liquid section.<\/p>\n\n\n\n

{{ 'animated-number-counter.css' | asset_url | stylesheet_tag }}\n{{ 'animated-number-counter.js' | asset_url | script_tag }}\n\n<div class=\"animated-counter-section\">\n  <div class=\"page-width\">\n    {%- for block in section.blocks -%}\n      <div class=\"counter-block\">\n        <div class=\"number-counter\" data-target=\"{{ block.settings.target_number }}\">\n          0\n        <\/div>\n        <p class=\"counter-label\">{{ block.settings.label }}<\/p>\n      <\/div>\n    {%- endfor -%}\n  <\/div>\n<\/div>\n\n{% schema %}\n{\n  \"name\": \"Animated Number Counter\",\n  \"settings\": [],\n  \"blocks\": [\n    {\n      \"type\": \"number\",\n      \"name\": \"Number Item\",\n      \"settings\": [\n        {\n          \"type\": \"text\",\n          \"id\": \"label\",\n          \"label\": \"Label\",\n          \"default\": \"Happy Customers\"\n        },\n        {\n          \"type\": \"number\",\n          \"id\": \"target_number\",\n          \"label\": \"Target Number\",\n          \"default\": 100\n        }\n      ]\n    }\n  ],\n  \"presets\": [\n    {\n      \"name\": \"Animated Number Counter\",\n      \"category\": \"Text\",\n      \"blocks\": [\n        {\n          \"type\": \"number\"\n        },\n        {\n          \"type\": \"number\"\n        },\n        {\n          \"type\": \"number\"\n        }\n      ]\n    }\n  ]\n}\n{% endschema %}\n<\/pre>\n\n\n\n
Step 3: Create a CSS file & JavaScript File<\/h3>\n\n\n\n
Still in the left-hand sidebar, click the Assets <\/strong>and <\/strong>create a new one with the file name animated-number-counter.css.<\/strong><\/p>\n\n\n\n
Then paste the following code into the CSS file we created.<\/p>\n\n\n\n
.animated-counter-section {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 50px 0;\n  text-align: center;\n}\n\n.counter-block {\n  flex: 1;\n  padding: 20px;\n}\n\n.number-counter {\n  font-size: 4rem;\n  font-weight: bold;\n  color: #333;\n  margin-bottom: 10px;\n}\n\n.counter-label {\n  font-size: 1.25rem;\n  color: #666;\n}\n<\/pre>\n\n\n\n
Add one more file and save it as animated-number-counter.js <\/strong>from the Assets section.<\/p>\n\n\n\n
Paste the following JavaScript code into the file.<\/p>\n\n\n\n
document.addEventListener('DOMContentLoaded', () => {\n  const counters = document.querySelectorAll('.number-counter');\n  const speed = 200; \/\/ The higher the number, the slower the speed\n\n  counters.forEach(counter => {\n    const updateCount = () => {\n      const target = +counter.getAttribute('data-target');\n      const count = +counter.innerText;\n      const increment = target \/ speed;\n\n      if (count < target) {\n        counter.innerText = Math.ceil(count + increment);\n        setTimeout(updateCount, 1);\n      } else {\n        counter.innerText = target;\n      }\n    };\n\n    updateCount();\n  });\n});\n<\/pre>\n\n\n\n
Step 4: Add a Section From the Theme Editor<\/h3>\n\n\n\n
Go back to Online Store > Themes<\/strong> ><\/strong> Customize<\/strong>. Click on the Add section<\/strong>, and you will see your new section, Animated Number Counter. <\/strong>Select it to add.<\/p>\n\n\n
\n
\"select<\/figure>\n<\/div>\n\n\n
Then use the sidebar to set number blocks, labels, and targets for the section.<\/p>\n\n\n
\n
\"Editing<\/figure>\n<\/div>\n\n\n
Step 5: Save & Preview <\/h3>\n\n\n\n
Once you add the changes, save them and preview the section in your storefront. This is how it will showcase the number counter with basic details.<\/p>\n\n\n
\n
\"Preview<\/figure>\n<\/div>\n\n\n
Directly Add Shopify Number Counter Section<\/h2>\n\n\n\n
Using the app method, you will be able to create an advanced-level number counter section with extra details and higher customization. <\/p>\n\n\n\n
Similar to this one.  <\/p>\n\n\n
\n
\"Preview<\/figure>\n<\/div>\n\n\n
To get a section exactly like this, opt for the MIT Sections Pro <\/strong>app, which gives a vast area of customization and beautiful in-built features, and the plus point is that no coding is needed.<\/p>\n\n\n\n
Let\u2019s see the steps to use the app to add a number counter section.<\/p>\n\n\n\n
Step 1: Install and Find the Section<\/h3>\n\n\n\n
Install the MIT Sections Pro<\/a> app from the Shopify App Store. Then, from the app dashboard, click Browse sections <\/strong>and search for the Number counter<\/strong> section.<\/p>\n\n\n
\n
\"A<\/figure>\n<\/div>\n\n\n
Here, you get multiple options to choose from, and we will go ahead with the Number counter 1.<\/strong><\/p>\n\n\n\n
Step 2: Click on the “Try for Free” Button<\/h3>\n\n\n\n
Click on the Try for Free <\/strong>button to view this section and see how it will look before buying it.<\/p>\n\n\n\n
\"Selecting<\/figure>\n\n\n\n
During your free trial, you’ll be directed to the MIT demo store. Once you’ve purchased the section, you can add it to your store’s theme.<\/p>\n\n\n\n
To do this, go to My section<\/strong> and click the Apply to theme<\/strong> button on the purchased section. Then, click Customize theme<\/strong> and select your store theme. <\/p>\n\n\n\n
This will take you to the theme editor, where the remaining steps are the same as described below.<\/p>\n\n\n\n
Step 3: Add Section & Save<\/h3>\n\n\n\n
From here, click the Add section <\/strong>and select Meetanshi Number Counter 1. <\/strong><\/p>\n\n\n
\n
\"choosing<\/figure>\n<\/div>\n\n\n
Then, from here, you get 20+ modification options to make changes as you want.<\/p>\n\n\n
\n
\"Editing<\/figure>\n<\/div>\n\n\n
Save <\/strong>the changes and showcase your success numbers in a much attractive manner. <\/p>\n\n\n\n
Shopify Sections App vs. Custom Code: What’s Right for You?<\/h2>\n\n\n\n
The major difference between using a Shopify Sections App and custom coding is ease of use. <\/p>\n\n\n\n
While custom code gives you complete flexibility, it requires strong technical skills or developer assistance, and of course, it\u2019s time-consuming. <\/p>\n\n\n\n
On the other hand, a Shopify Sections App like MIT Sections Pro makes advanced customization accessible to everyone, such as sections that can be edited within a few clicks, high compatibility, a variety of sections, no coding required, and more.<\/p>\n\n\n\n
Here\u2019s why our app is the smarter choice:<\/p>\n\n\n\n