Überblick

Manche Themes aktualisieren das Symbol nicht automatisch, und dieser Leitfaden führt dich Schritt für Schritt durch die Behebung mit ein wenig benutzerdefiniertem Code. Befolge die folgenden Schritte, damit alles korrekt synchronisiert wird. Hier ein Beispiel, wie diese Abweichung aussieht:

Wichtige Schritte, bevor du beginnst!

Um das Problem mit dem Warenkorb-Symbol zu beheben, musst du den Klassennamen deines Warenkorb-Symbols ermitteln. Jedes Theme ist anders, und dieser Schritt stellt sicher, dass der Code speziell für deinen Store funktioniert.

1. Verwende die Chrome Developer Tools

Jedes Theme ist anders, daher musst du die Chrome Developer Tools (Untersuchen) verwenden, um den Klassennamen deines Warenkorb-Symbols zu ermitteln.

Klicke in Google Chrome mit der rechten Maustaste auf das Warenkorb-Symbol in deinem Storefront und wähle Untersuchen.
Finde das HTML-Element für dein Warenkorb-Symbol (z. B. <span class="cart-count-bubble">).
Brauchst du Hilfe mit den Chrome Developer Tools? Sieh dir diesen Leitfaden mit Schritt-für-Schritt-Anweisungen an.

2. Hol dir Hilfe (optional)

Wenn du die Klasse deines Warenkorb-Symbols nicht finden kannst oder nicht weiterkommst, keine Sorge! Du hast Optionen:

Kontaktiere deinen Theme-Entwickler: Er kennt dein Theme am besten und kann dir helfen, die richtige Klasse zu finden.
Beauftrage einen Shopify Expert: Wenn du zusätzliche Unterstützung brauchst, bietet Shopify ein Verzeichnis vertrauenswürdiger Experten, die dir helfen können. Hier findest du einen Shopify Expert.

🚧 Haftungsausschluss für benutzerdefinierten Code

Der unten bereitgestellte Beispielcode ist nur eine Vorlage – er funktioniert nicht, wenn du ihn direkt kopierst und einfügst. Du musst den Platzhalter-Klassennamen (z. B. .cart-count-bubble > span) durch den spezifischen Klassennamen deines Warenkorb-Symbols ersetzen.

Schritt-für-Schritt-Lösung

Wir haben diesen Prozess in drei Lösungsstufen unterteilt, beginnend mit der einfachsten Lösung (Level 1). Jede Stufe baut auf der vorherigen auf – probiere zuerst Level 1 und gehe nur bei Bedarf zu Level 2 oder 3 über.

Schritt 1: Benutzerdefinierten Code in Upcart hinzufügen

Da wir zunächst etwas benutzerdefinierten HTML-Code im Upcart-Editor hinzufügen müssen, bereiten wir diesen Bereich vor:

Gehe zu Upcart Editor > Settings und öffne dann den Tab Custom HTML (hinter More settings, wenn er nicht in die Tab-Zeile passt).
Setze die Position auf Scripts (Before Load).
Füge hier deinen bearbeiteten Code ein (Beispiele für jede Stufe findest du unten).

So sieht das aus:

Upcart-Custom-HTML-Einstellungen mit der HTML-Position auf Scripts Before Load gesetzt

Schritt 2: Die Lösung je nach Stufe anwenden

Level 1 (Einfach)

Wenn der Warenkorb lädt, summiert dieses Skript die Mengen der Warenkorb-Positionen und schreibt den Wert in das Zähler-Element innerhalb der Warenkorb-Bubble deines Themes. Es eignet sich für Themes, bei denen der Zähler in einem einfachen verschachtelten Element liegt (zum Beispiel .cart-count-bubble > span). Nicht vergessen

Ersetze .cart-count-bubble > span durch die Klasse deines Warenkorb-Symbols.
Teste es nach dem Hinzufügen des Codes in deinem Storefront.

Einfügen des Level-1-Zählerskripts in Upcart Custom HTML mit dem cart-count-bubble-Selektor

Beispielcode für Level 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>

Level 2 (Mittel)

