Rubik Variant Images Guides, Shopify Tips & Tutorials

Nur ausgewählte Variantenbilder in Shopify anzeigen: So funktioniert es

March 31, 2026
Shopify Produktseite mit Variantenbilder-Swatches für Baseballkappe

Ein Kunde klickt auf “Blau”. Das Hauptbild wechselt. Aber in der Galerie darunter? Da stehen immer noch alle Fotos: Rot, Schwarz, Grün, Beige. 40 Bilder durcheinander, ohne erkennbare Zuordnung. Der Kunde scrollt und fragt sich: Welches Foto gehört eigentlich zu meiner Farbe?

Shopify filtert Produktbilder nicht nach Variante. Das ist kein Fehler, sondern so gebaut. Die Plattform behandelt Bilder als flache Liste. Beim Variantenwechsel ändert sich das Hauptbild, aber der Rest der Galerie bleibt unverändert.

Das lässt sich ändern. In diesem Beitrag zeige ich, wie Sie die Galerie so einrichten, dass nur die Bilder der gewählten Variante sichtbar sind.

In diesem Beitrag

Warum Shopify alle Bilder gleichzeitig zeigt

Im Shopify-Produktmodell gehören Bilder zum Produkt, nicht zur einzelnen Variante. Pro Variante können Sie genau ein Bild zuweisen. Wird diese Variante ausgewählt, zeigt Shopify dieses Bild als Hauptbild. Alle anderen Bilder bleiben trotzdem sichtbar.

Ein Produkt mit 8 Farben und 5 Fotos pro Farbe hat 40 Bilder in der Galerie. Immer. Egal welche Farbe der Kunde wählt. Es gibt keine Einstellung, um das zu ändern.

Shopify speichert Bilder als flache Liste ohne Gruppierungskonzept. Es gibt keine Zuordnung “Bild X gehört zu Variante Y” auf Plattformebene. Genau das muss eine App nachrüsten.

Was das in der Praxis bedeutet

Wenn alle Farben gleichzeitig in der Galerie erscheinen, passiert Folgendes:

  • Verwirrung. Kunden scrollen durch Fotos und wissen nicht, welches Bild zu welcher Farbe gehört. Bei ähnlichen Farbtönen (Marineblau vs. Schwarz) wird es richtig schwierig.
  • Schlechte Mobile-Erfahrung. Auf dem Smartphone sind 40 Thumbnails ein Albtraum. Endloses Scrollen, kleine Vorschaubilder, null Übersicht.
  • Mehr Retouren. Wer das Produkt nicht richtig einschätzen kann, bestellt auf Verdacht. Und schickt es zurück, wenn es anders aussieht als erwartet.
  • Niedrigere Conversion. Jede Sekunde Unsicherheit ist eine Gelegenheit, den Shop zu verlassen. Eine klare Galerie mit nur relevanten Bildern verkauft besser.

Drei Lösungsansätze

1. Alt-Text-Trick (manuell, instabil)

Manche Premium-Themes (Prestige, Impulse, Streamline) unterstützen Hashtags im Alt-Text: Blaue Jacke Vorderansicht #Blau. Das Theme filtert dann die Galerie nach diesem Hashtag.

Die Probleme: Ein Tippfehler reicht, damit es nicht mehr funktioniert. Es skaliert nicht bei vielen Produkten. Der Alt-Text wird mit technischen Daten verschmutzt, was schlecht für SEO ist. Und beim Theme-Wechsel fällt alles auseinander.

2. Eigener Code (Entwickler nötig)

Mit Liquid-Templates und JavaScript lässt sich die Galerie manuell filtern. Das funktioniert, braucht aber einen Entwickler, bricht bei Theme-Updates und muss dauerhaft gepflegt werden.

3. Eine Varianten-Bilder-App (empfohlen)

Eine spezialisierte App kümmert sich um alles: Bildzuordnung, Galeriefilterung, Swatch-Anzeige, Theme-Kompatibilität und Slider-Reinitialisierung. Kein Code-Editing. Keine Alt-Text-Hacks. Funktioniert auch nach Theme-Updates.

Die App-Lösung: Rubik Variant Images

Rubik Variant Images & Swatch macht genau das, was Shopify nicht kann: mehrere Bilder pro Variante zuweisen und die Galerie beim Variantenwechsel in Echtzeit filtern. Der Kunde wählt “Blau” und sieht nur blaue Fotos. Wechselt er auf “Rot”, erscheinen sofort nur rote Bilder. Kein Neuladen der Seite.

