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 level, so it is recommended to watch Level 1 first and move to the next level only if needed—don’t skip ahead!

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 > Cart Settings > Custom HTML.
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: Watch the Tutorial Videos

Our founder and lead engineer created videos for each level of fixes. These videos explain everything step-by-step and show how the code works.

Level 1 (Basic)

This is the simplest fix—start here (loom link)!

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.upcartOnCartLoaded = (cart) => {
    const countEl = document.querySelector('.cart-count-bubble > span');
    countEl.innerText = cart.item_count;
}
</script>

Note that we do not need the window.upcartOnCartUpdated function because window.upcartOnCartLoaded is called on every update to the cart. This was a mistake in the video.

Level 2 (Moderate)

If Level 1 didn’t work, try this more advanced solution (loom link):

Don't Forget!

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

Don't Forget!

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

Example Code for Level 2

<script>
;(() => {
function updateCartCount(cart) {
    const iconWrapperEl = document.querySelector('#cart-icon-bubble-custom');
    if (cart.item_count === 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.upcartOnCartLoaded = (cart) => {
    updateCartCount(cart);
}
})();
</script>

Note that we do not need the window.upcartOnCartUpdated function because window.upcartOnCartLoaded is called on every update to the cart. This was a mistake in the video.

Level 3 (Advanced)

Still not working? This fix handles both desktop and mobile cart icons (loom link):

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(cart) {
    // Desktop
    const desktopIconWrapperEl = document.querySelector('#cart-icon-bubble-custom-desktop');
    if (cart.item_count === 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 (cart.item_count === 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.upcartOnCartLoaded = (cart) => {
    updateCartCount(cart);
}
})();
</script>

Note that we do not need the window.upcartOnCartUpdated function because window.upcartOnCartLoaded is called on every update to the cart. This was a mistake in the video.