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:

Go to Upcart Editor > Settings, then open the Custom HTML tab (behind More settings if it doesn’t fit on the tab row).
Set the location as Scripts (Before Load).
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 totals the quantities on the cart’s line items and writes that 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>

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">${itemCount}</span><span class="visually-hidden">${itemCount} 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 has no item_count property — the scripts above derive the total with event.cart.items.reduce((total, item) => total + item.quantity, 0) and pass it in as itemCount. Older copies of these snippets that interpolate cart.item_count throw a ReferenceError and silently never update the icon.

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 (${itemCount})</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">${itemCount}</span><span class="visually-hidden">${itemCount} item</span></div>`;  
    }  
}  
  
window.upcartSubscribeCartLoaded((event) => {  
    const itemCount = event.cart.items.reduce((total, item) => total + item.quantity, 0);  
    updateCartCount(itemCount);  
});  
})();  
</script>

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.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Cart icon quantity/counter not updating

Overview

Important Steps Before You Start!

1. Use Chrome Developer Tools

2. Reach Out for Help (Optional)

🚧 Custom Code Disclaimer

Step by Step Fix

Step 1: Add Custom Code in Upcart

Step 2: Apply the fix by level

Level 1 (Basic)

Example Code for Level 1

Level 2 (Moderate)

Example Code for Level 2

Level 3 (Advanced)

Example Code for Level 3

Still not working?

​Overview

​Important Steps Before You Start!

​1. Use Chrome Developer Tools

​2. Reach Out for Help (Optional)

​🚧 Custom Code Disclaimer

​Step by Step Fix

​Step 1: Add Custom Code in Upcart

​Step 2: Apply the fix by level

​Level 1 (Basic)

​Example Code for Level 1

​Level 2 (Moderate)

​Example Code for Level 2

​Level 3 (Advanced)

​Example Code for Level 3

​Still not working?

Overview

Important Steps Before You Start!

1. Use Chrome Developer Tools

2. Reach Out for Help (Optional)

🚧 Custom Code Disclaimer

Step by Step Fix

Step 1: Add Custom Code in Upcart

Step 2: Apply the fix by level

Level 1 (Basic)

Example Code for Level 1

Level 2 (Moderate)

Example Code for Level 2

Level 3 (Advanced)

Example Code for Level 3

Still not working?