Cart Icon Quantity/Counter Not Updating

This article outlines how to fix your cart icon quantity when not updating in Upcart.

Overview

Some themes don’t update the icon automatically and this guide will walk you through how to fix it using a bit of custom code. Follow the steps below to get everything syncing correctly.

Here’s an example of what this mismatch looks like:

---

Important Steps Before You Start!

To fix the cart icon issue, you’ll need to identify the class name of your cart icon. Every theme is different, and this step ensures the code works specifically for your store.

1. Use Chrome Developer Tools

Every theme is different, so you’ll need to use Chrome Developer Tools (Inspect) to identify the class name of your cart icon.

• Right-click your cart icon on your storefront and select Inspect in Google Chrome.
• Find the HTML element for your cart icon (e.g., <span class="cart-count-bubble">).
• Need help using Chrome Developer Tools? Check out this guide for step-by-step instructions.

2. Reach Out for Help (Optional)

If you’re unable to locate your cart icon class or feel stuck, don’t worry! You have options:

• Contact Your Theme Developer: They know your theme best and can help you find the correct class.
• Hire a Shopify Expert: If you need additional support, Shopify has a directory of trusted experts who can assist. Find a Shopify Expert here.

🚧 Custom Code Disclaimer

The example code provided below is just a template, it won’t work if you copy and paste it directly. You must replace the placeholder class name (e.g., .cart-count-bubble > span) with the specific class name for your cart icon.

---

Step by Step Fix

We’ve broken this process into three levels of fixes, starting with the simplest solution (Level 1). Each level builds on the previous one, try Level 1 first, then move to Level 2 or 3 only if needed.

Step 1: Add Custom Code in Upcart

First, since we’ll need to add some custom HTML code in the Upcart editor, let’s get that section ready:

1. Go to Upcart Editor > Settings > Cart Settings > Custom HTML.
2. Set the location as Scripts (Before Load).
3. Paste your edited code here (we’ll provide examples for each level below).

Here’s what this looks like:

---

Step 2: Apply the fix by level

Level 1 (Basic)

When the cart loads, this script reads cart.item_count and writes it into the count element inside your theme’s cart bubble. It fits themes where the count lives in a simple nested element (for example, .cart-count-bubble > span).

Don’t Forget

• Replace .cart-count-bubble > span with your cart icon class.
• Test it on your storefront after adding the code.

Example Code for Level 1

<script>  
window.upcartSubscribeCartLoaded((event) => {  
    const countEl = document.querySelector('.cart-count-bubble > span');  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    countEl.innerText = itemCount;  
});  
</script>

Legacy note: window.upcartOnCartLoaded callbacks still work but are deprecated and log console warnings. Use upcartSubscribeCartLoaded for all new scripts. Note that event.cart does not have an item_count property, use event.cart.items.reduce((total, item) => total + item.quantity, 0) to calculate the total item count.

---

Level 2 (Moderate)

If Level 1 didn’t work, your theme may replace the entire cart icon HTML when the count changes. This version rebuilds the icon markup for empty vs. non-empty cart states so the count and icon stay in sync.

Don’t Forget

• Replace #cart-icon-bubble-custom with your theme’s cart icon wrapper selector.
• Test it after saving.

Example Code for Level 2

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');  
    if (itemCount === 0) {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        iconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${cart.item_count}</span><span class="visually-hidden">${cart.item_count} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Legacy note: window.upcartOnCartLoaded callbacks still work but are deprecated and log console warnings. Use upcartSubscribeCartLoaded for all new scripts. Note that event.cart does not have an item_count property, use event.cart.items.reduce((total, item) => total + item.quantity, 0) to calculate the total item count. The modern version would replace cart.item_count with itemCount calculated from the reduce function, and update the function signature to accept itemCount instead of cart.

---

Level 3 (Advanced)

If your theme uses separate cart icon markup for desktop and mobile, run the same update logic against two selectors so each viewport gets the correct HTML and count.

Don’t Forget

• Replace #cart-icon-bubble-custom-desktop and #cart-icon-bubble-custom-mobile with your theme’s classes.
• Test thoroughly on both desktop and mobile views.

Example Code for Level 3

<script>  
;(() => {  
function updateCartCount(itemCount) {  
    // Desktop  
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');  
    if (itemCount === 0) {  
        desktopIconWrapperEl.innerHTML = `<span>Cart</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span>`;  
    } else {  
        desktopIconWrapperEl.innerHTML = `<span>Cart (${cart.item_count})</span><span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span>`;  
    }  
  
    // Mobile  
    const mobileIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-mobile');  
    if (itemCount === 0) {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart-empty" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M15.75 11.8h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33L28.4 11.8zm0 1h-2.22l-.71 10.67a4 4 0 0 0 3.99 4.27h7.38a4 4 0 0 0 4-4.27l-.72-10.67h-2.22v.63a4.75 4.75 0 1 1-9.5 0zm8.5 0h-7.5v.63a3.75 3.75 0 1 0 7.5 0z"></path></svg></span><span class="visually-hidden">Cart</span>`;  
    } else {  
        mobileIconWrapperEl.innerHTML = `<span class="svg-wrapper"><svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon icon-cart" viewBox="0 0 40 40"><path fill="currentColor" fill-rule="evenodd" d="M20.5 6.5a4.75 4.75 0 0 0-4.75 4.75v.56h-3.16l-.77 11.6a5 5 0 0 0 4.99 5.34h7.38a5 5 0 0 0 4.99-5.33l-.77-11.6h-3.16v-.57A4.75 4.75 0 0 0 20.5 6.5m3.75 5.31v-.56a3.75 3.75 0 1 0-7.5 0v.56zm-7.5 1h7.5v.56a3.75 3.75 0 1 1-7.5 0zm-1 0v.56a4.75 4.75 0 1 0 9.5 0v-.56h2.22l.71 10.67a4 4 0 0 1-3.99 4.27h-7.38a4 4 0 0 1-4-4.27l.72-10.67z"></path></svg></span><span class="visually-hidden">Cart</span><div class="cart-count-bubble"><span aria-hidden="true">${cart.item_count}</span><span class="visually-hidden">${cart.item_count} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

Legacy note: window.upcartOnCartLoaded callbacks still work but are deprecated and log console warnings. Use upcartSubscribeCartLoaded for all new scripts. Note that event.cart does not have an item_count property, use event.cart.items.reduce((total, item) => total + item.quantity, 0) to calculate the total item count. The modern version would replace all cart.item_count references with itemCount calculated from the reduce function, and update the function signature to accept itemCount instead of cart.

---

Still not working?

If none of these levels solve the issue, don’t worry, you’re not out of options! This likely means your theme requires more advanced customization.

Here’s what you can do next:

• Reach out to your theme developer for help.
• Hire a Shopify Expert who can create a custom solution tailored to your store.