Farbfelder auf Shopify-Kollektionsseiten anzeigen
Sie haben Rubik Variant Images eingerichtet. Auf der Produktseite funktionieren die Farbfelder. Die Galerie filtert beim Variantenwechsel. Alles wie gewünscht.
Dann schauen Sie sich die Kollektionsseite an. Dort sehen Sie die Produktkarten im Raster. Ohne Farbfelder. Kein Farbpunkt unter dem Produktbild. Kein Bildwechsel bei Hover. Der Kunde sieht das Standardbild und weiß nicht, dass es das Produkt in 8 weiteren Farben gibt.
Das ist kein Fehler. Variantenbilder-Apps und Kollektionsseiten-Swatches sind zwei verschiedene Dinge. In diesem Beitrag erkläre ich den Unterschied und wie Sie beides bekommen.
In diesem Beitrag
- Warum Variantenbilder-Apps auf Kollektionsseiten nicht funktionieren
- Der Unterschied zwischen Produkt- und Kollektionsseite
- Was Kunden auf Kollektionsseiten erwarten
- Die Lösung: Rubik Combined Listings
- Wie Kollektionsseiten-Swatches funktionieren
- Wie beide Apps zusammenarbeiten
- Einrichtung
- Video
- Häufig gestellte Fragen
- Weiterlesen
Warum Variantenbilder-Apps auf Kollektionsseiten nicht funktionieren
Rubik Variant Images und andere Variantenbilder-Apps arbeiten auf der Produktseite. Sie greifen auf die Bildergalerie des Produkts zu, filtern Bilder nach Variante und initialisieren den Slider neu. Das funktioniert, weil die Produktseite alle Bilder und Variantendaten geladen hat.
Auf der Kollektionsseite ist das anders. Dort zeigt Shopify nur Produktkarten: ein Bild, ein Titel, ein Preis. Die volle Bildergalerie ist nicht verfügbar. Die Variantendaten sind stark eingeschränkt. Es gibt keinen Slider zum Filtern.
Farbfelder auf Kollektionsseiten sind technisch ein komplett anderes Problem. Sie zeigen nicht verschiedene Bilder desselben Produkts. Sie verweisen auf verschiedene Produkte (oder Varianten), die auf den Produktkarten als kleine Farbpunkte dargestellt werden.
Der Unterschied zwischen Produkt- und Kollektionsseite
Produktseite: Volle Bildergalerie, alle Varianten geladen, Slider mit Thumbnails, Zoom-Funktion. Hier arbeitet Rubik Variant Images: Bilder pro Variante zuweisen, Galerie filtern, Swatches statt Dropdown.
Kollektionsseite: Produktkarte im Raster. Ein Bild, ein Titel, ein Preis. Keine Galerie, kein Slider. Hier brauchen Sie eine App, die kleine Farbpunkte unter das Produktbild setzt und das Bild bei Hover oder Klick wechselt.
Das sind zwei verschiedene Funktionen mit zwei verschiedenen technischen Anforderungen. Keine einzelne App kann beides optimal abdecken, weil die Seitenstruktur grundverschieden ist.
Was Kunden auf Kollektionsseiten erwarten
Große Shops wie H&M, ASOS und Nike zeigen Farbfelder direkt auf den Produktkarten. Der Kunde scrollt durch die Kollektion und sieht sofort: Dieses T-Shirt gibt es in 5 Farben. Er fährt mit der Maus über ein Farbfeld und das Produktbild wechselt. Ohne die Produktseite zu öffnen.
Das spart Klicks. Der Kunde kann Farben vergleichen, ohne jede Produktseite einzeln zu öffnen. Für Shops mit vielen Farbvarianten reduziert das die Absprungrate auf Kollektionsseiten erheblich.
Ohne Farbfelder sieht der Kunde nur das Standardbild. Er weiß nicht, dass es das Produkt auch in seiner Lieblingsfarbe gibt. Er scrollt weiter. Eine verpasste Chance.
Die Lösung: Rubik Combined Listings
Rubik Combined Listings ist eine separate App, die genau diese Funktion liefert. Sie verbindet separate Produkte in Gruppen und zeigt Farbfelder auf Kollektionsseiten und Produktseiten.
- Farbpunkte auf Produktkarten. Kleine Swatches unter dem Produktbild im Kollektionsraster. Farbkreise, Produktbild-Thumbnails oder Text-Buttons.
- Bildwechsel bei Hover. Der Kunde fährt über einen Farbpunkt und das Produktbild wechselt sofort. Ohne Klick, ohne Neuladen.
- Link zur richtigen Produktseite. Klickt der Kunde auf einen Farbpunkt, landet er auf der Produktseite der jeweiligen Farbe.
- 19 Swatch-Presets. Fertige Designs, die Sie direkt verwenden oder anpassen können.
- Per-Group-Styling. Verschiedene Swatch-Designs für verschiedene Produktgruppen.
Die App funktioniert auf jedem Shopify-Plan. Kein Plus nötig. Mehr über die Hintergründe erklärt dieser Beitrag auf craftshift.com.
Wie Kollektionsseiten-Swatches funktionieren
Rubik Combined Listings arbeitet mit Produktgruppen. Sie verbinden separate Produkte (z. B. “Jacke Blau”, “Jacke Rot”, “Jacke Schwarz”) in einer Gruppe. Die App speichert die Verbindung in Metafields.
Auf der Kollektionsseite liest die App die Metafields und rendert Farbfelder unter jedem Produktbild. Bei Hover tauscht sie das Produktbild gegen das Bild des überfahrenen Farbprodukts. Bei Klick leitet sie zur Produktseite weiter.
Das funktioniert, weil jede Farbe ein eigenes Produkt mit eigenem Bild ist. Die App muss keine Galerie filtern. Sie tauscht nur das Vorschaubild auf der Karte.
Wie beide Apps zusammenarbeiten
Die zwei Rubik-Apps ergänzen sich. Sie decken verschiedene Bereiche ab:
Rubik Variant Images (Produktseite): Mehrere Bilder pro Variante. Galeriefilterung. Visuelle Swatches statt Dropdown. Videos und 3D-Modelle pro Variante. KI Auto-Assign.
Rubik Combined Listings (Kollektionsseite + Produktseite): Separate Produkte mit Farbfeldern verbinden. Swatches auf Produktkarten. Bildwechsel bei Hover. Bulk-Gruppierung. Magic Fill KI.
Ein typisches Setup: Rubik Combined Listings verbindet Ihre Farbprodukte mit Swatches auf der Kollektionsseite. Rubik Variant Images filtert die Bildergalerie auf der Produktseite nach Variante (z. B. Größe, Material). Beide Apps laufen gleichzeitig, ohne Konflikte.
Wie Sie Variantenbilder nur für die gewählte Variante anzeigen, erklärt unser Beitrag Nur ausgewählte Variantenbilder in Shopify anzeigen.
Einrichtung
- Rubik Combined Listings installieren. Der kostenlose Plan erlaubt 5 Gruppen.
- App-Einbettung im Theme-Editor aktivieren.
- Produkte in Gruppen organisieren. Manuell oder per Magic Fill (KI).
- Swatch-Design wählen. 19 Presets stehen zur Verfügung.
- Kollektionsseite aufrufen. Farbfelder erscheinen auf den Produktkarten.
Wenn Sie auch Rubik Variant Images nutzen, muss dort nichts umgestellt werden. Beide Apps erkennen sich gegenseitig und arbeiten auf verschiedenen Seitenbereichen.
Wie man Produkte gruppiert und als Varianten verbindet, beschreibt rubikify.com im Detail.
So sieht es in Aktion aus
Farbfelder auf Kollektions- und Produktseiten in einem echten Shopify-Shop:
Häufig gestellte Fragen
Kann Rubik Variant Images Farbfelder auf Kollektionsseiten anzeigen?
Nein. Rubik Variant Images arbeitet auf der Produktseite (Galeriefilterung, Swatches, Bildzuweisung). Für Farbfelder auf Kollektionsseiten brauchen Sie Rubik Combined Listings, eine separate App.
Brauche ich beide Apps?
Das hängt von Ihrem Bedarf ab. Wenn Sie nur die Bildergalerie auf der Produktseite filtern wollen, reicht Rubik Variant Images. Wenn Sie Farbfelder auf Kollektionsseiten brauchen, installieren Sie Rubik Combined Listings. Für beides zusammen nutzen Sie beide Apps.
Funktioniert der Bildwechsel auf Kollektionsseiten bei Hover?
Ja. Rubik Combined Listings wechselt das Produktbild auf der Kollektionsseite, wenn der Kunde mit der Maus über ein Farbfeld fährt. Ohne Klick, ohne Seitenneuladen.
Brauche ich Shopify Plus dafür?
Nein. Rubik Combined Listings funktioniert auf jedem Shopify-Plan: Basic, Standard, Advanced. Die native Shopify-Funktion “Combined Listings” braucht Plus, aber die Rubik-App ist eine eigenständige Alternative.
Gibt es Konflikte, wenn beide Apps gleichzeitig laufen?
Nein. Die Apps arbeiten auf verschiedenen Seitenbereichen. Rubik Variant Images steuert die Produktseiten-Galerie. Rubik Combined Listings steuert die Produktkarten-Swatches. Keine Überschneidung, keine Konflikte.
Weiterlesen
