Alleen geselecteerde variantafbeeldingen tonen
Een klant klikt op “Blauw”. Het hoofdbeeld verandert. Maar in de galerij eronder? Daar staan nog steeds alle foto’s: rood, zwart, groen, beige. 30 afbeeldingen door elkaar, zonder duidelijke koppeling. De klant scrollt en vraagt zich af welke foto bij zijn kleur hoort.
Shopify filtert productafbeeldingen niet op variant. Dat is geen bug. Het platform behandelt afbeeldingen als een platte lijst. Bij het wisselen van variant verandert het hoofdbeeld, maar de rest van de galerij blijft staan.
Dat kan anders. In dit artikel laat ik je zien hoe je de galerij zo instelt dat alleen de afbeeldingen van de gekozen variant zichtbaar zijn.
In dit artikel
- Waarom Shopify alle afbeeldingen tegelijk toont
- Wat dat in de praktijk betekent
- Drie mogelijke oplossingen
- De app-oplossing: Rubik Variant Images
- Hoe het technisch werkt
- Instellen: 5 minuten per product (of seconden met AI)
- Gemeenschappelijke afbeeldingen
- Kleurstalen op collectiepagina’s
- Welke thema’s worden ondersteund?
- Video
- Veelgestelde vragen
- Verder lezen
Waarom Shopify alle afbeeldingen tegelijk toont
In het Shopify-productmodel horen afbeeldingen bij het product, niet bij een individuele variant. Per variant kun je precies een afbeelding toewijzen. Selecteert de klant die variant, dan toont Shopify dat beeld als hoofdafbeelding. Alle andere foto’s blijven gewoon zichtbaar.
Een product met 8 kleuren en 5 foto’s per kleur heeft 40 afbeeldingen in de galerij. Altijd. Ongeacht welke kleur de klant kiest. Er is geen instelling om dit aan te passen.
Shopify slaat afbeeldingen op als platte lijst zonder groeperingsconcept. Er bestaat geen koppeling “afbeelding X hoort bij variant Y” op platformniveau. Precies dat moet een app toevoegen.
Wat dat in de praktijk betekent
Als alle kleuren tegelijk in de galerij verschijnen, gebeurt het volgende:
- Verwarring. Klanten scrollen door foto’s en weten niet welk beeld bij welke kleur hoort. Bij vergelijkbare tinten (marineblauw vs. zwart) wordt het echt lastig.
- Slechte mobiele ervaring. Op een smartphone zijn 40 thumbnails een ramp. Eindeloos scrollen, kleine voorbeeldafbeeldingen, nul overzicht.
- Meer retouren. Wie het product niet goed kan inschatten, bestelt op goed geluk. En stuurt het terug als het er anders uitziet dan verwacht.
- Lagere conversie. Elke seconde onzekerheid is een kans om de winkel te verlaten. Een heldere galerij met alleen relevante foto’s verkoopt beter.
Drie mogelijke oplossingen
1. Alt-tekst truc (handmatig, instabiel)
Sommige premium thema’s (Prestige, Impulse, Streamline) ondersteunen hashtags in de alt-tekst: Blauwe jas vooraanzicht #Blauw. Het thema filtert dan de galerij op basis van die hashtag.
De problemen: een typfout is genoeg om het te laten mislukken. Het schaalt niet bij veel producten. De alt-tekst raakt vervuild met technische data, wat slecht is voor SEO. En bij een themawisseling valt alles uit elkaar.
2. Eigen code (ontwikkelaar nodig)
Met Liquid-templates en JavaScript kun je de galerij handmatig filteren. Dat werkt, maar je hebt een ontwikkelaar nodig. Het breekt bij thema-updates en moet doorlopend onderhouden worden.
3. Een variantafbeeldingen-app (aanbevolen)
Een gespecialiseerde app regelt alles: beeldtoewijzing, galerijfiltering, swatch-weergave, themacompatibiliteit en slider-herinitialisatie. Geen code-aanpassingen. Geen alt-tekst hacks. Werkt ook na thema-updates.
De app-oplossing: Rubik Variant Images
Rubik Variant Images & Swatch doet precies wat Shopify niet kan: meerdere afbeeldingen per variant toewijzen en de galerij bij het wisselen van variant in realtime filteren. De klant kiest “Blauw” en ziet alleen blauwe foto’s. Wisselt hij naar “Rood”, dan verschijnen direct alleen rode afbeeldingen. Geen herladen van de pagina.
Daarnaast vervangt de app de standaard variantkiezer door visuele swatches. Kleurcirkels, productafbeelding-thumbnails of tekstknoppen. Klanten zien in een oogopslag welke opties er zijn, nog voordat ze klikken.
Wat Rubik onderscheidt van andere variantafbeeldingen-apps:
- AI Auto-Assign. De app analyseert je productafbeeldingen en wijst ze automatisch toe aan de juiste varianten. De AI bekijkt vier datapunten: productnaam, variantnaam, bestandsnaam en alt-tekst. Een jas in 10 kleuren met 6 foto’s per kleur? De AI herkent welke foto bij welke kleur hoort. Geen handmatig slepen nodig.
- Snelste laadtijd. Variantafbeeldingsgegevens worden opgeslagen in Shopify-metavelden. De data laden mee met de pagina zelf. Gebaseerd op metavelden, geen externe API-aanroepen.
- 350+ thema’s met native code. Dawn (ID: 887), Horizon (2481), Prestige (855), Impulse (857), Impact (1190), Focal (714), Warehouse (871), Palo Alto (777), Motion (847), Symmetry (568) en meer dan 350 andere. Plus 7 page builders: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo.
- Video’s en 3D-modellen per variant. Niet alleen statische afbeeldingen. Wijs productvideo’s en 3D-modellen toe aan specifieke varianten.
- Shadow DOM-isolatie. Swatch-stijlen renderen in een Shadow DOM. Je thema-CSS kan de swatches niet kapotmaken. De swatch-CSS kan je thema niet kapotmaken.
Wil je weten hoe je meerdere afbeeldingen per variant in Shopify toewijst? Dit artikel op CraftShift legt het basisprincipe uit.
Hoe het technisch werkt
Wanneer een klant een variant selecteert, doorloopt de app de volgende stappen in milliseconden:
- Variant herkennen. De app gebruikt tot 8 verschillende detectiemethoden, afhankelijk van het thema: URL-parameters, Shopify-globale objecten, themaspecifieke selectors, formulier-scanning en meer. Daarom werkt het op 350+ thema’s.
- Toegewezen afbeeldingen opzoeken. De app leest de variant-beeldkoppeling uit Shopify-metavelden (meegeladen met de pagina, geen API-aanroep nodig).
- Galerij filteren. Afbeeldingen die niet bij de gekozen variant horen, worden via CSS-klassen verborgen. Toegewezen afbeeldingen worden getoond.
- Gemeenschappelijke afbeeldingen behouden. Afbeeldingen die als “gemeenschappelijk” zijn gemarkeerd (lifestyle-foto’s, maattabellen) blijven zichtbaar, ongeacht welke variant is gekozen.
- Slider opnieuw initialiseren. Themaspecifieke code initialiseert de galerij-slider opnieuw (Flickity, Swiper, Slick of native), zodat er geen lege slides ontstaan.
Het hele proces is sneller dan een scroll-actie. De galerij-update voelt onmiddellijk.
Instellen: 5 minuten per product (of seconden met AI)
- Rubik Variant Images installeren (gratis plan beschikbaar).
- Product openen in de app.
- Afbeeldingen naar de gewenste varianten slepen. Of op de AI Auto-Assign-knop klikken en de app de toewijzing automatisch laten doen.
- Opslaan. Productpagina openen. Variant selecteren. Alleen de toegewezen afbeeldingen verschijnen.
Voor grote catalogi is er Bulk Assign. Dat is groepering op basis van beeldvolgorde: de afbeeldingen moeten in de Shopify-galerij per variant gesorteerd zijn. Elke groep begint met de door Shopify toegewezen variantafbeelding. De app herkent de grenzen en wijst de volgende afbeeldingen toe aan de betreffende variant. Dit draait op de achtergrond over honderden producten.
De demopagina toont de app in actie. De handleiding beschrijft elke stap met screenshots.
Gemeenschappelijke afbeeldingen (lifestyle, maattabellen)
Niet elke afbeelding hoort bij een specifieke variant. Lifestyle-opnames, maattabellen of verpakkingsfoto’s moeten bij elke kleurselectie zichtbaar blijven.
Rubik Variant Images heeft hiervoor de gemeenschappelijke afbeeldingen-functie. Markeer een afbeelding als “gemeenschappelijk” en het verschijnt altijd in de galerij, ongeacht de gekozen variant. Je bepaalt ook of gemeenschappelijke afbeeldingen voor of na de variantspecifieke afbeeldingen worden getoond.
Kleurstalen op collectiepagina’s
Rubik Variant Images filtert de afbeeldingsgalerij op de productpagina. Kleurstalen op collectiepagina’s (kleine swatches onder elk product in het categorieraster) zijn een andere functie. Daarvoor heb je Rubik Combined Listings nodig, een aparte app voor precies dat doel.
In ons artikel Kleurstalen op Shopify collectiepagina’s tonen leggen we het verschil uit en hoe je beide apps combineert.
Welke thema’s worden ondersteund?
Rubik Variant Images bevat native code voor meer dan 350 Shopify-thema’s en 7 page builders. De meest gevraagde:
- Dawn (ID: 887) en alle gratis thema’s: 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): de alt-tekst truc is niet meer nodig.
- Palo Alto (777), Motion (847), Symmetry (568), Streamline (872), Broadcast (868), Pipeline (739), Flow (801)
- ThemeForest-thema’s: Minimog, Ella, Turbo, Debutify, Kalles, Ecomus, Booster
- Page builders: GemPages, PageFly, EComposer, Instant, Beae, Foxify, Replo
Staat je thema niet in de lijst? De app werkt ook via standaard detectie en generieke selectors. Je kunt ook de support contacteren en native code voor je thema aanvragen.
Video
Bekijk de galerijfiltering in actie:
Veelgestelde vragen
Hoe toon ik in Shopify alleen de afbeeldingen van de geselecteerde variant?
Shopify kan dat niet standaard. Je hebt een variantafbeeldingen-app of eigen themacode nodig. Rubik Variant Images wijst meerdere afbeeldingen per variant toe en filtert de galerij in realtime. Het werkt op 350+ thema’s zonder codewijzigingen.
Kan ik afbeeldingen van andere varianten verbergen?
Met de standaard Shopify-functies niet. Alle productafbeeldingen verschijnen altijd in de galerij, ongeacht welke variant is gekozen. Rubik Variant Images verbergt afbeeldingen van andere varianten en toont alleen die van de geselecteerde. De filtering gebeurt direct, zonder herladen van de pagina.
Kan ik meerdere afbeeldingen aan een variant toewijzen?
Niet met Shopify alleen. Shopify staat precies een afbeelding per variant toe. Rubik Variant Images maakt onbeperkt veel afbeeldingen, video’s en 3D-modellen per variant mogelijk. Bij het selecteren van een variant verschijnen alle toegewezen media in de galerij.
Wat als bepaalde afbeeldingen bij alle varianten zichtbaar moeten zijn?
Markeer die als “gemeenschappelijke afbeeldingen” in Rubik Variant Images. Lifestyle-foto’s, maattabellen of verpakkingsbeelden blijven zichtbaar, ongeacht welke variant de klant kiest.
Kan AI de afbeeldingen automatisch aan varianten toewijzen?
Ja. Rubiks AI Auto-Assign analyseert productfoto’s op basis van vier datapunten: productnaam, variantnaam, bestandsnaam en alt-tekst. Het wijst afbeeldingen toe aan de juiste varianten. Geen andere variantafbeeldingen-app op Shopify biedt AI-gestuurde beeldtoewijzing.
Wordt mijn productpagina hierdoor trager?
Nee. Rubik slaat alle variantafbeeldingsdata op in Shopify-metavelden. De gegevens laden mee met de pagina zelf. Geen externe API-aanroepen. Je Core Web Vitals en pagesnelheidsscore worden niet aangetast.
Verder lezen
