Shopify-Schaltfläche „Zum Warenkorb hinzufügen“ funktioniert nicht: Varianten-, App- und Theme-Korrekturen (2026)

Schnelllösung: Halten Sie die Produktseiten beim Debuggen reaktionsfähig

Beginnen Sie mit dem genauen Fehlermodus

„In den Warenkorb legen funktioniert nicht“ kann fünf verschiedene Dinge bedeuten. Die Schaltfläche reagiert möglicherweise nicht. Es könnte für immer einen Spinner zeigen. Möglicherweise wird die falsche Variante hinzugefügt. Möglicherweise wird erst nach einer Größenänderung ein Fehler angezeigt. Oder es fügt möglicherweise den Artikel hinzu, aktualisiert die Warenkorbschublade jedoch nicht.

Öffnen Sie die Produktseite im Inkognito-Modus, wählen Sie ein einfaches vorrätiges Produkt aus und schauen Sie sich DevTools beim Klicken an. Wenn keine Anfrage ausgelöst wird, ist der Click-Handler oder das Formular defekt. Wenn /cart/add.js gibt 400 zurück, die Nutzlast ist ungültig. Wenn die Anfrage erfolgreich ist, die Warenkorb-Benutzeroberfläche jedoch nicht aktualisiert wird, lesen Sie die Anleitung zum Öffnen der Shopify-Einkaufswagenschublade lässt sich nicht öffnen.

Wenn Käufer etwas in den Warenkorb legen können, aber nicht kaufen, fahren Sie fort mit zum Warenkorb hinzufügen, aber kein Verkauf und Verkehr, aber keine Verkäufe Diagnose.

Überprüfen Sie die Varianten-IDs, bevor Sie die Kasse beschuldigen

Ein Produktformular muss eine gültige Varianten-ID übermitteln. Wenn ein Käufer seine Größe oder Farbe ändert, wird das verborgen id Der Eingang muss aktualisiert werden. Wenn es bei der ersten Variante hängen bleibt, kann das Hinzufügen zum Warenkorb bei ausverkauften Varianten fehlschlagen, die falsche Option hinzufügen oder eine ungültige Anfrage zurückgeben.

<form method="post" action="/cart/add" data-product-form>
  <input type="hidden" name="id" value="{{ selected_or_first_available_variant.id }}">
  <input type="number" name="quantity" value="1" min="1">
  <button type="submit">Zum Warenkorb hinzufügen</button>
</form>

In Astro-Inhalten wird dieses Liquid-Beispiel als Code angezeigt. Stellen Sie in Ihrem Shopify-Theme sicher, dass der Wert aktualisiert wird, wenn sich die ausgewählte Variante ändert. Fügen Sie bei Bedarf ein temporäres Konsolenprotokoll hinzu:

document.addEventListener('variant:change', (event) => {
  const input = document.querySelector('[data-product-form] input[name="id"]');
  if (input && event.detail?.variant?.id) {
    input.value = event.detail.variant.id;
    console.log('Selected variant', input.value);
  }
});

Markup des Produktformulars und erforderliche Felder prüfen

Benutzerdefinierte Themes unterbrechen häufig das Hinzufügen zum Warenkorb, während Schaltflächen in Sticky Bars, Produktakkordeons oder Seitenerstellungsabschnitte verschoben werden. Die Schaltfläche muss sich im richtigen Formular befinden oder explizit mit einem verknüpft sein -Form -Attribut. Erforderliche Personalisierungsfelder müssen vor der Übermittlung Werte haben.

Überprüfen Sie auch den Lagerbestand und die Verkaufspläne. Für Abonnementprodukte, vorbestellte Apps, Pakete und benutzerdefinierte Optionen sind möglicherweise eine Verkaufstarif-ID oder Werbebuchungseigenschaften erforderlich. Wenn das Widget der App langsam lädt oder abstürzt, kann die native Schaltfläche eine unvollständige Warenkorbanfrage senden.

Für die Leistung der Produktseite verwenden Sie die Leitfaden zur Geschwindigkeit der Produktseite, Checkliste zur Produktvideooptimierung, und vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung.

Finden Sie JavaScript- und App-Konflikte

A single uncaught JavaScript error can stop the add-to-cart handler from binding. Look for red console errors before the click and immediately after the click. Then disable recently added apps in a duplicate theme: subscriptions, bundles, size charts, personalization, reviews, sticky carts, urgency timers, and pixels.

Wenn das Problem verschwindet, wenn App-Einbettungen deaktiviert sind, aktivieren Sie sie einzeln wieder. Auch alter Code ist wichtig. Eine entfernte App kann Snippets hinterlassen theme.liquid, Produktvorlagen oder Warenkorbabschnitte. Benutzen Sie die Anleitung zur Bereinigung von App-Resten und App-Skript-Korrekturanleitung.

Langsames Tippen ist ein separater Fehlermodus. Googles INP-Dokumentation erklärt, warum sich eine verzögerte Interaktion immer noch unterbrochen anfühlt. Thunder kann mit der automatisierten Geschwindigkeitsebene umgehen, und das Shopify INP-Fix-Anleitung zeigt die tiefere manuelle Route.

Handbuch Shopify Zum Warenkorb hinzufügen Debugging-Checkliste

Wenn Sie eine schnellere Behebung als manuelles Debuggen benötigen, vergleichen Sie Thunder-Preise mit benutzerdefinierte Shopify-Geschwindigkeitsoptimierungsdienste.

FAQ