So deaktivierst du die automatische Auswahl von Produktvarianten auf einer Shopify-Produktseite
Wenn du als Shopify-Händler mehrere Varianten für ein Produkt anbietest, wählt Shopify automatisch eine Variante aus, sobald ein Kunde deine Produktseite aufruft. Ein Beispiel dafür wären Socken: Du könntest verschiedene Farben anbieten, zwischen denen deine Kunden wählen können – etwa Gelb, Blau, Rot, Grün usw.
Hinweis: Shopify erweitert die Variantenlimits auf 2.048 Varianten pro Produkt, mit allgemeiner Verfügbarkeit voraussichtlich Ende 2025. Aktuell gilt in den meisten Shops weiterhin das Limit von 100 Varianten, wobei Shopify Plus-Shops und Development-Stores möglicherweise frühzeitig Zugriff auf das erhöhte Limit haben.
Sobald ein Kunde deine Produktseite aufruft, wird automatisch die erste Variante dieses Produkts ausgewählt. Wenn du die automatische Auswahl für ein Produkt deaktivieren möchtest, ist das möglich.
So deaktivierst du die automatische Auswahl von Produktvarianten
Um die automatische Auswahl für Produktvarianten zu deaktivieren, musst du Hinweise im Dropdown-Menü hinzufügen. So geht’s:
- Gehe in das Verzeichnis Snippets und klicke auf Add a new snippet
- Lass den Namen ‘pick-an-option’
- Füge diesen Code in die neue Snippet-Datei ein und speichere sie
- Gehe in das Verzeichnis Layout und wähle theme.liquid
- Suche am Ende der Datei nach dem Tag </body>
- Füge diesen Code {% render ‘pick-an-option’ %} in einer Zeile oberhalb dieses Tags ein
- Klicke auf Save
- Suche als Nächstes die Datei, die das Formular für ‘add to cart’ enthält. Das action -Attribut in dieser Datei lautet /cart/add
- Sobald du die Datei gefunden hast, suche nach einem der folgenden Codes
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>Oder…
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Ersetze das durch den folgenden Code
<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>- Zum Schluss klicke auf Save
Methode für moderne Shopify-Themes (Dawn & Online Store 2.0 Themes)
Bei neueren Shopify-Themes mit Online Store 2.0-Architektur (wie Dawn) ist der Ablauf anders:
- Suche in deinen Theme-Dateien nach product-variant-options.liquid
- Finde den Code mit {% if value.selected %} checked {% endif %}
- Entferne oder ändere diesen Code, um die automatische Auswahl zu verhindern
- Füge eine JavaScript-Validierung hinzu, damit Kunden vor dem Hinzufügen zum Warenkorb eine Variante auswählen müssen
Hinweis: Diese Methode erfordert technisches Know-how und kann die Funktionalität deines Themes beeinflussen. Erstelle vor Änderungen immer ein Backup.
Theme-spezifische Einstellungen zur automatischen Auswahl
Wenn du Empire oder ähnliche Premium-Themes verwendest, kannst du die automatische Auswahl auch ohne Code-Änderungen deaktivieren:
- Gehe zu Online Store > Themes > Customize
- Navigiere zu Products > Form
- Deaktiviere die Option Auto-select first available variant
Sieh in der Dokumentation deines Themes nach, ob diese Funktion in den Theme-Einstellungen verfügbar ist.
CSS-Methode: „Add to Cart“ bis zur Auswahl ausblenden
Füge dieses CSS in deiner Datei theme.liquid hinzu, um den „Add to Cart“-Button auszublenden, bis eine Auswahl getroffen wurde:
<style>
body:has(.disabled-option:checked) .product-form__buttons button {
display: none !important;
}
</style>Alternative Lösung: Apps verwenden
Statt Code zu bearbeiten, kannst du diese Apps zur Variantenverwaltung nutzen (Stand 2025):
- Variant Option Product Options (Kostenloser Plan verfügbar, kostenpflichtig ab 9,99 $/Monat)
- Globo Product Options (Kostenloser Plan verfügbar)
- OPTIS Product Options (Kostenloser Plan verfügbar)
Diese Apps deaktivieren die automatische Auswahl und bieten zusätzliche Funktionen wie Farbfelder, bedingte Logik und unbegrenzte Produktoptionen.
So änderst du die add to cart-Einstellungen
Du kannst diese Einstellungen so anpassen, dass Produkte nicht als unavailable angezeigt werden, bevor der Kunde eine Auswahl getroffen hat.
- Gehe zu Online Store und Themes
- Wähle das Theme aus, das du bearbeiten möchtest, und klicke auf Actions
- Wähle Edit Language und gehe zum Feld Filter items
- Gib ‘unavailable.’ ein. Dann wird dir die Übersetzung angezeigt
- Ändere Unavailable zu Bitte auswählen
Best Practices für das Variantenmanagement
- Nutze Farbfelder statt Dropdowns – für eine bessere User Experience und höhere Conversion
- Verwende varianten-spezifische Bilder, die automatisch angezeigt werden, sobald Kunden Optionen auswählen
- Richte Low-Stock-Benachrichtigungen ein und blende ausverkaufte Varianten automatisch aus, um den Bestand effizient zu verwalten
- Teste Variantenauswahl-Elemente auf Mobilgeräten – erwäge Button-Gruppen statt Dropdowns für bessere Touchscreen-Bedienbarkeit
- Füge Validierungshinweise wie „Bitte zuerst eine Option auswählen“ hinzu, um Verwirrung zu vermeiden
Wenn du bestimmte Produktvarianten ausblenden möchtest, ohne sie zu löschen, ist das ebenfalls möglich.
