Shopify-Warenkorbschublade öffnet sich nicht: AJAX-, Theme- und App-Korrekturen (2026)

Schnelllösung: Reduzieren Sie den Skriptdruck rund um den Einkaufswagen

Identifizieren Sie zunächst, welcher Warenkorbpfad fehlschlägt

Beginnen Sie nicht mit der Bearbeitung von Liquid. Reproduzieren Sie das Problem an vier Stellen: Produktseite, Sammlungsraster, vorgestelltes Produkt auf der Startseite und Schnellansichtsmodalität. Viele Shopify-Shops verfügen für jede Oberfläche über einen separaten Add-to-Cart-Code. Die Schublade arbeitet möglicherweise an der Produktvorlage, während Sammelkarten weiterhin direkt auf der Warenkorbseite veröffentlicht werden.

Öffnen Sie DevTools, klicken Sie auf „Zum Warenkorb hinzufügen“ und sehen Sie sich die Registerkarte „Netzwerk“ an. Ein gesunder AJAX-Flow sendet normalerweise an /cart/add.js, erhält eine erfolgreiche Antwort, ruft aktualisierte Warenkorbabschnitte ab oder /cart.jsund öffnet die Schublade. Eine Weiterleitung zu /cart bedeutet, dass das Formular die normale HTML-Übermittlung verwendet oder der AJAX-Handler keine Verbindung hergestellt hat.

Wenn das Hinzufügen zum Warenkorb funktioniert, Einkäufe aber später immer noch verschwinden, vergleichen Sie dies mit dem Shopify zum Warenkorb hinzufügen, aber keine Verkaufscheckliste und die Anleitung zum Debuggen der Checkout-Schaltfläche.

Überprüfen Sie die Einstellungen des Themenwagens, bevor Sie den Code berühren

In vielen Online Store 2.0-Themes wird die Schublade durch eine Theme-Einstellung gesteuert. Gehen Sie zu „Onlineshop“, „Anpassen“, „Themeneinstellungen“, „Warenkorb“ und bestätigen Sie, dass der Warenkorbtyp auf „Schublade“ oder „Benachrichtigung“ anstelle von „Seite“ eingestellt ist. Speichern, Vorschau und Test in einem Inkognito-Fenster.

Dann duplizieren Sie das Live-Thema und zeigen Sie eine Vorschau eines unveränderten Dawn-Themas an. Wenn Dawn die Schublade öffnet und Ihr Live-Theme dies nicht tut, liegt das Problem am Theme-Code oder an einer installierten Storefront-App. Wenn Dawn auch zum Warenkorb weiterleitet, suchen Sie nach Einstellungen, Produktverfügbarkeit oder einer Schaltfläche zum Erstellen von Seiten, die absichtlich weiterleitet.

Geschäfte, die mehrere Warenkorb-Tools installiert und entfernt haben, sollten auch das ausführen Checkliste für die Bereinigung von App-Resten. Alte Snippets können noch lange nach dem Verschwinden der App auf Warenkorbereignisse warten.

Korrigieren Sie den AJAX-Add-to-Cart- und Drawer-Refresh-Flow

Eine Schublade benötigt zwei separate Aufgaben: das Element hinzufügen und dann die aktualisierte Schublade rendern. Entwickler erledigen oft die erste Aufgabe und vergessen die zweite. Das Ergebnis ist eine Warenkorbanzahl, die sich erst nach der Aktualisierung ändert, eine Schublade, die sich leer öffnet, oder eine Produktkarte, die Käufer zur Warenkorbseite weiterleitet.

async function addToCart(form) {
  const response = await fetch('/cart/add.js', {
    method: 'POST',
    body: new FormData(form),
    headers: { Accept: 'application/json' },
  });

  if (!response.ok) throw new Error('Add to cart failed');

  const cart = await fetch('/cart.js').then((res) => res.json());
  document.dispatchEvent(new CustomEvent('cart:refresh', { detail: { cart } }));
  document.dispatchEvent(new CustomEvent('cart:open'));
}

Ihr Theme verwendet möglicherweise andere Ereignisnamen. Dawn-basierte Themes verfügen oft über eine eigene Warenkorb-Benachrichtigung oder Warenkorb-Schublade-Klasse. Suchen Sie nach Ihrem Thema Warenkorb:Aktualisieren, Warenkorb:offen, Wagen-Schublade, Warenkorbbenachrichtigung, und /cart/add.jsund behalten Sie dann einen konsistenten Ereignispfad bei.

Seitenersteller und App-Einbettungen können die Schublade umgehen

GemPages, PageFly, benutzerdefinierte Landingpages, Schnellkaufabschnitte und Bundle-Widgets stellen möglicherweise ihre eigene Schaltfläche zum Hinzufügen zum Warenkorb dar. Diese Schaltflächen können so konfiguriert werden, dass sie zum Warenkorb weiterleiten, einen Mini-Warenkorb öffnen oder ein Hilfsskript aufrufen. Wenn nur Seitenerstellungsseiten fehlschlagen, korrigieren Sie zunächst die Elementeinstellung, bevor Sie den Designcode neu schreiben.

Deaktivieren Sie App-Einbettungen in einem doppelten Theme und testen Sie es dann erneut. Aktivieren Sie sie nacheinander wieder, beginnend mit Einkaufswagenschubladen, Gratisgeschenken, Paketen, Abonnements, Upsells, Suche, Personalisierung, Chat und Pixeln. Der gleiche Debugging-Ablauf im App-Skripte verlangsamen den Shopify-Leitfaden .

Für eine umfassendere Skriptbereinigung verwenden Sie die Leitfaden zur Auswirkung von Skripten von Drittanbietern, Anleitung zur Bereinigung nicht verwendeter Codes, und vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Manuelle Checkliste zum Debuggen der Shopify-Warenkorbschublade

Googles Interaktion mit der Next Paint-Anleitung ist hier nützlich, da eine verzögerte Warenkorbschublade häufig ein Problem mit der Reaktionsfähigkeit darstellt. Wenn mobile Taps verzögert sind, lesen Sie die Shopify INP-Leitfaden und nach der Skriptbereinigung erneut testen.

Wenn die Schublade Teil eines größeren Einnahmeverlusts ist, verwenden Sie professionelle Shopify-Geschwindigkeitsoptimierung oder Thunder-Preise um zu entscheiden, ob App-Automatisierung oder Expertenbereinigung der schnellere Weg ist.

FAQ