Un client qui sélectionne le coloris vert et continue de voir les photos du modèle rouge n’a aucune raison de faire confiance à ce qu’il commande. Le comportement attendu est évident, mais PrestaShop ne le produit pas tout seul.
Comment PrestaShop associe images et déclinaisons
Le mécanisme existe nativement. Dans l’onglet des déclinaisons d’un produit, chaque combinaison peut se voir associer une ou plusieurs images parmi celles de la fiche.
Deux limites expliquent pourquoi cela ne fonctionne pas comme prévu sur beaucoup de boutiques.
L’association est purement manuelle, image par image et combinaison par combinaison. Sur un produit à quinze déclinaisons et douze photos, l’exercice est long et personne ne le fait sur l’ensemble du catalogue.
Surtout, l’association ne détermine pas le comportement de la galerie. Selon le thème, la sélection d’une déclinaison peut filtrer les images, en changer une seule, ou ne rien faire du tout. C’est le thème qui décide, pas l’association.
Les trois comportements possibles
Ne rien changer. Toutes les images restent affichées quelle que soit la sélection. C’est le comportement le plus fréquent, et le pire : le client doit deviner lesquelles correspondent à son choix.
Changer l’image principale. La photo de couverture bascule sur celle de la déclinaison, les vignettes restent inchangées. Comportement intermédiaire, acceptable sur les produits à peu de photos.
Filtrer la galerie. Seules les images associées à la déclinaison sélectionnée restent visibles. C’est le comportement attendu par les clients, et celui qui réduit les retours.
Un quatrième comportement mérite d’être envisagé : filtrer en gardant en fin de galerie les images communes à toutes les déclinaisons, du type schéma technique ou photo de détail de matière.
Galerie Produit PrestaShop — Zoom HD, Plein Écran & Filtre VariantesGalerie produit nouvelle génération : zoom HD, vignettes verticales, plein écran mobile avec pincement et filtrage des images par déclinaison.€69.00
Le cas des déclinaisons sans image
Situation systématique dès que le catalogue s’étoffe : une nouvelle couleur est créée avant que les photos ne soient prises.
Le filtrage strict produit alors une galerie vide, ce qui est bien pire que l’absence de filtrage. Le comportement de repli doit être explicite : si aucune image n’est associée à la déclinaison sélectionnée, la galerie affiche l’ensemble des images du produit.
Prévoyez également un contrôle en back-office listant les combinaisons sans image associée. C’est une tâche de maintenance de cinq minutes par mois qui évite des semaines de fiches dégradées.
Le piège des attributs multiples
Point de conception qui décide de la faisabilité de l’exercice.
Un produit avec cinq couleurs et six tailles compte trente combinaisons. Or les photos ne varient que selon la couleur : la taille M et la taille L du modèle vert utilisent les mêmes visuels.
Associer les images aux trente combinaisons revient à répéter cinq fois le même travail par couleur. La bonne approche consiste à associer les images à l’attribut visuel plutôt qu’à la combinaison complète, et à laisser le système résoudre.
Concrètement, la règle utile est : identifiez le ou les attributs qui changent l’apparence, généralement la couleur et parfois la matière, et n’associez que sur ceux-là.
La cohérence sur les autres emplacements
La galerie de la fiche n’est pas le seul endroit concerné, et c’est ce qui est le plus souvent oublié.
Dans le listing de catégorie, si vous proposez des pastilles de couleur au survol, l’image de la vignette doit suivre la couleur survolée.
Dans l’aperçu rapide, le comportement doit être identique à celui de la fiche, sinon le client constate une incohérence entre les deux vues.
Dans le panier et les emails de commande, l’image doit être celle de la déclinaison commandée, pas celle de la couverture du produit. C’est un détail qui évite des réclamations du type « ce n’est pas ce que j’ai commandé ».
La performance
Filtrer les images côté navigateur suppose de les avoir toutes chargées. Sur un produit à quarante photos réparties sur huit coloris, cela représente un poids important pour un client qui n’en verra que cinq.
Deux solutions. Le chargement différé des images non affichées, qui ne les télécharge qu’au moment où elles deviennent visibles. Ou le chargement à la demande lors du changement de déclinaison, qui économise davantage mais ajoute une latence perceptible.
Sur la majorité des catalogues, le chargement différé suffit et reste plus simple à maintenir.
Le zoom et le plein écran
Dernier point de cohérence : la vue agrandie doit être filtrée de la même façon que la galerie. Un client qui ouvre le plein écran sur une couleur et qui fait défiler jusqu’à voir toutes les autres perd la confiance que le filtrage venait de construire.
Le module Galerie Produit pour PrestaShop traite cette chaîne sur PrestaShop 8 et 9 : filtrage des images selon la déclinaison sélectionnée avec repli quand aucune image n’est associée, cohérence entre galerie, zoom et plein écran, et chargement différé des visuels non affichés.
