Farbfelder (Swatches) auf Shopify-Kollektionsseiten anzeigen (Dawn, Horizon & jedes Theme)

Die meisten Shopify-Shops bieten Produkte in mehreren Farben an, doch diese Optionen sind beim Durchstöbern einer Kollektion nicht immer sichtbar.

Ein Produkt ist vielleicht in Schwarz, Weiß, Oliv und Navy erhältlich, während die Kollektionsseite nur ein einziges Produktbild zeigt. Kunden müssen erst die Produktseite öffnen, um die anderen Farben überhaupt zu entdecken.

Farbfelder (Swatches) auf Shopify-Kollektionsseiten lösen dieses Problem, indem sie die verfügbaren Variantenfarben direkt unter jeder Produktkarte anzeigen.

Wie Sie das umsetzen, hängt von Ihrem Shopify-Theme ab. Dawn und Horizon gehen unterschiedlich mit Farbfeldern um, und nicht jedes Theme kann Farbfelder nativ auf den Produktkarten von Kollektionen anzeigen.

In diesem Leitfaden erklären wir die Unterschiede und zeigen, wie Sie Farb-, Bild- oder Button-Swatches mit Stamp — Show Variants on Collection zu Kollektionsseiten hinzufügen.

Was sind Farbfelder auf einer Shopify-Kollektionsseite?

Farbfelder sind kleine visuelle Auswahlelemente, die unter einer Produktkarte angezeigt werden.

Statt nur ein einziges Produktbild zu sehen, erkennen Käufer sofort, dass das Produkt auch in anderen Farben erhältlich ist.

Eine Jacke könnte zum Beispiel als eine einzige Produktkarte erscheinen, mit:

Schwarz
Oliv
Sand
Navy

dargestellt als vier kleine Farbfelder darunter.

So erhalten Kunden mehr Informationen, ohne jedes Produkt einzeln öffnen zu müssen.

Farbfelder vs. Varianten als separate Produkte

Es gibt zwei gängige Wege, Shopify-Varianten auf Kollektionsseiten sichtbarer zu machen.

Farbfelder behalten eine einzige Produktkarte bei und zeigen die Variantenoptionen darunter an.

Varianten als Produkte zeigen ausgewählte Varianten als einzelne Karten im Kollektionsraster an.

Zum Beispiel:

Mit Farbfeldern: eine einzige Karte „Classic T-Shirt“ mit den Farbfeldern Schwarz, Weiß und Grün darunter.
Mit Varianten als Produkte: Classic T-Shirt Schwarz, Classic T-Shirt Weiß und Classic T-Shirt Grün erscheinen jeweils separat in der Kollektion.

Wenn Sie Varianten stattdessen als einzelne Produktkarten anzeigen möchten, lesen Sie unseren Leitfaden:

Varianten auf der Kollektionsseite in Shopify anzeigen

Kann Shopify Farbfelder auf Kollektionsseiten anzeigen?

Das hängt von Ihrem Theme ab.

Shopify unterstützt Swatch-Daten für Produktoptionen, aber Ihr Theme entscheidet, wo und wie diese Daten angezeigt werden.

Das bedeutet: Farbfelder auf Ihrer Produktseite bedeuten nicht automatisch, dass dieselben Farbfelder auch auf den Produktkarten der Kollektion erscheinen.

Kann Dawn Farbfelder auf Kollektionsseiten anzeigen?

Nicht nativ auf den Produktkarten von Kollektionen.

Das Shopify-Theme Dawn unterstützt Farbfelder über die Variantenauswahl auf der Produktseite. Wenn für die Farboption eines Produkts Shopify-Swatch-Daten konfiguriert sind, kann Dawn diese auf der Produktseite als Farb- oder Bildfeld anzeigen.

Dawn bietet jedoch keine native Einstellung im Theme-Editor, um diese Varianten-Farbfelder unter den Produktkarten auf Kollektionsseiten anzuzeigen.

Wenn Sie Folgendes öffnen:

Onlineshop → Themes → Anpassen → Kollektion

finden Sie keine integrierte Einstellung wie „Farbfelder anzeigen“ für die Kollektions-Produktkarten von Dawn.

Technisch könnte ein Entwickler eigenen Liquid-, CSS- und JavaScript-Code schreiben, um diese Funktion zu Dawn hinzuzufügen. Dafür muss jedoch die Produktkarten-Implementierung des Themes geändert und bei jeder Theme-Änderung weiter gepflegt werden.

Wenn Sie Farbfelder auf Dawn-Kollektionsseiten anzeigen möchten, ohne eigenen Theme-Code zu entwickeln und zu pflegen, können Sie Stamp — Show Variants on Collection verwenden.

Kann Horizon Farbfelder anzeigen?

Ja. Horizon unterstützt Farbfelder nativ.

Horizon ist Teil der neueren Theme-Architektur von Shopify und unterstützt nativ Farbfelder und Farbfeld-Filter.

Wenn Sie Horizon verwenden, konfigurieren Sie zunächst die Farboption Ihres Produkts mit den Swatch-Daten von Shopify.

