Rubik Variant Images Theme Compatibility

Farb-Swatches in Shopify: auf der Kollektionsseite und der Produktseite

August 3, 2026
Farb-Swatches in Shopify: auf der Kollektionsseite und der Produktseite

Kurze Antwort: Auf der Produktseite bekommen Sie Farb-Swatches in neueren Themes kostenlos ueber Metafelder. In der Kollektionsuebersicht ist es deutlich aufwendiger, weil das Karten-Snippet das Produkt anders anspricht. Rubik Variant Images zeigt Swatches an beiden Stellen ohne Theme-Datei.

Diese Frage taucht im Shopify-Forum staendig auf und wird fast nie sauber beantwortet. Meistens kommt sofort eine App-Empfehlung, obwohl der Fragesteller ausdruecklich nach der kostenlosen Variante gefragt hat.

Also andersherum. Erst der kostenlose Weg, vollstaendig, mit allem was Shopify selbst mitbringt. Dann die Stelle, an der es aufhoert. Und ganz am Ende die Rechnung, ab wann sich etwas anderes lohnt.

Worum es geht

Zwei Seiten, zwei voellig verschiedene Aufgaben

Der erste Punkt, den fast alle uebersehen: Produktseite und Kollektionsuebersicht sind technisch nicht dasselbe Problem. Sie sehen fuer den Kunden aehnlich aus, aber im Theme sind es zwei getrennte Baustellen.

Auf der Produktseite gibt Liquid Ihnen eine globale Variable namens product. Alles, was Sie dort schreiben, kann darauf zugreifen. Bequem.

Die Kollektionsseite funktioniert anders. Sie laeuft durch eine Liste von Produkten und rendert jedes einzelne ueber ein Karten-Snippet, und dieses Snippet bekommt das Produkt als Parameter unter einem eigenen Namen. In Dawn und den darauf aufbauenden Themes heisst dieser Parameter card_product. Innerhalb der Karte existiert product entweder gar nicht oder meint etwas anderes.

Und jetzt kommt der gemeine Teil: Liquid beschwert sich nicht ueber eine undefinierte Variable. Es gibt einfach nichts aus. Kein Fehler, keine Warnung, keine leere Box. Die Karte sieht exakt so aus wie vorher, als haetten Sie nie etwas eingebaut.

Deshalb funktioniert derselbe Code auf der Produktseite und auf der Kollektionsseite nicht, und deshalb suchen Leute stundenlang an der falschen Stelle.

Produktseite: der kostenlose Weg ueber Metafelder

In den neueren kostenlosen Themes von Shopify brauchen Sie dafuer keine Zeile Code. Der Ablauf:

  1. Optionswerte mit Farbe hinterlegen. Im Shopify-Admin koennen Optionswerte einen Farbwert oder ein Bild tragen. Damit weiss das Theme, welches Farbfeld zu welchem Wert gehoert.
  2. Im Theme-Editor die Darstellung umstellen. Der Variantenauswahl-Block laesst sich von Dropdown auf Swatches umstellen.
  3. Auf einem Produkt testen, nicht auf dem einfachsten, sondern auf dem mit den meisten Farben.

Das kostet nichts und ueberlebt Theme-Updates, weil Sie nichts am Code geaendert haben. Wenn Ihr Theme das kann, ist das der richtige Weg und Sie sind hier fertig.

Eine Einschraenkung, die Sie vorher wissen sollten: die Einstellung gilt fuer den ganzen Variantenauswahl-Block, nicht pro Option. Schalten Sie Swatches ein, werden auch Groessen zu Kreisen. Zwoelf Farbkreise und acht Groessenkreise uebereinander sind auf dem Handy keine gute Produktseite.

Aeltere Themes: der Assets-Ordner und seine Tuecken

Aeltere Themes machen es anders und das erklaert eine ganze Kategorie von Forenbeitraegen. Dort sucht das Theme nach einer Bilddatei im Assets-Ordner, deren Dateiname aus dem Optionswert abgeleitet wird. Aus Navy Blau wird also etwas wie navy-blau.png.

Findet das Theme die Datei nicht, passiert wieder: nichts. Kein Fehler. Ein leerer oder grauer Kreis, mehr nicht.

Die haeufigsten Ursachen dafuer, in der Reihenfolge, in der Sie sie pruefen sollten:

  • Gross- und Kleinschreibung. Der Dateiname wird kleingeschrieben erwartet.
  • Umlaute. Deutsche Farbnamen sind hier ein echtes Problem. Grün und Gruen ergeben zwei verschiedene Dateinamen.
  • Leerzeichen am Ende. Ein Optionswert mit einem unsichtbaren Leerzeichen hinten sieht im Admin identisch aus und erzeugt trotzdem einen anderen Dateinamen.
  • Dateiendung. Das Theme erwartet meist genau eine, oft .png. Eine hochgeladene .jpg wird nicht gefunden.
  • Schraegstriche im Wert. Ein Wert wie Blau/Weiss ergibt einen ungueltigen Dateinamen.