Wenn Level 1 nicht funktioniert hat, ersetzt dein Theme möglicherweise das gesamte HTML des Warenkorb-Symbols, wenn sich der Zähler ändert. Diese Version baut das Symbol-Markup für den leeren bzw. nicht leeren Warenkorbzustand neu auf, damit Zähler und Symbol synchron bleiben. Nicht vergessen

Ersetze #cart-icon-bubble-custom durch den Wrapper-Selektor des Warenkorb-Symbols deines Themes.
Teste es nach dem Speichern.

Beispielcode für Level 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>

Hinweis zu älteren Versionen: window.upcartOnCartLoaded-Callbacks funktionieren weiterhin, sind aber veraltet und protokollieren Konsolenwarnungen. Verwende upcartSubscribeCartLoaded für alle neuen Skripte.Beachte, dass event.cart keine item_count-Eigenschaft hat – die obigen Skripte ermitteln die Gesamtzahl mit event.cart.items.reduce((total, item) => total + item.quantity, 0) und übergeben sie als itemCount. Ältere Kopien dieser Snippets, die cart.item_count interpolieren, werfen einen ReferenceError und aktualisieren das Symbol stillschweigend nie.

Level 3 (Fortgeschritten)

Wenn dein Theme separates Warenkorb-Symbol-Markup für Desktop und Mobil verwendet, führe dieselbe Update-Logik für zwei Selektoren aus, damit jeder Viewport das korrekte HTML und den korrekten Zähler erhält. Nicht vergessen

Ersetze #cart-icon-bubble-custom-desktop und #cart-icon-bubble-custom-mobile durch die Klassen deines Themes.
Teste gründlich sowohl in der Desktop- als auch in der Mobilansicht.

Einfügen des Level-3-Skripts in Upcart Custom HTML mit separaten Desktop- und Mobil-Warenkorb-Symbol-Selektoren

Beispielcode für Level 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>

Funktioniert es immer noch nicht?

Wenn keine dieser Stufen das Problem löst, keine Sorge – du hast noch Möglichkeiten! Das bedeutet wahrscheinlich, dass dein Theme eine fortgeschrittenere Anpassung erfordert. Das kannst du als Nächstes tun:

Wende dich an deinen Theme-Entwickler.
Beauftrage einen Shopify Expert, der eine maßgeschneiderte Lösung für deinen Store erstellen kann.

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Menge/Zähler am Warenkorb-Symbol wird nicht aktualisiert

Überblick

Wichtige Schritte, bevor du beginnst!

1. Verwende die Chrome Developer Tools

2. Hol dir Hilfe (optional)

🚧 Haftungsausschluss für benutzerdefinierten Code

Schritt-für-Schritt-Lösung

Schritt 1: Benutzerdefinierten Code in Upcart hinzufügen

Schritt 2: Die Lösung je nach Stufe anwenden

Level 1 (Einfach)

Beispielcode für Level 1

Level 2 (Mittel)

Beispielcode für Level 2

Level 3 (Fortgeschritten)

Beispielcode für Level 3

Funktioniert es immer noch nicht?

​Überblick

​Wichtige Schritte, bevor du beginnst!

​1. Verwende die Chrome Developer Tools

​2. Hol dir Hilfe (optional)

​🚧 Haftungsausschluss für benutzerdefinierten Code

​Schritt-für-Schritt-Lösung

​Schritt 1: Benutzerdefinierten Code in Upcart hinzufügen

​Schritt 2: Die Lösung je nach Stufe anwenden

​Level 1 (Einfach)

​Beispielcode für Level 1

​Level 2 (Mittel)

​Beispielcode für Level 2

​Level 3 (Fortgeschritten)

​Beispielcode für Level 3

​Funktioniert es immer noch nicht?

Überblick

Wichtige Schritte, bevor du beginnst!

1. Verwende die Chrome Developer Tools

2. Hol dir Hilfe (optional)

🚧 Haftungsausschluss für benutzerdefinierten Code

Schritt-für-Schritt-Lösung

Schritt 1: Benutzerdefinierten Code in Upcart hinzufügen

Schritt 2: Die Lösung je nach Stufe anwenden

Level 1 (Einfach)

Beispielcode für Level 1

Level 2 (Mittel)

Beispielcode für Level 2

Level 3 (Fortgeschritten)

Beispielcode für Level 3

Funktioniert es immer noch nicht?