Ein Pullover in 6 Farben. Auf Ihrer Kollektionsseite zeigt Shopify eine einzige Produktkarte. Das Bild: die Standardvariante, wahrscheinlich Schwarz. Der Kunde sieht nicht, dass es den Pullover auch in Bordeaux, Camel, Creme, Grau und Marineblau gibt. Jedenfalls nicht, bis er auf die Produktseite klickt.
Manche Shop-Betreiber wollen das anders. Jede Farbe soll als eigene Karte im Kollektionsraster erscheinen. 6 Farben, 6 Karten, 6 verschiedene Produktbilder. Der Kunde sieht auf einen Blick, welche Optionen es gibt. Und Farbfelder unter jeder Karte zeigen, dass die Farben zusammengehören.
In diesem Beitrag
- Das Problem: eine Karte pro Produkt
- Die Lösung: separate Produkte + Combined Listings
- Kollektions-Swatches im Detail
- Bildwechsel bei Hover
- SEO-Vorteil separater Produkte
- Filter auf Kollektionsseiten
- Einrichtung Schritt für Schritt
- Video
- Häufig gestellte Fragen
- Weiterlesen
Das Problem: eine Karte pro Produkt
Shopify zeigt auf Kollektionsseiten eine Produktkarte pro Produkt. Nicht pro Variante. Ein Produkt mit 8 Farbvarianten bekommt eine Karte. Das Kartenbild zeigt die erste oder die Standardvariante. Die anderen 7 Farben sind unsichtbar.
Für den Kunden bedeutet das: Er sieht ein schwarzes T-Shirt, obwohl er nach einem weißen sucht. Das weiße existiert als Variante, aber die Kollektionsseite zeigt es nicht. Der Kunde scrollt weiter und kauft woanders.
Dazu kommt das Filterproblem. Der Kunde filtert die Kollektion nach “Weiß”. Shopify zeigt das Produkt, weil es eine weiße Variante hat. Aber die Produktkarte zeigt trotzdem das schwarze Hauptbild. Das ist verwirrend und kostet Vertrauen.
Die Lösung: separate Produkte + Combined Listings
Die Lösung besteht aus zwei Schritten. Erstens: Jede Farbe als eigenes Produkt anlegen. “T-Shirt Weiß”, “T-Shirt Schwarz”, “T-Shirt Marineblau”. Jedes Produkt hat eigene Bilder, eigenen Titel, eigene URL.
Zweitens: Die Produkte mit einer Combined-Listings-App verbinden. Rubik Combined Listings fügt Farbfelder hinzu, die alle Farbversionen miteinander verknüpfen. Auf der Produktseite und auf der Kollektionsseite.
Das Ergebnis: Jede Farbe hat ihre eigene Karte im Kollektionsraster. Unter jeder Karte zeigen kleine Farbpunkte die anderen verfügbaren Farben. Der Kunde sieht alles auf einen Blick, ohne eine Produktseite öffnen zu müssen.
Kollektions-Swatches im Detail
Rubik Combined Listings bietet 8 verschiedene Presets für die Swatch-Darstellung auf Kollektionsseiten. Jedes Preset bestimmt Position, Größe und Stil der Farbfelder auf der Produktkarte.
Typische Positionen: unter dem Produkttitel, unter dem Preis, über dem Produktbild oder als Overlay auf dem Bild. Die Swatches selbst können Farbkreise, abgerundete Quadrate oder Produktbild-Thumbnails sein.
Ein “+3” Badge zeigt an, wenn mehr Farben verfügbar sind, als auf der Karte angezeigt werden. Bei einem Produkt mit 15 Farben sehen Sie vielleicht 5 Farbpunkte und “+10”. Das hält die Karte übersichtlich.
Alle Presets passen sich automatisch an Ihr Theme an. Die Swatches übernehmen die Schriftart und die Abstände Ihres Themes. Falls Anpassungen nötig sind: Der KI Visual Settings Assistant generiert CSS auf Basis natürlicher Sprache.
Bildwechsel bei Hover
Farbpunkte allein sind gut. Aber richtig überzeugend wird es mit Bildwechsel bei Hover. Der Kunde fährt mit der Maus über den roten Farbpunkt, und das Produktbild auf der Karte wechselt zum roten Produkt. Ohne Klick. Ohne Seitenwechsel. Das Erlebnis ist sofort und visuell.
Auf Mobilgeräten funktioniert das über Tippen statt Hover. Der Kunde tippt auf einen Farbpunkt und sieht das passende Bild. Ein zweiter Tipp öffnet die Produktseite.
Der Bildwechsel nutzt die Bilder des jeweiligen Produkts. Es werden keine zusätzlichen Bilder geladen: Rubik nutzt die bereits im DOM vorhandenen Daten.
SEO-Vorteil separater Produkte
Separate Produkte statt Varianten bringen handfeste SEO-Vorteile.
Keyword-Targeting pro Farbe. “Weißes T-Shirt Herren” und “Schwarzes T-Shirt Herren” sind verschiedene Suchanfragen. Mit separaten Produkten hat jede Farbe ihren eigenen Title-Tag und ihre eigene URL für genau dieses Keyword.
Mehr indexierte Seiten. 6 Farben als Varianten ergeben 1 indexierte Seite. 6 Farben als separate Produkte ergeben 6 indexierte Seiten. Mehr Seiten bedeuten mehr Chancen, in den Suchergebnissen aufzutauchen.
Google Shopping. Jedes Produkt erscheint als eigener Eintrag im Shopping-Feed mit eigenem Bild. Ein Kunde, der “rotes T-Shirt” sucht, sieht ein rotes Produktbild. Nicht ein schwarzes Standardbild mit dem Hinweis, dass es auch in Rot gibt.
KI-Shopping-Assistenten. ChatGPT, Perplexity und Google AI matchen Anfragen mit Produktdaten. “Finde mir ein weißes T-Shirt aus Baumwolle unter 30 Euro” findet eher ein separates Produkt “Weißes Bio-Baumwoll-T-Shirt” als eine generische Seite “T-Shirt” mit Weiß als einer von 8 Varianten.
Filter auf Kollektionsseiten
Shopify-Kollektionsfilter arbeiten auf Produktebene. Wenn ein Kunde nach “Blau” filtert, zeigt Shopify alle Produkte, die eine blaue Variante haben. Aber die Produktkarte zeigt trotzdem die Standardfarbe. Bei separaten Produkten ist das anders: Das Produkt “T-Shirt Blau” hat nur blaue Bilder. Der Filter zeigt es, und die Karte zeigt ein blaues Bild. Perfekt.
Das löst eines der frustrierendsten Probleme im Shopify-E-Commerce. Kunden filtern nach einer Farbe und sehen die richtige Farbe auf der Karte. Kein Raten mehr.
Einrichtung Schritt für Schritt
- Produkte anlegen. Für jede Farbe ein separates Produkt erstellen (oder vorhandene nutzen). Eigener Titel, eigene Bilder, eigener Preis.
- Rubik Combined Listings installieren und den App-Embed im Theme-Editor aktivieren.
- Gruppe erstellen. Zusammengehörige Produkte in eine Gruppe ziehen und Farbwerte zuweisen. Oder die Bulk-Gruppierung nutzen, die Hunderte Produkte anhand von Titelmustern automatisch verbindet.
- Presets wählen. Produktseiten-Preset (11 Optionen) und Kollektionsseiten-Preset (8 Optionen) auswählen.
- Testen. Kollektion öffnen, Farbpunkte unter den Produktkarten prüfen. Hover über verschiedene Farben testen. Filter testen.
Falls Sie bereits separate Produkte haben (z. B. durch eine POD-App), fällt Schritt 1 weg. Die Bulk-Gruppierung erkennt zusammengehörige Produkte automatisch und spart bei großen Katalogen Stunden.
Wie Combined Listings im Grundprinzip funktionieren, erklärt unser Beitrag Was sind Shopify Combined Listings? im Detail.
So sieht es in Aktion aus
Separate Produkte mit Farbfeldern auf einer echten Shopify-Kollektionsseite:
Häufig gestellte Fragen
Kann Shopify jede Variante als eigene Karte auf der Kollektionsseite zeigen?
Nicht direkt. Shopify zeigt eine Karte pro Produkt, nicht pro Variante. Die Lösung: Jede Farbe als eigenes Produkt anlegen und mit einer Combined-Listings-App verbinden. Dann erscheint jede Farbe als eigene Karte mit Farbfeldern für die anderen Optionen.
Wechselt das Produktbild auf der Karte bei Hover?
Ja. Rubik Combined Listings unterstützt Bildwechsel bei Hover über die Farbpunkte. Der Kunde fährt mit der Maus über einen Swatch und sieht sofort das passende Produktbild auf der Karte. Ohne die Seite zu verlassen.
Funktionieren Kollektionsfilter mit separaten Produkten besser?
Ja. Bei Varianten filtert Shopify auf Produktebene und zeigt oft das falsche Farbbild. Bei separaten Produkten zeigt der Filter “Blau” nur blaue Produkte mit blauen Bildern. Filter funktionieren so, wie Kunden es erwarten.
Brauche ich Shopify Plus für Kollektions-Swatches?
Nein. Rubik Combined Listings funktioniert auf jedem Shopify-Plan. Die native Shopify-Funktion braucht Plus und bietet keine Kollektionsseiten-Swatches. Rubik bietet 8 Presets für Kollektions-Swatches auf jedem Plan.
Bringt das SEO-Vorteile?
Ja. Jede Farbe als eigenes Produkt hat eine eigene URL, eigenen Title-Tag und eigene Meta-Beschreibung. Google indexiert jede Seite separat. In Google Shopping erscheint jede Farbe mit dem richtigen Bild. Mehr Seiten bedeuten mehr Sichtbarkeit.
