> ## 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. # La quantité/le compteur de l'icône du panier ne se met pas à jour > Cet article explique comment corriger la quantité de l'icône de votre panier lorsqu'elle ne se met pas à jour dans Upcart.
# Aperçu
Certains thèmes ne mettent pas à jour l'icône automatiquement, et ce guide vous expliquera comment corriger cela à l'aide d'un peu de code personnalisé. Suivez les étapes ci-dessous pour que tout se synchronise correctement. **Voici un exemple de ce à quoi ressemble ce décalage :** Panier coulissant Upcart affichant Cart 2 alors que la bulle de l'icône du panier du thème affiche toujours 1 ***
# Étapes importantes avant de commencer !
Pour corriger le problème de l'icône du panier, vous devrez identifier le nom de classe de votre icône de panier. Chaque thème est différent, et cette étape garantit que le code fonctionne spécifiquement pour votre boutique.
### **1. Utilisez les outils de développement Chrome**
Chaque thème est différent, vous devrez donc utiliser les outils de développement Chrome (Inspecter) pour identifier le nom de classe de votre icône de panier. * Faites un clic droit sur l'icône de votre panier sur votre boutique en ligne et sélectionnez **Inspect** dans Google Chrome. * Trouvez l'élément HTML de votre icône de panier (par exemple, **``**). * **Besoin d'aide pour utiliser les outils de développement Chrome ?** Consultez [ce guide](https://developer.chrome.com/docs/devtools/overview/) pour des instructions étape par étape.
### **2. Demandez de l'aide (facultatif)**
Si vous ne parvenez pas à localiser la classe de votre icône de panier ou si vous vous sentez bloqué, pas d'inquiétude ! Vous avez des options : * **Contactez le développeur de votre thème :** il connaît votre thème mieux que quiconque et peut vous aider à trouver la bonne classe. * **Engagez un expert Shopify :** si vous avez besoin d'une assistance supplémentaire, Shopify dispose d'un annuaire d'experts de confiance qui peuvent vous aider. [Trouvez un expert Shopify ici](https://experts.shopify.com/).
## 🚧 **Avertissement sur le code personnalisé**
L'exemple de code fourni ci-dessous n'est qu'un modèle, **il ne fonctionnera pas si vous le copiez-collez directement**. Vous devez remplacer le nom de classe fictif (par exemple, **`.cart-count-bubble > span`**) par le nom de classe spécifique de votre icône de panier. ***
# Correction étape par étape
Nous avons divisé ce processus en trois niveaux de corrections, en commençant par la solution la plus simple (niveau 1). Chaque niveau s'appuie sur le précédent : essayez d'abord le niveau 1, puis passez au niveau 2 ou 3 uniquement si nécessaire.
## **Étape 1 : ajoutez du code personnalisé dans Upcart**
Tout d'abord, comme nous devrons ajouter du code HTML personnalisé dans l'éditeur Upcart, préparons cette section : 1. Allez dans **Upcart Editor > Settings**, puis ouvrez l'onglet **Custom HTML** (derrière **More settings** s'il ne tient pas sur la rangée d'onglets). 2. Définissez l'emplacement sur **Scripts (Before Load)**. 3. Collez votre code modifié ici (nous fournirons des exemples pour chaque niveau ci-dessous). Voici à quoi cela ressemble : Paramètres Custom HTML d'Upcart avec l'emplacement HTML défini sur Scripts Before Load ***
# **Étape 2 : appliquez la correction selon le niveau**
## Niveau 1 (basique)
Lorsque le panier se charge, ce script additionne les quantités des articles de ligne du panier et écrit le résultat dans l'élément de compteur à l'intérieur de la bulle du panier de votre thème. Il convient aux thèmes où le compteur se trouve dans un élément imbriqué simple (par exemple, `.cart-count-bubble > span`). **N'oubliez pas** * Remplacez **`.cart-count-bubble > span`** par la classe de votre icône de panier. * Testez-le sur votre boutique en ligne après avoir ajouté le code. Collage du script de compteur de niveau 1 dans le Custom HTML d'Upcart en utilisant le sélecteur cart-count-bubble
## Exemple de code pour le niveau 1
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **Remarque sur l'ancien système :** les rappels `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez `upcartSubscribeCartLoaded` pour tous les nouveaux scripts. Notez que `event.cart` n'a pas de propriété `item_count` ; utilisez `event.cart.items.reduce((total, item) => total + item.quantity, 0)` pour calculer le nombre total d'articles. ***
## Niveau 2 (intermédiaire)
Si le niveau 1 n'a pas fonctionné, votre thème remplace peut-être l'intégralité du HTML de l'icône du panier lorsque le compteur change. Cette version reconstruit le balisage de l'icône pour les états de panier vide et non vide afin que le compteur et l'icône restent synchronisés. **N'oubliez pas** * Remplacez **`#cart-icon-bubble-custom`** par le sélecteur du conteneur de l'icône de panier de votre thème. * Testez après l'enregistrement. Collage du script d'icône de panier de niveau 2 dans le Custom HTML d'Upcart en utilisant le sélecteur cart-icon-bubble-custom
### Exemple de code pour le niveau 2
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **Remarque sur l'ancien système :** les rappels `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez `upcartSubscribeCartLoaded` pour tous les nouveaux scripts. Notez que `event.cart` n'a **pas** de propriété `item_count` — les scripts ci-dessus calculent le total avec `event.cart.items.reduce((total, item) => total + item.quantity, 0)` et le transmettent en tant que `itemCount`. Les anciennes copies de ces extraits qui interpolent `cart.item_count` génèrent une `ReferenceError` et ne mettent jamais l'icône à jour, sans erreur visible. ***
## Niveau 3 (avancé)
Si votre thème utilise un balisage d'icône de panier **distinct** pour l'ordinateur et le mobile, exécutez la même logique de mise à jour sur deux sélecteurs afin que chaque fenêtre d'affichage reçoive le bon HTML et le bon compteur. **N'oubliez pas** * Remplacez **`#cart-icon-bubble-custom-desktop`** et **`#cart-icon-bubble-custom-mobile`** par les classes de votre thème. * Testez soigneusement sur les vues ordinateur et mobile. Collage du script de niveau 3 dans le Custom HTML d'Upcart avec des sélecteurs d'icône de panier distincts pour ordinateur et mobile
### Exemple de code pour le niveau 3
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}} ``` **Remarque sur l'ancien système :** les rappels `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et génèrent des avertissements dans la console. Utilisez `upcartSubscribeCartLoaded` pour tous les nouveaux scripts. Notez que `event.cart` n'a **pas** de propriété `item_count` — les scripts ci-dessus calculent le total avec `event.cart.items.reduce((total, item) => total + item.quantity, 0)` et le transmettent en tant que `itemCount`. Les anciennes copies de ces extraits qui interpolent `cart.item_count` génèrent une `ReferenceError` et ne mettent jamais l'icône à jour, sans erreur visible. ***
# Toujours pas de résultat ?
Si aucun de ces niveaux ne résout le problème, pas d'inquiétude, vous avez encore des options ! Cela signifie probablement que votre thème nécessite une personnalisation plus avancée. **Voici ce que vous pouvez faire ensuite :** * Contactez le développeur de votre thème pour obtenir de l'aide. * Engagez un [expert Shopify](https://www.shopify.com/partners/directory) qui pourra créer une solution personnalisée adaptée à votre boutique.