Comment afficher la photo de chaque couleur ou déclinaison sur la fiche produit PrestaShop
· 3 min de lecture
Une liste déroulante « Bleu, Rouge, Vert » oblige le client à deviner à quoi ressemble chaque version. Voici comment utiliser les images déjà associées à vos déclinaisons pour montrer chaque option avec sa photo, ce qu'il faut vérifier dans votre catalogue et votre thème, et comment Variantes par attribut le fait sans programmer.
Le problème : choisir une déclinaison à l'aveugle
Dans beaucoup de boutiques PrestaShop, la couleur ou la finition se choisit dans une liste déroulante de noms : « Bleu, Rouge, Vert », « Noyer, Chêne ». Le client doit imaginer chacune ou cliquer sur toutes les options en attendant que la photo principale change.
- Certains se lassent et partent.
- D'autres choisissent la mauvaise déclinaison et la renvoient, avec les frais de port et de gestion que cela implique.
- Sur mobile, les listes déroulantes sont encore moins pratiques.
Pourtant, les photos existent déjà : elles sont associées à chaque déclinaison dans le catalogue. Il suffit de les montrer là où le client décide.
La solution : une rangée de vignettes avec la vraie photo
1. Associez une image à chaque déclinaison
Sur la fiche produit, dans l'onglet des déclinaisons, cochez l'image qui représente chaque déclinaison. Sans cela, aucune solution ne peut afficher la bonne photo. Commencez par vos meilleures ventes.
2. Choisissez l'attribut principal
C'est souvent la couleur, mais ce peut être la finition, la matière ou le motif. Les vignettes doivent regrouper par cet attribut : si un produit a des couleurs et des tailles, une vignette par couleur, pas une par déclinaison.
3. Placez les vignettes près du sélecteur
Le meilleur emplacement est juste sous le sélecteur d'attributs, avant « Ajouter au panier ». Un clic sur une vignette doit sélectionner cette option dans le sélecteur natif du thème, pour que prix, stock et panier fonctionnent comme d'habitude.
4. Soignez taille et accessibilité
Utilisez un type d'image PrestaShop proche de la taille de la vignette, ni flou ni trop lourd. Ajoutez le nom de l'option en texte alternatif et mettez en évidence la déclinaison choisie.
Les thèmes avec « pastilles de couleur » n'affichent généralement qu'un carré de la couleur de l'attribut, pas la vraie photo du produit dans cette couleur, qui est ce qui aide vraiment à choisir.
Comment Variantes par attribut vous aide
Variantes par attribut est notre module pour PrestaShop 1.6.1 à 9.2 (PHP 7.1 à 8.4) qui affiche la vraie photo de chaque option sur la fiche produit :
| Besoin | Ce que fait le module |
|---|---|
| Vraies photos | Une vignette par valeur de l'attribut choisi, avec l'image déjà associée à sa déclinaison. Rien de nouveau à téléverser. |
| Un clic | La vignette sélectionne l'option dans le sélecteur d'attributs natif du thème : prix, stock et panier ne changent pas. |
| Tout attribut | Couleur, finition, matière, motif… le groupe d'attributs que vous indiquez. |
| Taille | Vignettes de 24 à 200 px et le type d'image de votre choix, contrôlé pour qu'elles ne soient jamais floues. |
| Clarté | Déclinaison actuelle mise en évidence et nom de l'option en infobulle et texte alternatif. Affiché seulement si le produit a au moins deux valeurs. |
| Position | Fonctionne dès l'installation sur le hook standard displayProductAdditionalInfo ; pour le placer juste après le sélecteur, une ligne dans le gabarit suffit, expliquée dans l'onglet Aide. |
| Léger | Uniquement sa feuille de style et son script, sans requêtes externes ni tables supplémentaires. Rien ne reste après désinstallation. |
Choisissez le groupe d'attributs et la taille, enregistrez : vos clients voient chaque option avant de choisir.