> ## Documentation Index > Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt > Use this file to discover all available pages before exploring further. # Aantal/teller op het winkelwagenpictogram wordt niet bijgewerkt > Dit artikel legt uit hoe je het aantal op je winkelwagenpictogram herstelt wanneer dit niet wordt bijgewerkt in Upcart.
# 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:** Upcart-drawer toont Cart 2 terwijl de bubble op het themawinkelwagenpictogram nog steeds 1 weergeeft ***
# 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. **``**). * **Hulp nodig bij het gebruik van Chrome Developer Tools?** Bekijk [deze gids](https://developer.chrome.com/docs/devtools/overview/) 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](https://experts.shopify.com/).
## 🚧 **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: 1. Ga naar **Upcart Editor > Settings** en open het tabblad **Custom HTML** (achter **More settings** als het niet op de tabbladrij past). 2. Stel de locatie in op **Scripts (Before Load)**. 3. 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
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **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; gebruik `event.cart.items.reduce((total, item) => total + item.quantity, 0)` om het totale aantal items te berekenen. ***
## 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. Het niveau 2-winkelwagenpictogramscript plakken in Upcart Custom HTML met de cart-icon-bubble-custom-selector
### Voorbeeldcode voor niveau 2
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **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
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **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. ***
# 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](https://www.shopify.com/partners/directory) in die een aangepaste oplossing op maat van je winkel kan maken.