Verknüpfen Sie dazu Ihre Produktoption mit dem Shopify-Kategorie-Metafeld „Farbe“ und weisen Sie jedem Optionswert die passende Farbe oder das passende Bild zu.

Nachdem Sie die Swatch-Daten konfiguriert haben, öffnen Sie:

Onlineshop → Themes → Anpassen

und prüfen Sie die verfügbaren Einstellungen für Produktkarten und Produktraster in Ihrem Horizon-Theme.

Horizon nutzt die neuere, blockbasierte Theme-Architektur von Shopify, sodass sich Farbfelder natürlicher in das Theme integrieren lassen als bei Dawn.

Native Theme-Farbfelder und eine App wie Stamp lösen jedoch leicht unterschiedliche Probleme.

Wann sollten Sie Stamp statt der nativen Horizon-Farbfelder verwenden?

Wenn die nativen Farbfelder von Horizon Ihnen bereits genau das gewünschte Kollektionslayout bieten, können Sie diese verwenden.

Stamp ist jedoch hilfreich, wenn Sie mehr Kontrolle darüber brauchen, wie Varianten in Ihrem Shop dargestellt werden.

Mit Stamp können Sie Varianten-Farbfelder zum Beispiel für folgende unterstützte Bereiche konfigurieren:

Kollektionsseiten
Suchergebnisse
Stamp-Produktbereiche

Außerdem können Sie verschiedene visuelle Stile und Datenquellen wählen, statt sich vollständig auf das zu verlassen, was Ihr Theme bietet.

Das ist besonders nützlich, wenn Sie dieselbe Variantendarstellung möchten – unabhängig davon, ob Ihr Shop Dawn, Horizon oder ein anderes Shopify-Theme verwendet.

So zeigen Sie Farbfelder auf Shopify-Kollektionsseiten mit Stamp an

Die einfachste theme-unabhängige Lösung ist Stamp — Show Variants on Collection.

Stamp wurde speziell dafür entwickelt, Shopify-Varianten in Produktrastern anzuzeigen.

Statt die Produktkarten Ihres Themes umzuschreiben, konfigurieren Sie die Variantendarstellung direkt in der App.

Schritt 1: Stamp installieren

Installieren Sie Stamp — Show Variants on Collection aus dem Shopify App Store.

Schritt 2: Die Stamp-App-Einbettung aktivieren

Gehen Sie zu:

Shopify-Adminbereich → Onlineshop → Themes → Anpassen → App-Einbettungen

Aktivieren Sie die Stamp-App-Einbettung und speichern Sie Ihr Theme.

Schritt 3: Varianten-Farbfelder aktivieren

Öffnen Sie Stamp und aktivieren Sie die Farbfeld-Funktion für Ihre Kollektionsseiten.

Ihre Produkte bleiben dann normale Produktkarten, während ihre Variantenoptionen darunter angezeigt werden.

Wählen Sie, wie Ihre Shopify-Farbfelder angezeigt werden

Stamp unterstützt mehrere Swatch-Stile, je nachdem, welche Art von Option Sie anzeigen möchten.

Farbfelder

Farbfelder eignen sich ideal für einfache Farboptionen.

Zum Beispiel:

Schwarz
Weiß
Blau
Grün
Rot

können als farbige Felder statt als reiner Text angezeigt werden.

Bildfelder

Manchmal reicht eine einfarbige Fläche nicht aus, um eine Variante darzustellen.

Bildfelder eignen sich besser für:

Muster
Stoffstrukturen
Drucke
Holzoberflächen
Materialien
Mehrfarbige Designs

Statt eines einfachen Farbkreises sieht der Käufer ein Bild, das diese Option darstellt.

Button-Swatches

Nicht jede Variante muss durch eine Farbe dargestellt werden.

Stamp kann Variantenwerte auch als Buttons anzeigen.

Das ist nützlich für Optionen wie:

S / M / L / XL
25 cm / 30 cm / 35 cm
250 ml / 500 ml / 1 L

Wählen Sie die Quelle für den Farbfeld-Wert

Mit Stamp können Sie außerdem steuern, welche Quelle zur Erzeugung Ihrer Farbfelder verwendet wird.

Variante

Sie können das Farbfeld direkt aus dem Optionswert der Produktvariante erzeugen.

Theme-Swatch

Wenn Sie für Ihre Produkte bereits Shopify-Swatch-Daten konfiguriert haben, kann Stamp diese vorhandenen Werte verwenden.

Das ist praktisch, wenn Ihre Produktseite bereits korrekt konfigurierte Farb- oder Bildfelder hat und Sie diese auf Kollektionsseiten wiederverwenden möchten.

Metafeld

Für fortgeschrittene Katalog-Setups können Sie Metafeld-Daten als Quelle für Ihre Farbfelder verwenden.

Das Aussehen der Kollektions-Farbfelder anpassen

Farbfelder sollten sich natürlich in das Design Ihres Shops einfügen.