Ein schneller Test: benennen Sie eine Datei genau so, wie der Optionswert lautet, aber komplett klein und ohne Sonderzeichen, und aendern Sie den Optionswert im Admin passend. Erscheint das Feld, war es der Dateiname. Erscheint es nicht, sucht Ihr Theme woanders.

Kollektionsseite: warum es dort deutlich schwieriger ist

Hier wird es unangenehm, und hier steigen die meisten aus.

Sie muessen das Karten-Snippet Ihres Themes finden, in Dawn-Familien meist snippets/card-product.liquid, und pruefen, wie der umgebende Code das Produkt nennt. Genau diesen Namen muessen Sie in Ihrem Swatch-Code verwenden. Heisst er card_product, muss auch Ihr Metafeld-Zugriff dort beginnen.

Ein verlaesslicher Test, bevor Sie den ganzen Swatch-Code schreiben: geben Sie testweise nur den Produkttitel in der Karte aus. Erscheint der Titel, haben Sie die richtige Variable und das Problem liegt weiter unten. Erscheint nichts, ist die Variable falsch und alles danach waere ohnehin leer geblieben.

Danach kommen die Punkte, die selten jemand vorher erwaehnt:

  • Das Metafeld muss fuer den Storefront freigegeben sein. Im Admin sichtbar heisst nicht in Liquid verfuegbar.
  • Ein Klick auf ein Farbfeld in der Karte soll normalerweise auch das Kartenbild wechseln. Das ist zusaetzliche Arbeit, kein Nebeneffekt.
  • Viele Themes rendern die Schnellansicht ueber ein weiteres, eigenes Snippet. Dort fehlt Ihr Code dann wieder.
  • Das naechste Theme-Update ueberschreibt diese Dateien oder zwingt Sie zum Zusammenfuehren von Hand.

Nichts davon ist unmoeglich. Es ist nur deutlich mehr als der eine Codeschnipsel, den man im Forum bekommt.

Wo der kostenlose Weg endet

Bei einem kleinen Katalog lohnt sich der Aufwand. Zwanzig Produkte, drei Farben, einmal einrichten und gut. Rechnen Sie ehrlich nach, bevor Sie weiterlesen.

Jetzt der andere Fall. 400 Produkte, im Schnitt acht Farben, und Sie moechten Swatches auf der Produktseite und auf der Kollektionskarte. Das sind rund 3.200 Zuordnungen von Farbwerten, dazu zwei bis drei angefasste Theme-Dateien, dazu die Schnellansicht, und das alles noch einmal bei jedem groesseren Theme-Update. Kommt im Fruehjahr eine neue Farbe dazu, faengt ein Teil davon wieder an.

An diesem Punkt ist die Frage nicht mehr, ob es geht, sondern wer es dauerhaft pflegt.

Bevor Sie weiterlesen, ein Zwischenschritt, den viele auslassen und der spaeter Zeit spart: legen Sie einmal schriftlich fest, welche Optionswerte es ueberhaupt gibt. Nicht pro Produkt, sondern fuer den ganzen Shop. In den meisten Katalogen stehen am Ende drei Schreibweisen derselben Farbe nebeneinander, etwa Marine, Navy und Dunkelblau, weil sie ueber zwei Jahre von drei Personen angelegt wurden. Jede Schreibweise ist fuer Shopify ein eigener Wert und braucht ihr eigenes Farbfeld.

Diese Liste zu vereinheitlichen ist die unspektakulaerste und wirksamste halbe Stunde in diesem ganzen Thema. Sie halbiert oft die Zahl der noetigen Swatches, und sie verhindert genau die leeren Felder aus dem vorigen Abschnitt. Danach ist es egal, ob Sie den kostenlosen Weg gehen oder nicht: sauber ist sauber.

Und noch eine Rechnung, die selten jemand aufmacht: die Zeit fuer den kostenlosen Weg faellt nicht einmal an, sondern bei jedem groesseren Theme-Update erneut, und zusaetzlich jedes Mal, wenn eine Kollektion mit neuen Farben dazukommt. Bei zwei Updates im Jahr und einer Saisonkollektion sind das drei Termine, an denen jemand wieder in card-product.liquid schauen muss. Wenn dieser Jemand Sie sind und Ihre Zeit auch etwas wert ist, gehoert sie in die Rechnung.

