Un client qui regarde une photo de canapé sur fond blanc voit un canapé. Le même canapé dans un salon, avec le tapis, la lampe et les coussins, lui montre un résultat. Le Shop the Look transforme cette mise en scène en parcours d’achat : chaque objet visible devient cliquable.
La mécanique est simple. Sa réussite tient à des détails d’exécution qui ne se voient qu’une fois en production.
Où cela fonctionne
Trois familles s’y prêtent réellement.
La mode et l’accessoire, cas d’origine. La tenue complète répond à une question que la fiche produit ne traite pas : avec quoi porter cette pièce.
La décoration et l’ameublement. L’achat se fait par ambiance, presque jamais par produit isolé. C’est le secteur où le panier moyen bouge le plus.
Le bricolage et le jardin en situation. Une terrasse aménagée, un atelier équipé, un coin bureau. Le visiteur découvre des produits complémentaires qu’il n’aurait pas cherchés.
Le dispositif est en revanche inutile sur un catalogue technique où l’achat est unitaire et spécifié à l’avance : pièces détachées, consommables, produits professionnels sur référence.
La photo, première contrainte
Le résultat dépend davantage de l’image que du module.
Chaque produit doit être identifiable. Un objet à moitié caché derrière un autre produira un point chaud incompréhensible. Composez la scène en pensant aux zones cliquables, pas seulement à l’esthétique.
La résolution doit permettre le zoom, en particulier sur mobile où le visiteur agrandit pour distinguer un détail avant de cliquer.
Le cadrage doit laisser de l’espace. Un produit collé au bord de l’image ne peut pas recevoir un point chaud sans que l’infobulle sorte du cadre.
Prévoyez également le format : une image très large fonctionne mal sur mobile, une image carrée gâche l’espace sur desktop. Deux versions de la même scène est la solution la plus propre.
Lookbook Shoppable — Shop the Look & Hotspots CliquablesLe lookbook shoppable qui transforme vos photos en ventes€79.00
Placer les points chauds
Quatre règles issues de l’usage réel.
- Cinq à sept maximum par image. Au-delà, la scène devient un semis de pastilles et le visiteur n’en ouvre aucune.
- Une taille tactile suffisante. Le point doit rester atteignable au doigt, ce qui suppose une zone d’environ quarante pixels de côté sur mobile, quelle que soit la taille visuelle de la pastille.
- Un point par produit, sur la partie la plus reconnaissable. Sur une chaise, l’assise plutôt qu’un pied.
- Une indication visuelle de cliquabilité. Une pastille statique passe inaperçue. Une légère animation à l’arrivée sur l’image, puis un état de repos discret, résout ce point.
Le contenu du point chaud
Ce qui s’ouvre au clic détermine la conversion. Quatre éléments, pas plus.
Le nom du produit, son prix, sa disponibilité, et une action. Cette action doit être l’ajout direct au panier quand le produit n’a pas de déclinaison, et un lien vers la fiche quand un choix de taille ou de couleur reste nécessaire.
Forcer un passage par la fiche pour un produit sans option ajoute une étape inutile. Proposer un ajout direct sur un produit qui exige une taille produit des commandes erronées et des retours.
Le comportement mobile
C’est ici que la plupart des implémentations échouent. Sur mobile, l’infobulle qui s’ouvre à côté du point chaud recouvre l’image et sort souvent de l’écran.
Le comportement qui fonctionne : au clic sur un point chaud, une carte produit apparaît en bas de l’écran, sur toute la largeur, sans masquer la zone touchée. Le visiteur garde le contexte visuel et peut enchaîner sur un autre point sans refermer.
Prévoyez également un affichage de repli. Sous l’image, une liste classique des produits présents dans la scène, toujours visible. Elle sert aux visiteurs qui ne comprennent pas la mécanique, et elle règle deux autres problèmes.
Accessibilité et référencement
Les deux se traitent par la même liste.
Une image avec des points chauds en superposition n’est pas exploitable par un lecteur d’écran, et les produits ne sont pas des liens indexables si le module les charge en JavaScript au clic. La liste HTML sous l’image, avec un lien vers chaque fiche, rend la scène accessible et fait exister le maillage.
Ajoutez un texte alternatif descriptif sur l’image, qui décrit la scène et non le nom du fichier.
Où placer les looks
Trois emplacements, complémentaires.
Une page dédiée regroupant toutes les scènes, structurée par univers ou par saison. Elle se partage bien et se positionne sur des requêtes d’inspiration.
En tête de catégorie, une ou deux scènes de l’univers concerné. C’est l’emplacement qui convertit le mieux, parce que le visiteur y arrive déjà en phase de recherche.
Sur la fiche produit, un bloc « vu dans ces ambiances » qui renvoie vers les scènes contenant ce produit. Ce maillage inverse est celui qui fait monter le panier moyen.
Mesurer
Trois indicateurs. Le taux d’interaction, part des visiteurs qui ouvrent au moins un point chaud, qui vous dit si la mécanique est comprise. Le taux d’ajout depuis les points chauds. Et le panier moyen des sessions ayant vu une scène, comparé aux autres : c’est là que le dispositif se justifie ou non, parce qu’il coûte du temps de production photo.
Le module Lookbook Shoppable et Shop the Look gère cette mécanique sur PrestaShop 8 et 9 : placement des points chauds sur l’image, carte produit avec ajout direct au panier, comportement mobile adapté, liste HTML des produits pour l’accessibilité et bloc inverse sur les fiches concernées.
