Kleurstalen op Shopify collectiepagina’s tonen
Je hebt Rubik Variant Images ingesteld. Op de productpagina werken de kleurstalen. De galerij filtert bij het wisselen van variant. Alles zoals gewenst.
Dan bekijk je de collectiepagina. Daar zie je de productkaarten in het raster. Zonder kleurstalen. Geen kleurpunt onder het productbeeld. Geen beeldwisseling bij hover. De klant ziet het standaardbeeld en weet niet dat het product in 8 andere kleuren beschikbaar is.
Dat is geen fout. Variantafbeeldingen-apps en collectiepagina-swatches zijn twee verschillende dingen. In dit artikel leg ik het verschil uit en hoe je beide krijgt.
In dit artikel
- Waarom variantafbeeldingen-apps niet werken op collectiepagina’s
- Het verschil tussen product- en collectiepagina
- Wat klanten verwachten op collectiepagina’s
- De oplossing: Rubik Combined Listings
- Hoe collectiepagina-swatches werken
- Hoe beide apps samenwerken
- Instellen
- Video
- Veelgestelde vragen
- Verder lezen
Waarom variantafbeeldingen-apps niet werken op collectiepagina’s
Rubik Variant Images en andere variantafbeeldingen-apps werken op de productpagina. Ze grijpen in op de afbeeldingsgalerij van het product, filteren afbeeldingen per variant en initialiseren de slider opnieuw. Dat werkt, omdat de productpagina alle afbeeldingen en variantdata geladen heeft.
Op de collectiepagina is de situatie anders. Daar toont Shopify alleen productkaarten: een afbeelding, een titel, een prijs. De volledige afbeeldingsgalerij is niet beschikbaar. De variantdata zijn sterk beperkt. Er is geen slider om te filteren.
Kleurstalen op collectiepagina’s zijn technisch een compleet ander probleem. Ze tonen niet verschillende afbeeldingen van hetzelfde product. Ze verwijzen naar verschillende producten (of varianten), weergegeven als kleine kleurpunten op de productkaarten.
Het verschil tussen product- en collectiepagina
Productpagina: Volledige afbeeldingsgalerij, alle varianten geladen, slider met thumbnails, zoomfunctie. Hier werkt Rubik Variant Images: afbeeldingen per variant toewijzen, galerij filteren, swatches in plaats van dropdown.
Collectiepagina: Productkaart in het raster. Een afbeelding, een titel, een prijs. Geen galerij, geen slider. Hier heb je een app nodig die kleine kleurpunten onder het productbeeld plaatst en het beeld bij hover of klik wisselt.
Dat zijn twee verschillende functies met twee verschillende technische vereisten. Geen enkele app kan beide optimaal afhandelen, omdat de paginastructuur fundamenteel verschilt.
Wat klanten verwachten op collectiepagina’s
Grote webshops als H&M, ASOS en Nike tonen kleurstalen direct op de productkaarten. De klant scrollt door de collectie en ziet meteen: dit T-shirt is beschikbaar in 5 kleuren. Hij beweegt met de muis over een kleurveld en het productbeeld wisselt. Zonder de productpagina te openen.
Dat bespaart klikken. De klant kan kleuren vergelijken zonder elke productpagina apart te openen. Voor shops met veel kleurvarianten verlaagt dit het bouncepercentage op collectiepagina’s aanzienlijk.
Zonder kleurstalen ziet de klant alleen het standaardbeeld. Hij weet niet dat het product ook in zijn favoriete kleur beschikbaar is. Hij scrollt verder. Een gemiste kans.
De oplossing: Rubik Combined Listings
Rubik Combined Listings is een aparte app die precies deze functie levert. Het verbindt aparte producten in groepen en toont kleurstalen op collectiepagina’s en productpagina’s.
- Kleurpunten op productkaarten. Kleine swatches onder het productbeeld in het collectieraster. Kleurcirkels, productafbeelding-thumbnails of tekstknoppen.
- Beeldwisseling bij hover. De klant beweegt over een kleurpunt en het productbeeld wisselt direct. Zonder klik, zonder herladen.
- Link naar de juiste productpagina. Klikt de klant op een kleurpunt, dan belandt hij op de productpagina van die specifieke kleur.
- 19 swatch-presets. Kant-en-klare designs die je direct kunt gebruiken of aanpassen.
- Per-groep styling. Verschillende swatch-designs voor verschillende productgroepen.
De app werkt op elk Shopify-abonnement. Geen Plus nodig. Meer achtergrond lees je in dit artikel op CraftShift.
Hoe collectiepagina-swatches werken
Rubik Combined Listings werkt met productgroepen. Je verbindt aparte producten (bijvoorbeeld “Jas Blauw”, “Jas Rood”, “Jas Zwart”) in een groep. De app slaat de verbinding op in metavelden.
Op de collectiepagina leest de app de metavelden en rendert kleurstalen onder elk productbeeld. Bij hover wisselt het productbeeld voor dat van het product waarover de muis beweegt. Bij klik verwijst de app naar de juiste productpagina.
Dat werkt, omdat elke kleur een eigen product is met een eigen afbeelding. De app hoeft geen galerij te filteren. Het wisselt alleen het voorbeeldbeeld op de kaart.
Hoe beide apps samenwerken
De twee Rubik-apps vullen elkaar aan. Ze dekken verschillende gebieden:
Rubik Variant Images (productpagina): Meerdere afbeeldingen per variant. Galerijfiltering. Visuele swatches in plaats van dropdown. Video’s en 3D-modellen per variant. AI Auto-Assign.
Rubik Combined Listings (collectiepagina + productpagina): Aparte producten met kleurstalen verbinden. Swatches op productkaarten. Beeldwisseling bij hover. Bulk-groepering. Magic Fill AI.
Een typisch scenario: Rubik Combined Listings verbindt je kleurproducten met swatches op de collectiepagina. Rubik Variant Images filtert de afbeeldingsgalerij op de productpagina per variant (bijvoorbeeld maat, materiaal). Beide apps draaien tegelijk, zonder conflicten.
Hoe je variantafbeeldingen alleen voor de gekozen variant toont, lees je in Alleen geselecteerde variantafbeeldingen tonen.
Instellen
- Rubik Combined Listings installeren. Het gratis plan staat 5 groepen toe.
- App-inbedding in de thema-editor activeren.
- Producten in groepen organiseren. Handmatig of met Magic Fill (AI).
- Swatch-design kiezen. 19 presets staan tot je beschikking.
- Collectiepagina openen. Kleurstalen verschijnen op de productkaarten.
Gebruik je ook Rubik Variant Images, dan hoeft daar niets aangepast te worden. Beide apps herkennen elkaar en werken op verschillende paginagebieden.
Hoe je producten groepeert en als varianten verbindt, beschrijft rubikify.com in detail.
Zo ziet het eruit in actie
Kleurstalen op collectie- en productpagina’s in een echte Shopify-webshop:
Veelgestelde vragen
Kan Rubik Variant Images kleurstalen op collectiepagina’s tonen?
Nee. Rubik Variant Images werkt op de productpagina (galerijfiltering, swatches, beeldtoewijzing). Voor kleurstalen op collectiepagina’s heb je Rubik Combined Listings nodig, een aparte app.
Heb ik beide apps nodig?
Dat hangt af van je wensen. Wil je alleen de afbeeldingsgalerij op de productpagina filteren, dan volstaat Rubik Variant Images. Heb je kleurstalen op collectiepagina’s nodig, dan installeer je Rubik Combined Listings. Voor beide functies samen gebruik je beide apps.
Werkt de beeldwisseling op collectiepagina’s bij hover?
Ja. Rubik Combined Listings wisselt het productbeeld op de collectiepagina wanneer de klant met de muis over een kleurveld beweegt. Zonder klik, zonder herladen.
Heb ik Shopify Plus nodig?
Nee. Rubik Combined Listings werkt op elk Shopify-abonnement: Basic, Standard, Advanced. De native Shopify-functie “Combined Listings” vereist Plus, maar de Rubik-app is een zelfstandig alternatief.
Zijn er conflicten als beide apps tegelijk draaien?
Nee. De apps werken op verschillende paginagebieden. Rubik Variant Images stuurt de productpagina-galerij. Rubik Combined Listings stuurt de productkaart-swatches. Geen overlap, geen conflicten.
Verder lezen
