Overzicht

Sommige thema’s werken het pictogram niet automatisch bij; deze gids laat je zien hoe je dit oplost met een beetje aangepaste code. Volg de onderstaande stappen om alles correct te laten synchroniseren. Hier is een voorbeeld van hoe deze mismatch eruitziet:

Belangrijke stappen voordat je begint!

Om het probleem met het winkelwagenpictogram op te lossen, moet je de classnaam van je winkelwagenpictogram achterhalen. Elk thema is anders, en deze stap zorgt ervoor dat de code specifiek voor jouw winkel werkt.

1. Gebruik Chrome Developer Tools

Elk thema is anders, dus je moet Chrome Developer Tools (Inspect) gebruiken om de classnaam van je winkelwagenpictogram te vinden.

Klik met de rechtermuisknop op je winkelwagenpictogram in je storefront en selecteer Inspect in Google Chrome.
Zoek het HTML-element van je winkelwagenpictogram (bijv. <span class="cart-count-bubble">).
Hulp nodig bij het gebruik van Chrome Developer Tools? Bekijk deze gids voor stapsgewijze instructies.

2. Vraag om hulp (optioneel)

Kun je de class van je winkelwagenpictogram niet vinden of loop je vast? Geen zorgen! Je hebt opties:

Neem contact op met je themaontwikkelaar: die kent je thema het beste en kan je helpen de juiste class te vinden.
Huur een Shopify Expert in: heb je extra ondersteuning nodig, dan heeft Shopify een directory met vertrouwde experts die kunnen helpen. Vind hier een Shopify Expert.

🚧 Disclaimer over aangepaste code

De onderstaande voorbeeldcode is slechts een sjabloon; deze werkt niet als je hem direct kopieert en plakt. Je moet de placeholder-classnaam (bijv. .cart-count-bubble > span) vervangen door de specifieke classnaam van jouw winkelwagenpictogram.

Stapsgewijze oplossing

We hebben dit proces opgedeeld in drie niveaus van oplossingen, beginnend met de eenvoudigste (niveau 1). Elk niveau bouwt voort op het vorige: probeer eerst niveau 1 en ga alleen door naar niveau 2 of 3 als dat nodig is.

Stap 1: aangepaste code toevoegen in Upcart

Omdat we wat aangepaste HTML-code moeten toevoegen in de Upcart-editor, maken we die sectie eerst klaar:

Ga naar Upcart Editor > Settings en open het tabblad Custom HTML (achter More settings als het niet op de tabbladrij past).
Stel de locatie in op Scripts (Before Load).
Plak hier je aangepaste code (hieronder geven we voorbeelden voor elk niveau).

Zo ziet dat eruit:

Upcart Custom HTML-instellingen met de HTML-locatie ingesteld op Scripts Before Load

Stap 2: pas de oplossing per niveau toe

Niveau 1 (basis)

Wanneer de winkelwagen laadt, telt dit script de aantallen op de regelitems van de winkelwagen op en schrijft dat in het tellerelement binnen de cart bubble van je thema. Het past bij thema’s waar de teller in een eenvoudig genest element staat (bijvoorbeeld .cart-count-bubble > span). Vergeet niet

Vervang .cart-count-bubble > span door de class van jouw winkelwagenpictogram.
Test het op je storefront na het toevoegen van de code.

Het niveau 1-telscript plakken in Upcart Custom HTML met de cart-count-bubble-selector

Voorbeeldcode voor niveau 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>

Niveau 2 (gemiddeld)

Als niveau 1 niet werkte, vervangt je thema mogelijk de volledige HTML van het winkelwagenpictogram wanneer de teller verandert. Deze versie bouwt de pictogram-markup opnieuw op voor de lege en niet-lege winkelwagenstatus, zodat de teller en het pictogram synchroon blijven. Vergeet niet

Vervang #cart-icon-bubble-custom door de wrapper-selector van het winkelwagenpictogram van jouw thema.
Test het na het opslaan.

Voorbeeldcode voor niveau 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>

Opmerking over legacy: window.upcartOnCartLoaded-callbacks werken nog steeds, maar zijn verouderd en tonen waarschuwingen in de console. Gebruik upcartSubscribeCartLoaded voor alle nieuwe scripts.Let op: event.cart heeft geen item_count-eigenschap — de bovenstaande scripts berekenen het totaal met event.cart.items.reduce((total, item) => total + item.quantity, 0) en geven dit door als itemCount. Oudere versies van deze snippets die cart.item_count interpoleren, geven een ReferenceError en werken het pictogram stilletjes nooit bij.

Niveau 3 (geavanceerd)

Als je thema aparte winkelwagenpictogram-markup gebruikt voor desktop en mobiel, voer je dezelfde updatelogica uit op twee selectors, zodat elke viewport de juiste HTML en teller krijgt. Vergeet niet

Vervang #cart-icon-bubble-custom-desktop en #cart-icon-bubble-custom-mobile door de classes van jouw thema.
Test grondig op zowel desktop- als mobiele weergaven.

Het niveau 3-script plakken in Upcart Custom HTML met aparte selectors voor het winkelwagenpictogram op desktop en mobiel

Voorbeeldcode voor niveau 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>

Werkt het nog steeds niet?

Als geen van deze niveaus het probleem oplost, geen zorgen — je hebt nog steeds opties! Dit betekent waarschijnlijk dat je thema geavanceerdere aanpassingen vereist. Dit kun je vervolgens doen:

Neem contact op met je themaontwikkelaar voor hulp.
Huur een Shopify Expert in die een aangepaste oplossing op maat van je winkel kan maken.

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Aantal/teller op het winkelwagenpictogram wordt niet bijgewerkt

Overzicht

Belangrijke stappen voordat je begint!

1. Gebruik Chrome Developer Tools

2. Vraag om hulp (optioneel)

🚧 Disclaimer over aangepaste code

Stapsgewijze oplossing

Stap 1: aangepaste code toevoegen in Upcart

Stap 2: pas de oplossing per niveau toe

Niveau 1 (basis)

Voorbeeldcode voor niveau 1

Niveau 2 (gemiddeld)

Voorbeeldcode voor niveau 2

Niveau 3 (geavanceerd)

Voorbeeldcode voor niveau 3

Werkt het nog steeds niet?

​Overzicht

​Belangrijke stappen voordat je begint!

​1. Gebruik Chrome Developer Tools

​2. Vraag om hulp (optioneel)

​🚧 Disclaimer over aangepaste code

​Stapsgewijze oplossing

​Stap 1: aangepaste code toevoegen in Upcart

​Stap 2: pas de oplossing per niveau toe

​Niveau 1 (basis)

​Voorbeeldcode voor niveau 1

​Niveau 2 (gemiddeld)

​Voorbeeldcode voor niveau 2

​Niveau 3 (geavanceerd)

​Voorbeeldcode voor niveau 3

​Werkt het nog steeds niet?

Overzicht

Belangrijke stappen voordat je begint!

1. Gebruik Chrome Developer Tools

2. Vraag om hulp (optioneel)

🚧 Disclaimer over aangepaste code

Stapsgewijze oplossing

Stap 1: aangepaste code toevoegen in Upcart

Stap 2: pas de oplossing per niveau toe

Niveau 1 (basis)

Voorbeeldcode voor niveau 1

Niveau 2 (gemiddeld)

Voorbeeldcode voor niveau 2

Niveau 3 (geavanceerd)

Voorbeeldcode voor niveau 3

Werkt het nog steeds niet?