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 :

É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, <span class="cart-count-bubble">).
Besoin d’aide pour utiliser les outils de développement Chrome ? Consultez ce guide 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.

🚧 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 :

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).
Définissez l’emplacement sur Scripts (Before Load).
Collez votre code modifié ici (nous fournirons des exemples pour chaque niveau ci-dessous).

Voici à quoi cela ressemble :

É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.

Exemple de code pour le 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 (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.

Exemple de code pour le 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>

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.

Exemple de code pour le 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>

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 qui pourra créer une solution personnalisée adaptée à votre boutique.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

La quantité/le compteur de l'icône du panier ne se met pas à jour

Aperçu

Étapes importantes avant de commencer !

1. Utilisez les outils de développement Chrome

2. Demandez de l’aide (facultatif)

🚧 Avertissement sur le code personnalisé

Correction étape par étape

Étape 1 : ajoutez du code personnalisé dans Upcart

Étape 2 : appliquez la correction selon le niveau

Niveau 1 (basique)

Exemple de code pour le niveau 1

Niveau 2 (intermédiaire)

Exemple de code pour le niveau 2

Niveau 3 (avancé)

Exemple de code pour le niveau 3

Toujours pas de résultat ?

​Aperçu

​Étapes importantes avant de commencer !

​1. Utilisez les outils de développement Chrome

​2. Demandez de l’aide (facultatif)

​🚧 Avertissement sur le code personnalisé

​Correction étape par étape

​Étape 1 : ajoutez du code personnalisé dans Upcart

​Étape 2 : appliquez la correction selon le niveau

​Niveau 1 (basique)

​Exemple de code pour le niveau 1

​Niveau 2 (intermédiaire)

​Exemple de code pour le niveau 2

​Niveau 3 (avancé)

​Exemple de code pour le niveau 3

​Toujours pas de résultat ?

Aperçu

Étapes importantes avant de commencer !

1. Utilisez les outils de développement Chrome

2. Demandez de l’aide (facultatif)

🚧 Avertissement sur le code personnalisé

Correction étape par étape

Étape 1 : ajoutez du code personnalisé dans Upcart

Étape 2 : appliquez la correction selon le niveau

Niveau 1 (basique)

Exemple de code pour le niveau 1

Niveau 2 (intermédiaire)

Exemple de code pour le niveau 2

Niveau 3 (avancé)

Exemple de code pour le niveau 3

Toujours pas de résultat ?