Shopify variantafbeeldingen instellen: stap voor stap
Shopify toont bij het wisselen van variant alle productafbeeldingen tegelijk. De klant kiest “Blauw” en scrollt door 40 foto’s, waarvan 35 bij andere kleuren horen. Dat is het standaardgedrag. Het laat zich niet aanpassen in de instellingen.
Met Rubik Variant Images wijs je elke variant meerdere afbeeldingen toe. De galerij filtert zich automatisch zodra de klant een andere kleur selecteert. Alleen de bijbehorende foto’s blijven zichtbaar.
Deze handleiding leidt je door elke stap: van de installatie tot het eindresultaat op je productpagina.
In dit artikel
- Vereisten
- Stap 1: App installeren
- Stap 2: App-inbedding activeren
- Stap 3: Product openen en afbeeldingen toewijzen
- Stap 4: AI Auto-Assign gebruiken
- Stap 5: Bulk Assign voor veel producten
- Gemeenschappelijke afbeeldingen instellen
- Resultaat testen
- Kleurstalen aanpassen
- Video
- Veelgestelde vragen
- Verder lezen
Vereisten
Controleer deze drie punten voordat je begint:
- Productafbeeldingen geupload. Alle foto’s voor alle varianten moeten al in de Shopify-admin bij het product staan. Rubik werkt met de bestaande afbeeldingen.
- Varianten aangemaakt. Je product heeft minstens een optie met varianten nodig (bijvoorbeeld Kleur: blauw, rood, groen).
- Online Store 2.0 thema. De app werkt met alle thema’s die app-inbeddingen ondersteunen. Alle gratis Shopify-thema’s en de meeste premium thema’s vanaf 2021 doen dat.
Stap 1: App installeren
Open de Rubik Variant Images App Store-pagina en klik op “Install”. De app wordt automatisch in je Shopify-admin geinstalleerd.
Er is een gratis plan beschikbaar voor 1 product. Betaalde plannen: Starter $25/maand (100 producten), Advanced $50/maand (1.000 producten), Premium $75/maand (onbeperkt).
Stap 2: App-inbedding activeren
Na de installatie moet je de app-inbedding in de thema-editor activeren. Zonder deze stap laadt de app geen JavaScript op je storefront en kan de galerij zich niet filteren.
Ga naar je Shopify-admin > Online Store > Thema’s > Aanpassen. Klik links onderaan op “App-inbeddingen”. Zoek “Rubik Variant Images” en zet de schakelaar aan. Sla het thema op.
Let op: de app-inbedding is themaspecifiek. Wissel je van thema, dan moet je de inbedding in het nieuwe thema opnieuw activeren.
Stap 3: Product openen en afbeeldingen toewijzen
Open de Rubik-app in je Shopify-admin. Zoek het product dat je wilt instellen. De app toont alle productafbeeldingen en alle varianten naast elkaar.
Selecteer een variant (bijvoorbeeld “Blauw”). Klik op de afbeeldingen die bij deze variant horen, of sleep ze naar het toewijzingsgebied. Doe dit voor elke variant. Klik op “Opslaan”.
Dat is het. Open de productpagina in je webshop, selecteer een variant en alleen de toegewezen afbeeldingen verschijnen in de galerij.
Stap 4: AI Auto-Assign gebruiken
Handmatig toewijzen werkt prima voor een paar producten. Bij grotere catalogi wil je sneller. Daar is de AI Auto-Assign voor.
De AI analyseert vier datapunten per afbeelding:
- Productnaam. Bevat de naam kleurinformatie? Bijvoorbeeld “T-shirt Marineblauw”.
- Variantnaam. De waarde van de variant-optie, zoals “Blauw” of “Navy Blue”.
- Bestandsnaam. De originele bestandsnaam van de afbeelding, zoals “t-shirt-blauw-vooraanzicht.jpg”.
- Alt-tekst. De alt-tekst die je in Shopify hebt ingesteld bij de afbeelding.
Op basis van deze vier punten bepaalt de AI welke afbeelding bij welke variant hoort. Je klikt op de AI-knop, de app stelt een toewijzing voor, je controleert het en slaat op. Per product minder dan een minuut.
Hoe beter je bestandsnamen en alt-teksten, hoe nauwkeuriger het resultaat. Bij goed benoemde bestanden tref je vaak meteen de juiste koppeling.
Stap 5: Bulk Assign voor veel producten
Heb je honderden producten? Dan is Bulk Assign de snelste route. Dit werkt op basis van beeldvolgorde, niet op bestandsnaam.
Zo werkt het: sorteer je afbeeldingen in de Shopify-galerij per variant. Eerst alle foto’s van variant 1, dan alle van variant 2, enzovoort. Elke groep begint met de door Shopify toegewezen variantafbeelding (het “featured image” van die variant).
De app herkent deze grenzen automatisch. Ze wijst alle afbeeldingen tussen twee featured images toe aan de bijbehorende variant. Dat draait op de achtergrond, over je hele catalogus als je wilt.
Belangrijk: Bulk Assign is niet hetzelfde als AI Auto-Assign. Bulk Assign gebruikt de volgorde in de galerij. AI Auto-Assign analyseert bestandsnamen, alt-teksten en productnamen. Beide functies vullen elkaar aan maar werken compleet anders.
Gemeenschappelijke afbeeldingen instellen
Sommige afbeeldingen horen niet bij een specifieke variant. Maattabellen, lifestyle-opnames, verpakkingsfoto’s. Die moeten bij elke kleurselectie zichtbaar blijven.
Markeer ze als “gemeenschappelijk” in de app. Ze verschijnen dan altijd in de galerij, ongeacht de gekozen variant. Je kiest ook of ze voor of na de variantspecifieke afbeeldingen worden geplaatst.
Resultaat testen
Na het opslaan is het resultaat direct zichtbaar. Open je productpagina in een incognitovenster (om caching te vermijden) en selecteer een variant. De galerij moet nu alleen de toegewezen afbeeldingen tonen.
Controleer de volgende punten:
- Wisselen tussen varianten toont telkens alleen de juiste foto’s.
- Gemeenschappelijke afbeeldingen blijven staan bij elke selectie.
- De slider bevat geen lege slides.
- Op mobiel werkt het hetzelfde.
Werkt iets niet? Bekijk ons artikel Shopify variantafbeeldingen niet zichtbaar: 10 oorzaken voor de meest voorkomende problemen en oplossingen.
Kleurstalen aanpassen
Standaard vervangt Rubik de dropdown-variantkiezer door visuele swatches. Kleurcirkels, productafbeelding-thumbnails of tekstknoppen. Het uiterlijk kun je volledig aanpassen: vorm, grootte, rand, hover-effect, uitverkocht-markering.
Meer dan 100 CSS-variabelen zijn beschikbaar, plus een AI-assistent die CSS genereert op basis van je beschrijving. Alles daarover lees je in Shopify kleurstalen aanpassen: vormen en stijlen.
Video
Bekijk het volledige installatieproces stap voor stap:
Veelgestelde vragen
Hoeveel afbeeldingen kan ik per variant toewijzen?
Onbeperkt. Wijs 3, 5, 10 of meer afbeeldingen toe. De data worden opgeslagen in Shopify-metavelden. Aanbeveling: 5 tot 6 afbeeldingen per variant (voor, achter, detail, maatverhouding, lifestyle).
Wat is het verschil tussen AI Auto-Assign en Bulk Assign?
AI Auto-Assign werkt per product. Het analyseert vier datapunten (productnaam, variantnaam, bestandsnaam, alt-tekst) en wijst intelligent toe. Bulk Assign werkt op basis van beeldvolgorde over veel producten tegelijk. Het herkent geen beeldinhoud maar gebruikt de sortering in de galerij. Beide functies vullen elkaar aan.
Moet ik de app-inbedding bij elk thema opnieuw activeren?
Ja. De app-inbedding is themaspecifiek. Wissel je van thema, dan moet je de inbedding in het nieuwe thema activeren. Je beeldtoewijzingen blijven behouden, die zijn opgeslagen in metavelden en onafhankelijk van het thema.
Werkt dit ook met video’s en 3D-modellen?
Ja. Wijs productvideo’s en 3D-modellen op dezelfde manier toe als afbeeldingen. Bij het selecteren van een variant verschijnen alleen de toegewezen media in de galerij.
Wordt mijn pagina trager door de app?
Nee. Alle data zijn gebaseerd op metavelden, geen externe API-aanroepen. De gegevens laden mee met de pagina zelf. Je Core Web Vitals en pagesnelheid blijven onaangetast.
Verder lezen
