Shopify Best Practice: Variant Swatches
Shopify Best Practice: Variant Swatches
Was sind Variant Swatches?
Variant Swatches sind eine gängige Funktion in Shopify Shops, mit der Kund:innen verschiedene Varianten eines Produkts direkt auswählen können.
Statt eines Dropdown-Menüs erscheinen kleine Farbfelder oder Bilder, die den Auswahlprozess optisch unterstützen.
Herausforderungen von Variant Swatches
So hilfreich die visuelle Darstellung auch ist: Häufig sorgen Variant Swatches für Unklarheit.
Besonders dann, wenn alle Produktbilder aller Varianten gleichzeitig angezeigt werden.
Typischer Nutzerflow:
- Kund:in wählt rotes Tank Top aus.
- Beim Scrollen durch die Galerie taucht das schwarze Tank Top auf.
- Kund:in legt das Produkt auf Grund des angezeigten Bildes in den Warenkorb. Kontrolliert jedoch nicht, welche Variante ausgewählt ist.
- Ergebnis: Unsicherheit, Abbruch & Retourenrisiko
Lösungen im Vergleich
Fake Variants
Die wohl klarste Lösung: Statt ein Produkt mit mehreren Farbvarianten anzulegen, wird jede Farbe als separates Produkt im Shop gepflegt.
Beispiel:
- /tanktop-rot
- /tanktop-schwarz
- /tanktop-weiss
Die „Swatches“ sind keine echten Varianten mehr, sondern einfache Links zu anderen Produkt-URLs.
Vorteile:
- volle Kontrolle über Bilder pro Produkt
- SEO-technisch besser: Jede Farbe erhält eine eigene URL
- Klare Darstellung, kein Risiko von Verwechslungen
Nachteile:
- Pflegeaufwand höher
- Nicht jedes Theme hat dieses Feature
Apps zur Bildfilterung bei Varianten
Alternativ können die Produktbilder basierend auf der ausgewählten Variante angezeigt werden. Dies lässt sich mit Apps oder Custom Code umsetzen.
- automatische Anzeige der passenden Bilder je Variante
- Variantenbilder auf Produkt- & Kollektionsseiten
- unterstützt separate Produkte als Varianten (Produktgruppierung)
- kein Code nötig, einfache Einrichtung
- schnelle Ladezeiten & Theme-Kompatibilität
Preis:
- 9.90$/Monat: Shopify Basic
- 29.90$/Monat: Shopify Advanced & Grow
- 49.90$/Monat: Shopify Plus
- automatische Bildzuordnung zu Varianten
- separate Produkte als Varianten verlinken
- Swatches auf Produkt- und Kollektionsseiten
- Lagerbestand-abhängige Anzeige (Out-of-Stock Management)
- CSV/API-Bulk Import für Variantenbilder
Preis:
- 14.90$/Monat: Shopify Basic
- 24.90$/Monat: Shopify Grow
- 49.40$/Monat: Shopify Advanced
- 99.90$/Monat: Shopify Plus
- zeigt passende Bilder bei Auswahl einer Farbe
- Collection Page Swatches
- unterstützt „separate Produkte als Varianten“
- kein Coding nötig
- automatische Übersetzungen (gut für internationale Shops)
- starke Alternative für visuelle Variantenbilder + Swatches
Preis:
- kostenlos: Benutzerdefinierte Bildmuster hochladen
- 7.99$/Monat: Muster auf Produkt-/Kategorieseite & Produkte als Varianten gruppieren
- 14.99$/Monat: Anzeige mehrerer Variantenbilder & Varianten als separate Produkte anzeigen
Tipp: Achte auf Kompatibilität mit deinem Theme und teste die App in einer Staging-Umgebung.
Custom Lösung
Die Filterung der Bilder kann auch ohne App mit einer Custom Lösung umgesetzt werden. Hierbei wird der Code des Themes so erweitert, dass nur die passenden Bilder bei Variantenwechsel angezeigt werden.
Vorteile:
- komplett individualisierbar
- keine App-Abhängigkeit
- keine monatlichen App-Kosten
Nachteile:
- Initiale Entwicklungskosten
- Wartungsaufwand bei Theme-Wechsel
Fazit: Bessere User Experience durch klare Strukturen
Fehlgeleitete Bilder auf der Produktseite sind mehr als nur ein optisches Problem. Sie sorgen für Verwirrung, führen zu Retouren und mindern das Vertrauen in deinen Shop. Die Lösung liegt in einer durchdachten Produktstruktur:
- Fake Variants mit einzelnen Produktseiten sorgen für maximale Klarheit
- Eine App oder Custom-Code sorgt dafür, dass nur passende Bilder angezeigt werden
Du brauchst Unterstützung bei der Optimierung deiner Produktseiten?
