Shopify Farbfelder anpassen: Formen, Farben, Stile
Farbfelder installiert, Bilder zugewiesen, alles funktioniert. Aber die Swatches sehen nicht so aus, wie Sie wollen. Zu klein. Falsche Form. Der Rahmen passt nicht zum Design. Die ausverkauften Varianten sind nicht klar genug markiert.
Rubik Variant Images gibt Ihnen die volle Kontrolle über das Aussehen Ihrer Farbfelder. Über 100 CSS-Variablen, ein visueller Editor und ein KI-Assistent, der CSS auf Zuruf schreibt. In diesem Beitrag zeige ich, was Sie alles anpassen können.
In diesem Beitrag
- Die drei Swatch-Typen
- Formen: rund, eckig, abgerundet
- Größe und Abstände
- Rahmen und Auswahlstile
- Hover-Effekte
- Ausverkauft-Markierung
- Tooltip-Anpassung
- Der KI Visual Settings Assistant
- Warum Shadow DOM wichtig ist
- Video
- Häufig gestellte Fragen
- Weiterlesen
Die drei Swatch-Typen
Bevor es um die Optik geht: Rubik unterstützt drei verschiedene Swatch-Typen, und jeder lässt sich unabhängig gestalten.
Farb-Swatches. Ein Kreis oder Quadrat, gefüllt mit einer Volltonfarbe. Am besten für Optionen wie Rot, Blau, Schwarz, wo die Farbe selbst die Information ist. Rubik erkennt gängige Farbnamen automatisch und ordnet den passenden Farbcode zu.
Produktbild-Swatches. Kleine Thumbnails mit einem Foto der jeweiligen Variante. Ideal für Muster, Drucke, Stoffe oder Produkte, bei denen der Schnitt je nach Farbe unterschiedlich wirkt. Der Kunde sieht das Produkt, nicht nur eine Farbe.
Pillen-Buttons. Abgerundete Rechtecke mit Textbeschriftung. Für Optionen, die sich nicht visuell darstellen lassen: Größe (S, M, L), Material (Baumwolle, Leinen), Modell (Standard, Pro).
Das Besondere: Sie können verschiedene Typen pro Option mischen. Farbkreise für die Farboption, Pillen für die Größe, Thumbnails für das Design. Alles auf derselben Produktseite.
Formen: rund, eckig, abgerundet
Die Form der Swatches bestimmt den ersten Eindruck. Rubik bietet drei Grundformen:
Kreise (Circle). Der Klassiker. Runde Farbfelder, wie bei den meisten großen Shops. Wirkt clean und modern. Gut für minimalistische Designs.
Quadrate (Square). Scharfe Ecken, geometrischer Look. Passt zu kantigen Designs und Shops mit technischem oder industriellem Stil. Bei Produktbild-Thumbnails zeigen Quadrate mehr vom Bild als Kreise.
Abgerundet (Rounded). Quadrate mit abgerundeten Ecken. Der Mittelweg. Weicher als ein Quadrat, aber mit mehr Bildfläche als ein Kreis. Sehr beliebt bei Mode-Shops.
Die Form lässt sich über die CSS-Variable --swatch-border-radius steuern. 50% ergibt einen Kreis, 0% ein Quadrat, alles dazwischen eine Zwischenform. Im visuellen Editor klicken Sie einfach auf die gewünschte Form.
Größe und Abstände
Standardmäßig sind Rubik-Swatches 34×34 Pixel groß. Das funktioniert für die meisten Shops. Aber nicht für alle.
Schmuck-Shops mit feinen Farbnuancen brauchen größere Swatches, damit der Unterschied zwischen Roségold und Gelbgold erkennbar ist. Shops mit 20+ Farben pro Produkt brauchen vielleicht kleinere Swatches, damit nicht zwei Reihen entstehen.
Anpassbare Werte: Breite und Höhe (gleich oder unterschiedlich für nicht-quadratische Formen), Abstand zwischen Swatches (horizontal und vertikal), Abstand zur Optionsbezeichnung oberhalb der Swatches.
Rahmen und Auswahlstile
Wie zeigt der Kunde, welche Farbe gerade ausgewählt ist? Rubik bietet mehrere Varianten:
Rahmen-Hervorhebung. Der ausgewählte Swatch bekommt einen dickeren Rahmen oder eine andere Rahmenfarbe. Standard ist ein 2px-Rahmen in Schwarz um den aktiven Swatch.
Outline mit Abstand. Statt eines Rahmens direkt am Swatch ein separater Ring mit etwas Abstand. Das sieht bei Farbkreisen besonders gut aus, weil die Farbe nicht vom Rahmen “gefressen” wird.
Skalierung. Der ausgewählte Swatch wird etwas größer als die anderen. Subtil, aber effektiv.
Nicht-ausgewählte Swatches können einen dezenten Rahmen haben oder rahmenlos sein. Bei weißen Farbfeldern auf weißem Hintergrund ist ein leichter Rahmen sinnvoll, damit der Swatch überhaupt sichtbar ist.
Hover-Effekte
Was passiert, wenn der Kunde mit der Maus über einen Swatch fährt? Rubik bietet anpassbare Hover-Effekte:
Rahmenfarbe bei Hover. Der Rahmen wechselt zu einer anderen Farbe, wenn der Cursor über den Swatch fährt. Gibt dem Kunden visuelles Feedback, dass der Swatch klickbar ist.
Skalierung bei Hover. Der Swatch wird beim Drüberfahren etwas größer. Kombinierbar mit der Rahmenänderung. Achtung: Bei kleinen Swatches kann das benachbarte Elemente verschieben. transform: scale() vermeidet das, weil es den Swatch visuell vergrößert, ohne das Layout zu ändern.
Tooltip bei Hover. Zeigt den Namen der Option (z. B. “Marineblau”) über dem Swatch. Details dazu im nächsten Abschnitt.
Ausverkauft-Markierung
Was passiert mit Swatches, wenn eine Variante ausverkauft ist? Drei Optionen:
Durchgestrichene Linie. Eine diagonale Linie über dem Swatch. Der Klassiker. Sofort erkennbar, aber die Farbe bleibt sichtbar.
Reduzierte Deckkraft. Der Swatch wird halbtransparent. Dezenter als eine Linie, aber bei ähnlichen Farben schwerer zu erkennen.
Komplett ausblenden. Der Swatch verschwindet. Nur verfügbare Varianten werden gezeigt. Sinnvoll, wenn viele Varianten regelmäßig ausverkauft sind und das Raster sonst unübersichtlich wird.
Sie können auch festlegen, ob ausverkaufte Swatches noch klickbar sind. Manche Shops wollen, dass Kunden eine nicht verfügbare Variante auswählen können, um sich für eine Benachrichtigung anzumelden (“Back in Stock”).
Tooltip-Anpassung
Tooltips zeigen den Optionsnamen über dem Swatch, wenn der Kunde mit der Maus darüberfährt. Bei Farbkreisen ist das praktisch, weil der Kunde sonst nicht weiß, ob “der dritte blaue Kreis” Marineblau, Königsblau oder Stahlblau ist.
Rubik erlaubt die Anpassung von: Hintergrundfarbe des Tooltips, Textfarbe, Schriftgröße, Eckenradius und Position (über oder unter dem Swatch). Auf mobilen Geräten werden Tooltips automatisch als statischer Text unter der Swatch-Leiste angezeigt, weil Hover auf Touchscreens nicht existiert.
Der KI Visual Settings Assistant
Nicht jeder Shop-Betreiber schreibt gerne CSS. Deshalb gibt es den KI Visual Settings Assistant. Beschreiben Sie in natürlicher Sprache, wie Ihre Swatches aussehen sollen, und die KI generiert die passenden CSS-Variablen.
Beispiele, die funktionieren:
- “Mach die Farbfelder rund und 40 Pixel groß”
- “Schwarzer Rahmen um den ausgewählten Swatch, 3 Pixel breit”
- “Ausverkaufte Varianten mit diagonaler Linie markieren und halb durchsichtig machen”
- “Tooltip in Weiß auf schwarzem Hintergrund”
- “Gleicher Stil wie auf nike.com”
Die KI kennt alle CSS-Variablen von Rubik und generiert nur gültige Werte. Sie sehen eine Vorschau, bevor Sie die Änderungen übernehmen. Kein Risiko, etwas kaputt zu machen.
Für Shops, die CSS-Erfahrung haben, gibt es den Advanced CSS Editor. Hier können Sie jede der 100+ Variablen direkt bearbeiten. Alles wird im Shadow DOM isoliert, sodass Ihre Änderungen keine anderen Teile der Seite beeinflussen.
Warum Shadow DOM wichtig ist
Rubik rendert Swatches in einem Shadow DOM. Das bedeutet: Das CSS Ihrer Swatches ist vollständig vom Theme-CSS isoliert. Theme-Updates können Ihre Swatch-Styles nicht überschreiben. Und Ihre Swatch-Anpassungen können das Theme-Design nicht beschädigen.
Bei anderen Swatch-Apps landen die Styles im globalen CSS. Jedes Theme-Update, jede neue App, jedes Custom-CSS kann die Swatches unbeabsichtigt verändern. Mit Shadow DOM passiert das nicht. Ihre Anpassungen bleiben genau so, wie Sie sie eingestellt haben.
Farbfelder in Aktion
Sehen Sie, wie verschiedene Swatch-Stile auf einem echten Shopify-Shop aussehen:
Häufig gestellte Fragen
Kann ich Shopify-Farbfelder ohne CSS-Kenntnisse anpassen?
Ja. Rubik bietet einen visuellen Editor mit Klick-Auswahl für Form, Größe und Rahmen. Zusätzlich gibt es den KI Visual Settings Assistant: Beschreiben Sie in Ihren Worten, wie die Swatches aussehen sollen, und die KI generiert das passende CSS.
Können Farbfelder verschiedene Formen haben?
Ja. Rubik unterstützt Kreise, Quadrate und abgerundete Quadrate. Die Form lässt sich über den Eckenradius stufenlos einstellen. Verschiedene Optionen (Farbe, Größe) können unterschiedliche Swatch-Typen und -Formen haben.
Was ist der KI Visual Settings Assistant?
Ein KI-Assistent in der Rubik-App, der CSS auf Basis natürlicher Sprache generiert. Sagen Sie “runde Swatches, 40px groß, schwarzer Rahmen” und die KI erstellt die passenden CSS-Variablen. Sie sehen eine Vorschau vor dem Speichern.
Wie markiere ich ausverkaufte Varianten?
Drei Optionen: durchgestrichene Linie, reduzierte Deckkraft oder komplett ausblenden. Sie können auch festlegen, ob ausverkaufte Swatches noch klickbar bleiben (z. B. für “Back in Stock”-Benachrichtigungen).
Können Theme-Updates meine Swatch-Anpassungen überschreiben?
Nein. Rubik rendert Swatches im Shadow DOM, isoliert vom Theme-CSS. Ihre Anpassungen bleiben bei Theme-Updates, App-Installationen und Custom-CSS-Änderungen unberührt.
Weiterlesen