Stamp bietet Einstellungen, mit denen Sie gestalten können, wie sie unter den Produktkarten erscheinen.

Je nach Konfiguration können Sie unter anderem folgende Einstellungen anpassen:

Form der Farbfelder
Größe der Farbfelder
Höhe
Rahmenbreite
Rahmenfarbe
Ausrichtung
Ränder und Abstände

Ein Modegeschäft könnte zum Beispiel kleine runde Farbfelder verwenden, während ein Möbel- oder Stoffgeschäft größere Bildfelder bevorzugt.

Farbfelder für ausverkaufte Varianten anzeigen

Ein Produkt kann in sechs Farben existieren, von denen aktuell nur vier verfügbar sind.

Statt die nicht verfügbaren Farben komplett auszublenden, können Sie sie optisch von den verfügbaren Varianten unterscheiden.

So verstehen Kunden, dass es das Produkt in dieser Farbe gibt, ohne dass die nicht verfügbare Option auswählbar wirkt.

Farbfelder in Dawn mit Stamp anzeigen

Für Dawn-Shops ist Stamp besonders nützlich, da Dawn keine native Farbfeld-Einstellung für Kollektionskarten hat.

Sie können Ihre bestehenden Dawn-Produktkarten beibehalten und mit Stamp Varianten-Farbfelder darunter hinzufügen, ohne den Kollektions-Produktkarten-Code von Dawn manuell umbauen zu müssen.

So können Sie Folgendes hinzufügen:

Farbfelder
Bildfelder
Button-Swatches

und gleichzeitig Ihr bestehendes Dawn-Kollektionslayout weiter nutzen.

Farbfelder in Horizon mit Stamp anzeigen

Horizon unterstützt Shopify-Farbfelder bereits nativ, daher brauchen Sie für grundlegende Farbfeld-Funktionen nicht unbedingt eine App.

Stamp kann dennoch nützlich sein, wenn Sie eine einheitlichere Kontrolle darüber möchten, wie Varianten auf Kollektionsseiten, in Suchergebnissen und in anderen unterstützten Produktbereichen dargestellt werden.

Das bedeutet auch, dass Ihr Varianten-Merchandising nicht vollständig an ein einziges Theme gebunden ist.

Wenn Sie später von Horizon zu einem anderen Theme wechseln, können Sie die Variantendarstellung Ihrer Kollektionen weiterhin über Stamp verwalten, statt das gesamte Setup für das neue Theme neu aufzubauen.

Farbvarianten und Farbfelder kombinieren

Sie müssen sich nicht zwischen Varianten als Produkte und Varianten-Farbfeldern entscheiden.

Mit Stamp können Sie auch beide Ansätze kombinieren.

Stellen Sie sich zum Beispiel eine Jacke vor mit:

5 Farben
4 Größen

Sie könnten jede Farb-Variante als eigene Produktkarte in der Kollektion anzeigen und die Größe als Button-Swatches unter jeder Karte darstellen.

Ihre Kollektion könnte dann so aussehen:

Classic Jacket — Schwarz
S M L XL

Classic Jacket — Oliv
S M L XL

Classic Jacket — Navy
S M L XL

So erhalten Kunden deutlich mehr Varianteninformationen direkt auf der Kollektionsseite – ohne separate Shopify-Produkte.

Welche Methode sollten Sie verwenden?

Wenn Sie Dawn verwenden und Farbfelder unter den Produktkarten der Kollektion möchten, gibt es dafür keine native Einstellung. Sie benötigen entweder eine individuelle Theme-Entwicklung oder eine App wie Stamp.

Wenn Sie Horizon verwenden, bietet Shopify bereits native Farbfelder. Prüfen Sie, ob die native Umsetzung des Themes das gewünschte Erlebnis bietet.

Wenn Sie mehr Kontrolle über die Variantendarstellung möchten oder dieselbe Funktion über verschiedene Themes und Produktraster hinweg benötigen, bietet Stamp eine theme-unabhängige Lösung.

Endergebnis

Wenn Variantenfarben direkt auf der Kollektionsseite angezeigt werden, verstehen Käufer leichter, welche Produkte tatsächlich verfügbar sind – noch bevor sie die Produktseite öffnen.

Mit Stamp — Show Variants on Collection können Sie Farb-, Bild- und Button-Swatches zu Shopify-Kollektionsseiten hinzufügen und steuern, wie Ihre Varianten in Ihrem gesamten Shop dargestellt werden.

Sie nutzen Dawn? Stamp kann Kollektions-Farbfelder hinzufügen, die als native Produktkarten-Einstellung nicht verfügbar sind.

Sie nutzen Horizon? Sie können die native Swatch-Unterstützung von Shopify verwenden – oder Stamp, wenn Sie mehr Kontrolle über die Variantendarstellung in Ihren Kollektionen brauchen.

Sie möchten lieber, dass jede Variante als separater Artikel in der Kollektion erscheint?

Lesen Sie unseren vollständigen Leitfaden: Varianten auf der Kollektionsseite in Shopify anzeigen.