+4943188705555
Jetzt wird’s bunt: Color Swatches in deinem Shopify-Shop
Die bestmögliche Produktpräsentation sollte das Ziel aller Shopbetreiber sein, um die Grundlage für einen erfolgreichen Shopify-Shop zu legen. Und tatsächlich werden wir von Onlineshop-Betreibern oft nach Tipps gefragt, wie sie ihre Produkte in ihrem Shopify-Shop noch visueller und greifbarer präsentieren können. Eine sehr beliebte, einfach umzusetzende und effektive Möglichkeit sind Color Swatches. Die kleinen Farbfelder unterstützen deine Kunden bei der visuellen Auswahl der gewünschten Produktvariante. Anstatt die einzelnen Varianten über Dropdown-Menüs oder Text-Links zu wählen, können deine Kunden die gewünschte Farbe direkt sehen und selektieren. Grund genug, uns diese Talente einmal genauer anzuschauen.
Color Swatches kannst du auf der Startseite und natürlich vor allem auf den Produktdetailseiten verwenden, um die Darstellung der verfügbaren Farben eines Produkts hervorzuheben. Auf Kategorie- und Suchergebnisseiten hilft diese Darstellung deinen Kunden bei der Filterung der Produkte nach Farbe. Beachte, dass du nicht zu viele ähnliche Farben zur Auswahl stellen solltest, da dies die Kaufwahrscheinlichkeit tatsächlich erschweren kann.
Hast du einen laufenden Shopify-Shop, in dem du gerne Color Swatches nachrüsten möchtest, prüfe zunächst, ob das in deinem Shop verwendete Theme dies ermöglicht. Manchmal hilft hier auch ein Theme-Update. Hierbei solltest du aber unbedingt beachten, ob beispielsweise viele Individualisierungen am Theme vorgenommen wurden, die bei einem Update leicht verloren gehen und damit einen großen Schaden anrichten können. Dann oder wenn das Theme nicht über Color Swatches verfügt, stehen dir im Shopify App Store diverse Color Swatches-Apps zur Verfügung. Wie immer gilt beim Einsatz von Drittanbieter-Apps: Gleiche genau deine Anforderungen mit den Features der App ab und teste, ob sich durch den App-Einsatz Inkompatibilitäten mit deinem Theme oder eine signifikante Verlangsamung deines Shopify-Shops ergibt.
In solchen Fällen ist es sinnvoll, die Funktionalität individuell für das eingesetzte Theme zu entwickeln. Die konkrete Umsetzung ist dabei abhängig davon, welches Theme du verwendest. Unabhängig vom eingesetzten Theme ist zur Realisierung von Color Swatches die Ausgabe der Variantenselektion zu modifizieren. Im Shopify Referenz-Theme “Dawn” müsstest du dazu die Theme-Datei “main-product.liquid” anpassen; bei anderen Themes wäre der erste Schritt, die richtige Stelle zu identifizieren. Bitte beachte, dass eine solche Theme-Modifikation keinesfalls trivial ist und ein solides Verständnis der von Shopify eingesetzten Technologien und Strukturen erfordert. Unbedingt solltest du vor jeder Anpassung deines Themes ein Backup anlegen. Falls dein Shop bereits öffentlich erreichbar ist, empfiehlt es sich zudem, die Anpassungen nicht am Live-Theme durchzuführen und die Funktionalität erst zu veröffentlichen, wenn du die Color Swatches umfassend getestet hast und sie einwandfrei funktionieren. Solltest du keine oder nur wenige Erfahrungen mit der individuellen Anpassung von Shopify-Themes haben, kann die individuelle Implementierung von Color Swatches für dich sehr herausfordernd werden – dann empfiehlt sich die Beauftragung einer spezialisierten Shopify-Agentur.
Die Farbhinterlegung für die Color Swatches wird in den Themes unterschiedlich gehandhabt und erfordert manchmal auch ein wenig Arbeit am Code des Themes. Bevor an dieser Stelle schwer zu reparierende Fehler entstehen, hole dir lieber fachkundige Unterstützung. Zudem solltest du beachten, dass die Farbbezeichnungen identisch sein müssen, damit das Farbfeld auch angezeigt wird. Dies bezieht sich nicht nur auf die Begrifflichkeit an sich (also “Beere” vs. “Beerenrot”), sondern auch auf die Schreibweise (beispielsweise “hellrosa” vs. “hell-rosa” oder “hell rosa”) und Klein- und Großschreibung. Verwende bei der Farbbezeichnung am besten aussagekräftige Farben, die nicht nur die tatsächlichen Farben deiner Produkte widerspiegeln, sondern auch sprechend sind (also lieber “salbeigrün” als “Kräutertraum”). Bitte beachte, dass jeder Farbwert nur einer Farbbezeichnung zugeordnet werden kann. Wird ein Farbfeld nicht angezeigt, liegt es unserer Erfahrung nach in der Regel nicht an einer fehlerhaften Funktionalität des Themes, sondern an der Einstellung der Farben und Farbbezeichnungen sowie der Zuordnung in den Produkten.
Eine tolle Neuerung hinsichtlich der Suche gibt es seit diesem Jahr in der Shopify Search & Discovery-App: Über Swatch-Filter kannst du visuelle Filter für Farbfelder hinzufügen, die auf den Kollektions- und Suchergebnisseiten angezeigt werden. Eine weitere spannende Neuerung ist bereits in Sicht: Im Zuge der Einführung der neuen Shopify-Produkttaxonomie und der Kategorie-Metafelder, die bisher nur für ausgewählte Händler zur Verfügung steht, werden Color Swatches auch in der neuesten Version des kostenlosen Shopify Referenz-Themes “Dawn” ohne individuelle Anpassungen oder die Nutzung von Drittanbieter-Apps realisiert werden können. Das ist wirklich toll, da das Dawn-Theme bei vielen Shopify-Shops auch gerne als Ausgangspunkt für individualisierte Themes zum Einsatz kommt.
Klein, aber oho: Die Vorteile von Color Swatches
Color Swatches werden in der Produktpräsentation von Onlineshops verwendet. Mit ihnen können deine Kunden die verfügbaren Farben eines Produkts direkt sehen, miteinander vergleichen und schließlich die gewünschte Farbe eines Produkts schnell und einfach auswählen, was sich positiv auf die Conversion-Rate auswirkt. Besonders bei der Ansicht auf Mobilgeräten sind Color Swatches sehr gut geeignet. Zudem sinkt die Wahrscheinlichkeit, dass ein Kunde die falsche Farbe bestellt. Auch die Suche nach der gewünschten Farbe wird mit Color Swatches erleichtert. Bedenke aber, dass die Darstellung der Farben auf verschiedenen Geräten variieren und deinen Kunden das Produkt live dennoch nicht gefallen kann.Color Swatches kannst du auf der Startseite und natürlich vor allem auf den Produktdetailseiten verwenden, um die Darstellung der verfügbaren Farben eines Produkts hervorzuheben. Auf Kategorie- und Suchergebnisseiten hilft diese Darstellung deinen Kunden bei der Filterung der Produkte nach Farbe. Beachte, dass du nicht zu viele ähnliche Farben zur Auswahl stellen solltest, da dies die Kaufwahrscheinlichkeit tatsächlich erschweren kann.
Color Swatches bei Shopify
Color Swatches sind keine Grundfunktionalität von Shopify, sondern werden gegebenenfalls auf Theme-Ebene bereitgestellt. Nicht alle aktuell 181 im Shopify Theme Store verfügbaren und keines der kostenfreien Themes bieten Color Swatches – aber immerhin 154 der kostenpflichtigen Themes bieten zum Zeitpunkt der Erstellung dieses Blog-Artikels diese Möglichkeit. Filtere im Shopify Theme Store einfach nach Themes, die Color Swatches unterstützen. Du wirst sicherlich ein für dich passendes Theme mit Color Swatches finden.Hast du einen laufenden Shopify-Shop, in dem du gerne Color Swatches nachrüsten möchtest, prüfe zunächst, ob das in deinem Shop verwendete Theme dies ermöglicht. Manchmal hilft hier auch ein Theme-Update. Hierbei solltest du aber unbedingt beachten, ob beispielsweise viele Individualisierungen am Theme vorgenommen wurden, die bei einem Update leicht verloren gehen und damit einen großen Schaden anrichten können. Dann oder wenn das Theme nicht über Color Swatches verfügt, stehen dir im Shopify App Store diverse Color Swatches-Apps zur Verfügung. Wie immer gilt beim Einsatz von Drittanbieter-Apps: Gleiche genau deine Anforderungen mit den Features der App ab und teste, ob sich durch den App-Einsatz Inkompatibilitäten mit deinem Theme oder eine signifikante Verlangsamung deines Shopify-Shops ergibt.
In solchen Fällen ist es sinnvoll, die Funktionalität individuell für das eingesetzte Theme zu entwickeln. Die konkrete Umsetzung ist dabei abhängig davon, welches Theme du verwendest. Unabhängig vom eingesetzten Theme ist zur Realisierung von Color Swatches die Ausgabe der Variantenselektion zu modifizieren. Im Shopify Referenz-Theme “Dawn” müsstest du dazu die Theme-Datei “main-product.liquid” anpassen; bei anderen Themes wäre der erste Schritt, die richtige Stelle zu identifizieren. Bitte beachte, dass eine solche Theme-Modifikation keinesfalls trivial ist und ein solides Verständnis der von Shopify eingesetzten Technologien und Strukturen erfordert. Unbedingt solltest du vor jeder Anpassung deines Themes ein Backup anlegen. Falls dein Shop bereits öffentlich erreichbar ist, empfiehlt es sich zudem, die Anpassungen nicht am Live-Theme durchzuführen und die Funktionalität erst zu veröffentlichen, wenn du die Color Swatches umfassend getestet hast und sie einwandfrei funktionieren. Solltest du keine oder nur wenige Erfahrungen mit der individuellen Anpassung von Shopify-Themes haben, kann die individuelle Implementierung von Color Swatches für dich sehr herausfordernd werden – dann empfiehlt sich die Beauftragung einer spezialisierten Shopify-Agentur.
Die Farbhinterlegung für die Color Swatches wird in den Themes unterschiedlich gehandhabt und erfordert manchmal auch ein wenig Arbeit am Code des Themes. Bevor an dieser Stelle schwer zu reparierende Fehler entstehen, hole dir lieber fachkundige Unterstützung. Zudem solltest du beachten, dass die Farbbezeichnungen identisch sein müssen, damit das Farbfeld auch angezeigt wird. Dies bezieht sich nicht nur auf die Begrifflichkeit an sich (also “Beere” vs. “Beerenrot”), sondern auch auf die Schreibweise (beispielsweise “hellrosa” vs. “hell-rosa” oder “hell rosa”) und Klein- und Großschreibung. Verwende bei der Farbbezeichnung am besten aussagekräftige Farben, die nicht nur die tatsächlichen Farben deiner Produkte widerspiegeln, sondern auch sprechend sind (also lieber “salbeigrün” als “Kräutertraum”). Bitte beachte, dass jeder Farbwert nur einer Farbbezeichnung zugeordnet werden kann. Wird ein Farbfeld nicht angezeigt, liegt es unserer Erfahrung nach in der Regel nicht an einer fehlerhaften Funktionalität des Themes, sondern an der Einstellung der Farben und Farbbezeichnungen sowie der Zuordnung in den Produkten.
Eine tolle Neuerung hinsichtlich der Suche gibt es seit diesem Jahr in der Shopify Search & Discovery-App: Über Swatch-Filter kannst du visuelle Filter für Farbfelder hinzufügen, die auf den Kollektions- und Suchergebnisseiten angezeigt werden. Eine weitere spannende Neuerung ist bereits in Sicht: Im Zuge der Einführung der neuen Shopify-Produkttaxonomie und der Kategorie-Metafelder, die bisher nur für ausgewählte Händler zur Verfügung steht, werden Color Swatches auch in der neuesten Version des kostenlosen Shopify Referenz-Themes “Dawn” ohne individuelle Anpassungen oder die Nutzung von Drittanbieter-Apps realisiert werden können. Das ist wirklich toll, da das Dawn-Theme bei vielen Shopify-Shops auch gerne als Ausgangspunkt für individualisierte Themes zum Einsatz kommt.