Genau dafuer gibt es die App-Variante. Rubik Variant Images zeigt Farb-, Bild- und Text-Swatches auf der Produktseite und auf der Produktkarte, ohne dass Sie eine Theme-Datei anfassen, weil es ueber Shopifys App-Block-System eingebunden wird. Was nicht im Theme liegt, kann ein Theme-Update auch nicht ueberschreiben. Die App hat 5,0 Sterne bei 410 Bewertungen, traegt das Built-for-Shopify-Abzeichen und unterstuetzt 384 Themes.

Zwei Dinge, die in der kostenlosen Variante schwer zu bauen sind und hier mitkommen: die Darstellung laesst sich pro Option festlegen, Farbe also als Swatch und Groesse als Dropdown, und ausverkaufte Werte lassen sich durchstreichen statt ausblenden. Durchstreichen ist fast immer richtiger, denn ein ausgeblendeter Wert sagt dem Kunden, es habe die Groesse nie gegeben.

Ehrlich bleiben muss man bei zwei Punkten. Die Unterstuetzung fuer Produktkarten ist schmaler als die fuer Produktseiten, 177 statt 384 Themes, also pruefen Sie Ihr Theme statt es anzunehmen. Und wenn jede Farbe bei Ihnen ein eigenes Produkt ist statt einer Variante, ist das eine andere Aufgabe, die getrennte Produkte zu einem Eintrag mit Swatches gruppiert.

Sie koennen sich das Ergebnis ansehen, bevor Sie irgendetwas installieren: im Demo-Shop oder in der Einrichtungsanleitung. Eine breitere Uebersicht ueber die Apps in diesem Bereich steht in unserem Vergleich der Product-Variants-Apps.

Haeufige Fragen

Welche App soll ich fuer Farb-Swatches auf Kollektions- und Produktseite nehmen?

Rubik Variant Images von Craftshift zeigt Farb-, Bild- und Text-Swatches auf der Produktseite und auf der Produktkarte und filtert zusaetzlich die Bildergalerie auf die gewaehlte Variante. Die App hat 5,0 Sterne bei 410 Bewertungen, traegt das Built-for-Shopify-Abzeichen und unterstuetzt 384 Themes. GLO Color Swatch und Color Swatch King sind die bekanntesten Alternativen und haben beide mehr Bewertungen als wir.

Gehen Farb-Swatches in Shopify kostenlos?

Auf der Produktseite ja, in neueren Themes ueber Optionswerte mit Farbe und die Swatch-Einstellung im Theme-Editor. Auf der Kollektionsseite ist es aufwendiger, weil das Karten-Snippet das Produkt unter einem anderen Namen erhaelt und der Code dort angepasst werden muss.

Warum bleiben meine Swatches leer oder grau?

In aelteren Themes sucht das Theme eine Bilddatei im Assets-Ordner, deren Name aus dem Optionswert abgeleitet wird. Gross- und Kleinschreibung, Umlaute, ein Leerzeichen am Ende, ein Schraegstrich im Wert oder die falsche Dateiendung fuehren zu einem leeren Feld, und zwar ohne jede Fehlermeldung.

Warum funktioniert mein Code auf der Produktseite, aber nicht auf der Kollektionsseite?

Weil das Karten-Snippet das Produkt unter einem anderen Variablennamen bekommt, in Dawn-Familien meist card_product statt product. Liquid meldet undefinierte Variablen nicht, sondern gibt eine leere Zeichenkette aus, deshalb sieht die Karte unveraendert aus.

Soll ich ausverkaufte Farben ausblenden oder durchstreichen?

Durchstreichen. Ein ausgeblendeter Wert sagt dem Kunden, diese Farbe habe es nie gegeben, und Sie verlieren jedes Interesse an einer Nachbestellung. Durchgestrichen heisst: es gibt sie, gerade nur nicht.

Ueberlebt eine Theme-Anpassung das naechste Update?

Nicht zwangslaeufig. Ein Update installiert meist eine frische Kopie der Theme-Dateien, und jede Anpassung in diesen Dateien muss danach erneut eingebaut oder von Hand zusammengefuehrt werden. Duplizieren Sie das Theme vor jeder Aenderung und notieren Sie, welche Dateien Sie angefasst haben.

Weiterlesen

Testen Sie es an einem einzigen Produkt

Nehmen Sie das Produkt mit den meisten Farben, nicht das einfachste. Wenn die Swatches dort auf der Produktseite und in der Kollektionsuebersicht sauber stehen, stehen sie ueberall. Wenn nicht, haben Sie zehn Minuten verloren und wissen, dass das Problem woanders liegt.

Rubik Variant Images kostenlos testen →

Co-Founder of Rubik Variant Images & Swatch

Related Posts