Shopify-Variantenauswahl funktioniert nicht: Produktformular, Theme und App-Korrekturen (2026)

Schnelle Lösung mit Thunder

Überprüfen Sie den Variantenauswahlblock und die Produktvorlage

Shopify-Produkte können bis zu drei Optionen verwenden und jede Optionskombination ist einer Variante zugeordnet. Ein funktionierendes Theme benötigt einen Selektor, der produktspezifische Informationen aktualisiert, wenn sich die ausgewählte Variante ändert: Preis, Vergleichspreis, Medien, Inventarmeldung, Add-to-Cart-Status und die mit dem Formular übermittelte ausgeblendete Varianten-ID.

Starten Sie im Online-Shop, Anpassen, Produktvorlage. Bestätigen Sie, dass der Variantenauswahlblock im Abschnitt „Produktinformationen“ vorhanden ist. Überprüfen Sie dann, ob die defekten Produkte eine andere Vorlage verwenden als die funktionierenden Produkte. Bei Community-Berichten kommt es häufig darauf an, dass bei einer Produktvorlage die Auswahl fehlt oder ein alter benutzerdefinierter Abschnitt verwendet wird.

Wenn die Auswahl optisch funktioniert, das Hinzufügen zum Warenkorb jedoch fehlschlägt, verwenden Sie die Checkliste für die Schaltfläche „Zum Warenkorb hinzufügen“.. Wenn der Einkaufswagen den richtigen Artikel erhält, die Schublade jedoch ausfällt, verwenden Sie die Anleitung zur Fehlerbehebung beim Warenkorb-Update.

Stellen Sie sicher, dass das Produktformular die ausgewählte Varianten-ID übermittelt

Der teuerste Variantenfehler ist subtil: Das Muster ändert sich, aber das Formular sendet immer noch die erste Variante. Überprüfen Sie das Produktformular und finden Sie die versteckte Eingabe mit dem Namen id Der Eingang. Ändern Sie eine Größe oder Farbe und bestätigen Sie die Wertänderungen für die ausgewählte Varianten-ID.

{% form 'product', product, id: 'product-form' %}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

  <variant-radios data-product='{{ product | json | escape }}'>
    <!-- option inputs or swatches -->
  </variant-radios>

  <button type="submit" name="add">Zum Warenkorb hinzufügen</button>
{% endform %}

In Astro-Inhalten wird die obige Flüssigkeit als Beispiel gezeigt. In Ihrem Shopify-Theme ist die Schlüsselregel einfach: das Verborgene name="id" Die -Eingabe muss immer mit der ausgewählten verfügbaren Variante übereinstimmen, bevor das Formular gesendet wird.

const product = JSON.parse(document.querySelector('[data-product-json]').textContent);
const form = document.querySelector('form[action*="/cart/add"]');
const idInput = form?.querySelector('input[name="id"]');

function findVariant(selectedOptions) {
  return product.variants.find((variant) =>
    variant.options.every((option, index) => option === selectedOptions[index])
  );
}

document.addEventListener('change', (event) => {
  if (!event.target.matches('[data-option-input]')) return;
  const selectedOptions = [...document.querySelectorAll('[data-option-input]:checked, select[data-option-input]')]
    .map((input) => input.value);
  const variant = findVariant(selectedOptions);
  if (variant && idInput) idInput.value = variant.id;
});

Aktualisieren Sie Preis, Medien, URL und Verfügbarkeit gemeinsam

Ein vollständiger Variantenselektor leistet mehr, als nur die richtige ID einzureichen. Es sollte den Preis, den Verkaufspreis, die ausgewählten Medien, die Artikelnummer, die Abholverfügbarkeit, die Inventarmeldung und den deaktivierten Status der Schaltfläche „In den Warenkorb“ aktualisieren. Wenn nur ein Element aktualisiert wird, sehen Käufer gemischte Informationen und zögern.

Auch Deep-Links sind wichtig. Wenn ein Käufer auf landet ?variant=123, die Seite sollte diese Variante vorab auswählen und die passenden Informationen anzeigen. Die Theme-Anleitung von Shopify weist auf die Handhabung von Varianten-Deep-Links hin, da Anzeigen, E-Mails und Produktempfehlungen häufig Traffic direkt an eine ausgewählte Variante weiterleiten.

Auch hier spielt die Geschwindigkeit der Produktseite eine Rolle. Lesen Sie die Leitfaden zur Geschwindigkeit der Produktseite, Checkliste zum Debuggen von Produktmedien, und Leitfaden zur Produktvideooptimierung , wenn Variantenmedien Teil des Fehlers sind.

Testen Sie Apps, Seitenersteller, Abonnements und Bundles separat

Variantenprobleme treten häufig auf, wenn ein Geschäft benutzerdefinierte Muster, Abonnements, Pakete, Mengenrabatte oder einen Seitenersteller hinzufügt. Diese Tools können die Auswahl von Shopify durch ihre eigenen Eingaben ersetzen. Wenn sie nicht mit dem nativen Produktformular synchronisiert werden, kann die Add-to-Cart-Anfrage veraltete Daten übermitteln.

Duplizieren Sie das Theme, deaktivieren Sie produktbezogene App-Einbettungen und testen Sie ein einfaches Produkt mit zwei Varianten. Testen Sie dann ein Produkt mit drei Optionen: einer ausverkauften Variante, einem Abonnement-Verkaufsplan und Variantenbildern. Dadurch lässt sich ermitteln, ob das Problem themenübergreifend ist oder an ein bestimmtes Produkt-Setup gebunden ist.

Verwenden Sie für App-lastige Produktseiten die vollständiger Leitfaden zur Shopify-Geschwindigkeitsoptimierung, Fehlerbehebungen bei der Produktbildgeschwindigkeit, und Leitfaden zur Shopify-App-Geschwindigkeitsoptimierung.

Manueller Fix vs. Thunder Fix

Wenn die Bereinigung der Produktseite zu einem größeren Leistungsprojekt wird, vergleichen Sie Thunder-Preise mit praktische Shopify-Geschwindigkeitsoptimierung.

FAQ