Zusätzlich ersetzt die App den Standard-Variantenwähler durch visuelle Swatches. Farbkreise, Produktbild-Thumbnails oder Text-Buttons. Kunden sehen auf einen Blick, welche Optionen es gibt, bevor sie klicken.

Was Rubik von anderen Varianten-Apps unterscheidet:

  • KI Auto-Assign. Die App analysiert Ihre Produktbilder und ordnet sie automatisch den passenden Varianten zu. Eine Jacke in 10 Farben mit 6 Fotos pro Farbe? Die KI erkennt, welches Foto zu welcher Farbe gehört. Kein manuelles Ziehen nötig.
  • Schnellste Ladezeit. Variantenbilder-Daten werden in Shopify-Metafields gespeichert. Die Daten kommen mit der Seite selbst. Keine externen API-Aufrufe, kein Warten auf einen Drittanbieter-Server.
  • 350+ Themes mit nativem Code. Dawn (ID: 887), Horizon (2481), Prestige (855), Impulse (857), Impact (1190), Focal (714), Warehouse (871), Palo Alto (777), Motion (847), Symmetry (568) und über 350 weitere. Plus 7 Page Builder: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo.
  • Videos und 3D-Modelle pro Variante. Nicht nur statische Bilder. Weisen Sie Produktvideos und 3D-Modelle bestimmten Varianten zu.
  • Shadow DOM Isolation. Swatch-Styles rendern in einem Shadow DOM. Ihr Theme-CSS kann die Swatches nicht kaputt machen. Das Swatch-CSS kann Ihr Theme nicht kaputt machen.

Falls Sie sich fragen, wie Sie mehrere Bilder pro Variante in Shopify zuweisen können: Dieser Beitrag auf CraftShift erklärt das Grundprinzip im Detail.

Wie es technisch funktioniert

Wenn ein Kunde eine Variante auswählt, läuft die App folgende Schritte in Millisekunden durch:

  1. Variante erkennen. Die App nutzt bis zu 8 verschiedene Erkennungsmethoden, abhängig vom Theme: URL-Parameter, Shopify-Globalobjekte, theme-spezifische Selektoren, Formular-Scanning und mehr. Deshalb funktioniert sie auf 350+ Themes.
  2. Zugewiesene Bilder nachschlagen. Die App liest die Varianten-Bild-Zuordnung aus Shopify-Metafields (mit der Seite geladen, kein API-Aufruf nötig).
  3. Galerie filtern. Bilder, die nicht zur gewählten Variante gehören, werden per CSS-Klassen ausgeblendet. Zugewiesene Bilder werden angezeigt.
  4. Gemeinsame Bilder behalten. Als “gemeinsam” markierte Bilder (Lifestyle-Fotos, Größentabellen) bleiben sichtbar, egal welche Variante gewählt wird.
  5. Slider neu initialisieren. Theme-spezifischer Code initialisiert den Galerie-Slider neu (Flickity, Swiper, Slick oder nativ), damit keine leeren Slides entstehen.

Der ganze Vorgang ist schneller als ein Scroll-Vorgang. Die Galerie-Aktualisierung fühlt sich sofort an.

Einrichtung: 5 Minuten pro Produkt (oder Sekunden mit KI)

  1. Rubik Variant Images installieren (kostenloser Plan verfügbar).
  2. Produkt in der App öffnen.
  3. Bilder auf die gewünschten Varianten ziehen. Oder den KI Auto-Assign-Button klicken und die App die Zuordnung automatisch machen lassen.
  4. Speichern. Produktseite aufrufen. Variante auswählen. Nur die zugewiesenen Bilder erscheinen.

Für große Kataloge gibt es Bulk Assign. Das ist eine bildreihungsbasierte Gruppierung: Die Bilder müssen in der Shopify-Galerie nach Variante sortiert sein. Jede Gruppe beginnt mit dem von Shopify zugewiesenen Variantenbild. Die App erkennt die Grenzen und weist die folgenden Bilder der jeweiligen Variante zu. Das läuft im Hintergrund über Hunderte Produkte.

Die Demo-Seite zeigt die App in Aktion. Die Erste-Schritte-Anleitung beschreibt jeden Schritt mit Screenshots.

Gemeinsame Bilder (Lifestyle, Größentabellen)

Nicht jedes Bild gehört zu einer bestimmten Variante. Lifestyle-Aufnahmen, Größentabellen oder Verpackungsfotos sollen bei jeder Farbauswahl sichtbar bleiben.

