How to add cart item counter on header cart icon in Shopify

One of the most important aspects of an e-commerce website is the user experience. It’s important that customers are able to find the products they want quickly and easily, and that the checkout process is as seamless as possible. One small but important detail that can help improve the user experience is the addition of a cart item counter on the header cart icon. This makes it easy for customers to see how many items they have in their cart at any time, and it also adds a professional touch to your website.

In this guide, we’ll show you how to add a cart item counter on the header cart icon in Shopify. We’ll be using the Prestige theme as an example, but the process is similar for other themes as well. If you’re using a different theme and need help, our team of expert developers at RS Digitals is always ready to help.

Step 1: Open the theme header.liquid file

The first step is to open the theme header.liquid file. This file controls the layout and content of the header section of your website. To open it, go to the Online Store section of your Shopify admin, then click on Themes. Find the theme you’re using, and click on the Actions button, then click on Edit code. In the template folder, you will find the header.liquid file, open it.

Step 2: Find the existing code

Once you have the header.liquid file open, look for the following code:

<a href="{{ routes.cart_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
  <span class="hidden-tablet-and-up">{%- render 'icon' with 'cart' -%}</span>
  <span class="hidden-phone">{%- render 'icon' with 'cart-desktop' -%}</span>
  <span class="Header__CartDot {% if cart.item_count > -1 %}is-visible{% endif %}">{{cart.item_count}}</span>
</a>

This is the code that controls the header cart icon. The last line of the code –

<span class="Header__CartDot {% if cart.item_count > -1 %}is-visible{% endif %}">{{cart.item_count}}</span>

– is what displays the current number of items in the cart.

Step 3: Replace the existing code

Replace the existing code with the following code:

<a href="{{ routes.cart_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
  <span class="hidden-tablet-and-up">{%- render 'icon' with 'cart' -%}</span>
  <span class="hidden-phone">{%- render 'icon' with 'cart-desktop' -%}</span>
  <span class="cart-count">{{ cart.item_count }}</span>    
</a>

Step 4: Open the custom.js file and paste this code.

In this step, you will open the custom.js file and paste the following code at the bottom of the file:

function updateCartCount() {
    fetch('/cart.js')
        .then(function(response) {
            return response.json();
        })
        .then(function(cart) {
            // Update the cart item count on the page
            document.querySelector('.cart-count').innerHTML = cart.item_count;
        });
}
setInterval(updateCartCount,1000);

This code updates the cart item count every 1000 milliseconds.

Step 5: Add styling for the cart item counter.

Finally, you can add styling to the cart item counter by adding the following CSS code to your stylesheet:

.cart-count{
  position: absolute;
  background-color: #4c865d;
  color: white;
  top: -7px;
  right:-10px;
  display: block !important;
  padding: 4px 0px 0px 0px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  text-align: center;
}

This CSS code sets the position, background color, text color, and other properties of the cart item counter. You can customize this code to match your website’s design.

And that’s it! You have successfully added a cart item counter to your header cart icon in Shopify. This small but important detail will improve the user experience for your customers and make your website look more professional. If you have any issues or need help, our team of expert developers at RS Digitals is always here to assist you.