Shopify Variantenbilder einrichten: Schritt für Schritt
Shopify zeigt beim Variantenwechsel alle Produktbilder gleichzeitig. Der Kunde wählt “Blau” und scrollt durch 40 Fotos, von denen 35 zu anderen Farben gehören. Das ist das Standardverhalten. Es lässt sich nicht in den Einstellungen ändern.
Mit Rubik Variant Images weisen Sie jeder Variante mehrere Bilder zu. Die Galerie filtert sich automatisch, sobald der Kunde eine andere Farbe wählt. Nur die passenden Fotos bleiben sichtbar.
Diese Anleitung führt Sie durch jeden Schritt: von der Installation bis zum fertigen Ergebnis auf Ihrer Produktseite.
In diesem Beitrag
- Voraussetzungen
- Schritt 1: App installieren
- Schritt 2: App-Einbettung aktivieren
- Schritt 3: Produkt öffnen und Bilder zuweisen
- Schritt 4: KI Auto-Assign nutzen
- Schritt 5: Massenzuweisung für viele Produkte
- Gemeinsame Bilder einrichten
- Ergebnis testen
- Farbfelder anpassen
- Video-Anleitung
- Häufig gestellte Fragen
- Weiterlesen
Voraussetzungen
Bevor Sie starten, prüfen Sie diese drei Punkte:
- Produktbilder hochgeladen. Alle Fotos für alle Varianten sollten bereits im Shopify-Admin beim Produkt hochgeladen sein. Rubik arbeitet mit den vorhandenen Bildern.
- Varianten angelegt. Ihr Produkt braucht mindestens eine Option mit Varianten (z. B. Farbe: Blau, Rot, Grün).
- Online Store 2.0 Theme. Die App funktioniert mit allen Themes, die App-Einbettungen unterstützen. Alle kostenlosen Shopify-Themes und die meisten Premium-Themes ab 2021 tun das.
Schritt 1: App installieren
Öffnen Sie den Rubik Variant Images App Store Eintrag und klicken Sie auf “Install”. Die App wird automatisch in Ihrem Shopify-Admin installiert.
Der kostenlose Plan erlaubt 1 Produkt mit allen Funktionen. Damit können Sie die App komplett testen, bevor Sie sich für einen bezahlten Plan entscheiden. Kein Zeitdruck, keine Kreditkarte nötig.
Schritt 2: App-Einbettung aktivieren
Nach der Installation muss die App-Einbettung in Ihrem Theme aktiviert werden. Das geht in 30 Sekunden:
- Gehen Sie im Shopify-Admin zu Online Store > Themes.
- Klicken Sie bei Ihrem aktiven Theme auf Anpassen (Customize).
- Im Theme-Editor klicken Sie links unten auf App-Einbettungen (App embeds).
- Schalten Sie Rubik Variant Images ein.
- Speichern.
Die App kann auch direkt aus dem Dashboard heraus die Aktivierung starten. Klicken Sie auf “Activate” im Setup-Bereich der App. Sie werden automatisch zur richtigen Stelle im Theme-Editor weitergeleitet.
Schritt 3: Produkt öffnen und Bilder zuweisen
Öffnen Sie die Rubik-App in Ihrem Shopify-Admin. Wählen Sie ein Produkt aus der Liste. Sie sehen links alle Produktbilder und rechts die Varianten.
So weisen Sie Bilder manuell zu:
- Variante auswählen. Klicken Sie auf eine Variante (z. B. “Blau”).
- Bilder markieren. Klicken Sie auf die Bilder, die zu dieser Variante gehören. Vorderansicht, Rückseite, Detail, Lifestyle. Wählen Sie so viele, wie Sie möchten.
- Nächste Variante. Wechseln Sie zu “Rot” und wiederholen Sie den Vorgang.
- Speichern. Klicken Sie auf “Save”. Die Zuordnung wird in Shopify-Metafeldern gespeichert.
Pro Variante empfehle ich 5 bis 6 Bilder: Frontalansicht, Rückansicht, Detailaufnahme, Größenvergleich und ein Lifestyle-Foto. Mehr Blickwinkel reduzieren Unsicherheit und damit Retouren.
Schritt 4: KI Auto-Assign nutzen
Manuelles Zuweisen funktioniert gut bei wenigen Produkten. Bei 50 oder mehr wird es zeitaufwändig. Die KI-Funktion beschleunigt den Prozess erheblich.
Klicken Sie auf den Auto-Assign-Button auf der Produktseite in der App. Die KI analysiert vier Datenpunkte pro Bild:
- Produktname. “Winterjacke Premium” gibt der KI den Kontext.
- Variantenname/-wert. “Blau”, “Rot”, “Schwarz”.
- Dateiname. “winterjacke-blau-front.jpg” enthält die Farbinformation.
- Alt-Text. “Blaue Winterjacke Vorderansicht” liefert zusätzliche Klarheit.
Die KI ordnet die Bilder den Varianten zu und zeigt Ihnen das Ergebnis. Sie prüfen es, korrigieren falls nötig und speichern. Pro Produkt dauert das unter einer Minute.
Die Genauigkeit der KI hängt von der Qualität der Datenpunkte ab. Aussagekräftige Dateinamen und Alt-Texte verbessern die Trefferquote deutlich. “IMG_4829.jpg” gibt der KI weniger Anhaltspunkte als “jacke-marineblau-front.jpg”.
Schritt 5: Massenzuweisung für viele Produkte
Bei Hunderten von Produkten ist selbst die KI-Einzelzuweisung zu langsam. Dafür gibt es die Massenzuweisung (Bulk Assign).
So funktioniert es: Die Massenzuweisung basiert auf der Bildreihenfolge in der Shopify-Galerie. Jede Bildergruppe beginnt mit dem von Shopify zugewiesenen Variantenbild. Die App erkennt diese Grenze und weist die folgenden Bilder der jeweiligen Variante zu.
Voraussetzung: Ihre Bilder müssen in der Shopify-Galerie nach Varianten sortiert sein. Alle blauen Bilder zusammen, alle roten Bilder zusammen. Jede Gruppe beginnt mit dem Bild, das in Shopify als Variantenbild gesetzt ist.
- Öffnen Sie die Bulk Assign-Funktion in der Rubik-App.
- Wählen Sie, ob alle Produkte oder nur bestimmte verarbeitet werden sollen.
- Starten Sie den Vorgang. Die App läuft im Hintergrund.
- Sie werden benachrichtigt, sobald die Zuweisung abgeschlossen ist.
Die Massenzuweisung ist kein KI-Feature. Sie nutzt keine KI, sondern reine Bildreihenfolge-Erkennung. Sicher zum Wiederholen. Wenn Sie neue Bilder hochladen, können Sie die Massenzuweisung erneut starten.
Gemeinsame Bilder einrichten
Manche Bilder gehören nicht zu einer bestimmten Variante, sondern sollen immer sichtbar sein. Größentabellen, Pflegehinweise, Verpackungsfotos oder Lifestyle-Bilder, die für alle Farben gelten.
Markieren Sie diese Bilder in der App als gemeinsame Bilder (Common Images). Sie bleiben in der Galerie, egal welche Variante der Kunde wählt. Sie bestimmen auch die Position: vor oder nach den variantenspezifischen Bildern.
Ein typisches Setup: 5 Farbfotos pro Variante + 2 gemeinsame Bilder (Größentabelle und Verpackung). Der Kunde sieht immer 7 Bilder, davon 5 farbspezifisch und 2 allgemein.
Ergebnis testen
Nach dem Speichern rufen Sie Ihre Produktseite auf. Wählen Sie verschiedene Varianten und prüfen Sie:
- Filtert die Galerie korrekt? Nur Bilder der gewählten Variante sichtbar?
- Sind gemeinsame Bilder sichtbar? Unabhängig von der Variante?
- Funktioniert der Slider? Keine leeren Slides, kein Springen?
- Testen Sie auf dem Handy. Die mobile Ansicht ist für die meisten Shops wichtiger als Desktop.
Falls etwas nicht stimmt, prüfen Sie als Erstes, ob die App-Einbettung aktiv ist (Schritt 2). Das ist die häufigste Fehlerquelle. Weitere Hilfe finden Sie im Beitrag Variantenbilder werden nicht angezeigt? So beheben Sie es.
Farbfelder anpassen
Die Standard-Farbfelder funktionieren sofort. Aber Sie können sie anpassen: Größe, Form, Abstände, Rahmen, Hover-Effekte. Rubik bietet dafür zwei Wege:
- Manueller Style-Editor. 70+ Einstellungen für Größe, Radius, Farbe, Rahmen, Tooltip-Stil und mehr.
- KI Visual Settings Assistant. Tippen Sie z. B. “Mach die Farbfelder rund und größer” und die KI passt die Einstellungen an. Funktioniert auf Deutsch und Englisch.
Drei Swatch-Typen stehen zur Verfügung: Farbkreise, Produktbild-Thumbnails und Pillen-Buttons. Sie können verschiedene Typen pro Option verwenden. Farbkreise für die Option “Farbe”, Pillen für “Größe”. Auf demselben Produkt.
Die Farbfelder rendern im Shadow DOM. Das bedeutet: Ihr Theme-CSS kann die Swatches nicht versehentlich kaputt machen. Und das Swatch-CSS beeinflusst nicht Ihr Theme-Design.
Mehr dazu: Nur ausgewählte Variantenbilder anzeigen.
Video-Anleitung
Sehen Sie die komplette Einrichtung in Aktion:
Häufig gestellte Fragen
Wie lange dauert die Einrichtung?
Installation und Aktivierung dauern 2 Minuten. Die Bildzuweisung pro Produkt dauert manuell 3-5 Minuten, mit KI Auto-Assign unter einer Minute. Massenzuweisung für den gesamten Katalog läuft im Hintergrund.
Muss ich Code ändern?
Nein. Rubik Variant Images funktioniert über die App-Einbettung im Theme-Editor. Kein Liquid-Code, kein JavaScript, kein CSS nötig. Die App unterstützt über 350 Themes mit nativem Code.
Was ist der Unterschied zwischen KI Auto-Assign und Massenzuweisung?
KI Auto-Assign analysiert 4 Datenpunkte pro Bild (Produktname, Variantenname, Dateiname, Alt-Text) und ordnet Bilder intelligent zu. Funktioniert pro Produkt. Massenzuweisung nutzt die Bildreihenfolge in der Shopify-Galerie und weist automatisch zu. Kein KI, reine Reihenfolge-Erkennung. Läuft über Hunderte Produkte.
Verlangsamt die App meinen Shop?
Rubik speichert alle Daten in Shopify-Metafeldern. Metafield-basiert, keine externen API-Aufrufe nach dem Laden. Die Farbfelder rendern im Shadow DOM. Kein Einfluss auf Core Web Vitals.
Was kostet die App?
Free ($0, 1 Produkt), Starter ($25/Monat, 100 Produkte), Advanced ($50/Monat, 1.000 Produkte), Premium ($75/Monat, unbegrenzt). Flat Pricing: Kein Aufpreis für höhere Shopify-Pläne.
Weiterlesen