Rubik Variant Images hat dafür die gemeinsame Bilder-Funktion. Markieren Sie ein Bild als “gemeinsam” und es erscheint immer in der Galerie, unabhängig von der gewählten Variante. Sie bestimmen auch, ob gemeinsame Bilder vor oder nach den variantenspezifischen Bildern angezeigt werden.

Was ist mit Farbfeldern auf Collection-Seiten?

Rubik Variant Images filtert die Bildergalerie auf der Produktseite. Farbfelder auf Collection-Seiten (also kleine Swatches unter jedem Produkt im Kategorie-Raster) sind eine andere Funktion. Dafür brauchen Sie Rubik Combined Listings, eine separate App für genau diesen Zweck.

In unserem Beitrag Was sind Shopify Combined Listings? erklären wir, wie diese Technik funktioniert und warum sie für SEO interessant ist.

Welche Themes werden unterstützt?

Rubik Variant Images enthält nativen Code für über 350 Shopify-Themes und 7 Page Builder. Die am häufigsten nachgefragten:

  • Dawn (ID: 887) und alle kostenlosen Themes: Horizon (2481), Atelier (3621), Fabric (3622), Dwell (3623), Heritage (3624), Ritual (3625), Savor (3626), Tinker (3627), Vessel (3628), Pitch (3620), Ride (1500), Sense (1356), Craft (1368), Taste (1434), Refresh (1567)
  • Prestige (855), Impulse (857), Impact (1190), Focal (714), Warehouse (871): Der Alt-Text-Trick ist nicht mehr nötig.
  • Palo Alto (777), Motion (847), Symmetry (568), Streamline (872), Broadcast (868), Pipeline (739), Flow (801)
  • ThemeForest-Themes: Minimog, Ella, Turbo, Debutify, Kalles, Ecomus, Booster
  • Page Builder: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo

Wenn Ihr Theme nicht in der Liste steht: Die App funktioniert trotzdem über die Standard-Erkennung und generische Selektoren. Sie können auch den Support kontaktieren und nativen Code für Ihr Theme anfordern.

Video-Anleitung

Sehen Sie die Galeriefilterung in Aktion:

Rubik Variant Images kostenlos testen

Häufig gestellte Fragen

Wie zeige ich in Shopify nur die Bilder der ausgewählten Variante an?

Shopify kann das nicht von Haus aus. Sie brauchen entweder eine Varianten-Bilder-App oder eigenen Theme-Code. Rubik Variant Images weist mehrere Bilder pro Variante zu und filtert die Galerie in Echtzeit. Es funktioniert auf 350+ Themes ohne Code-Änderungen.

Kann ich Bilder anderer Varianten ausblenden?

Mit Shopify-Bordmitteln nicht. Alle Produktbilder erscheinen immer in der Galerie, egal welche Variante gewählt ist. Rubik Variant Images blendet fremde Bilder aus und zeigt nur die zur gewählten Variante gehörenden an. Die Filterung passiert sofort, ohne Seitenneuladen.

Kann ich mehrere Bilder einer Variante zuweisen?

Nicht mit Shopify allein. Shopify erlaubt genau ein Bild pro Variante. Rubik Variant Images ermöglicht unbegrenzt viele Bilder, Videos und 3D-Modelle pro Variante. Beim Auswählen einer Variante erscheinen alle zugewiesenen Medien in der Galerie.

Was ist mit Bildern, die bei allen Varianten sichtbar sein sollen?

Markieren Sie diese als “gemeinsame Bilder” in Rubik Variant Images. Lifestyle-Fotos, Größentabellen oder Verpackungsbilder bleiben sichtbar, egal welche Variante der Kunde wählt.

Kann KI die Bilder automatisch den Varianten zuordnen?

Ja. Rubiks KI Auto-Assign analysiert Produktfotos und ordnet sie anhand visueller Ähnlichkeit den richtigen Varianten zu. Sie können das für einzelne Produkte oder den gesamten Katalog per Bulk Assign laufen lassen. Keine andere Varianten-Bilder-App auf Shopify bietet KI-gestützte Bildzuordnung.

Wird meine Produktseite dadurch langsamer?

Nein. Rubik speichert alle Variantenbilder-Daten in Shopify-Metafields. Die Daten laden mit der Seite selbst. Keine externen API-Aufrufe. Ihre Core Web Vitals und der Page Speed Score werden nicht beeinträchtigt.

Weiterführende Artikel

Co-Founder of Rubik Variant Images & Swatch

Related Posts