Een klant die de groene kleur selecteert en de foto’s van het rode model blijft zien, heeft geen enkele reden om te vertrouwen op wat hij bestelt. Het verwachte gedrag is evident, maar PrestaShop produceert het niet vanzelf.
Hoe PrestaShop afbeeldingen en varianten koppelt
Het mechanisme bestaat native. In het variantentabblad van een product kan elke combinatie een of meer afbeeldingen toegewezen krijgen uit die van de productpagina.
Twee beperkingen verklaren waarom dat op veel webshops niet werkt zoals verwacht.
De koppeling is puur handmatig, afbeelding per afbeelding en combinatie per combinatie. Op een product met vijftien varianten en twaalf foto’s is de oefening lang en niemand doet ze op de hele catalogus.
Vooral bepaalt de koppeling niet het gedrag van de galerij. Naargelang het thema kan de selectie van een variant de afbeeldingen filteren, er één wisselen, of helemaal niets doen. Het thema beslist, niet de koppeling.
De drie mogelijke gedragingen
Niets veranderen. Alle afbeeldingen blijven getoond, wat de selectie ook is. Het meest voorkomende gedrag, en het slechtste: de klant moet raden welke bij zijn keuze horen.
De hoofdafbeelding wisselen. De coverfoto schakelt naar die van de variant, de miniaturen blijven ongewijzigd. Tussengedrag, aanvaardbaar op producten met weinig foto’s.
De galerij filteren. Alleen de afbeeldingen gekoppeld aan de geselecteerde variant blijven zichtbaar. Het gedrag dat klanten verwachten, en het gedrag dat de retouren vermindert.
Een vierde gedrag verdient overweging: filteren en achteraan de galerij de afbeeldingen behouden die alle varianten delen, zoals een technisch schema of een detailfoto van het materiaal.
Productgalerij PrestaShop: HD-zoom, Volledig Scherm & VariantfilterProductgalerij van de nieuwe generatie: HD-zoom, verticale miniaturen, volledig scherm op mobiel met knijpen en filtering van de afbeeldingen op variant.€69,00
Het geval van varianten zonder afbeelding
Een systematische situatie zodra de catalogus groeit: een nieuwe kleur wordt aangemaakt voordat de foto’s zijn genomen.
De strikte filtering produceert dan een lege galerij, wat veel erger is dan geen filtering. Het terugvalgedrag moet expliciet zijn: is geen enkele afbeelding aan de geselecteerde variant gekoppeld, dan toont de galerij alle afbeeldingen van het product.
Voorzie ook een backofficecontrole die de combinaties zonder gekoppelde afbeelding oplijst. Een onderhoudstaak van vijf minuten per maand die weken van gedegradeerde productpagina’s vermijdt.
De valkuil van de meervoudige attributen
Een ontwerppunt dat over de haalbaarheid van de oefening beslist.
Een product met vijf kleuren en zes maten telt dertig combinaties. De foto’s variëren echter alleen per kleur: maat M en maat L van het groene model gebruiken dezelfde visuals.
De afbeeldingen aan de dertig combinaties koppelen komt neer op vijf keer hetzelfde werk per kleur herhalen. De juiste aanpak: de afbeeldingen koppelen aan het visuele attribuut in plaats van aan de volledige combinatie, en het systeem laten oplossen.
Concreet is de nuttige regel: identificeer het of de attributen die het uiterlijk veranderen, doorgaans de kleur en soms het materiaal, en koppel alleen daarop.
De consistentie op de andere plekken
De galerij van de productpagina is niet de enige betrokken plek, en dat wordt het vaakst vergeten.
In het categorieoverzicht, als u kleurbolletjes bij hover aanbiedt, moet de miniatuurafbeelding de gehoverde kleur volgen.
In de snelweergave moet het gedrag identiek zijn aan dat van de productpagina, anders stelt de klant een inconsistentie tussen beide weergaven vast.
In de winkelwagen en de bestelmails moet de afbeelding die van de bestelde variant zijn, niet die van de productcover. Een detail dat klachten van het type “dit is niet wat ik heb besteld” vermijdt.
De prestaties
De afbeeldingen filteren aan browserzijde veronderstelt ze allemaal geladen te hebben. Op een product met veertig foto’s verdeeld over acht kleuren vertegenwoordigt dat een groot gewicht voor een klant die er maar vijf zal zien.
Twee oplossingen. Het uitgestelde laden van de niet-getoonde afbeeldingen, dat ze pas downloadt wanneer ze zichtbaar worden. Of het laden op aanvraag bij de variantwissel, dat meer bespaart maar een merkbare vertraging toevoegt.
Op de meeste catalogi volstaat het uitgestelde laden en blijft het eenvoudiger te onderhouden.
De zoom en het volledige scherm
Laatste consistentiepunt: de vergrote weergave moet op dezelfde manier worden gefilterd als de galerij. Een klant die het volledige scherm opent op een kleur en doorbladert tot hij alle andere ziet, verliest het vertrouwen dat de filtering net had opgebouwd.
De Productgalerij module voor PrestaShop behandelt deze keten op PrestaShop 8 en 9: filtering van de afbeeldingen volgens de geselecteerde variant met terugval wanneer geen afbeelding is gekoppeld, consistentie tussen galerij, zoom en volledig scherm, en uitgesteld laden van de niet-getoonde visuals.