# Ajouter des hotspots produits sur une image PrestaShop pour vendre une tenue complète > Un point placé en pixels se retrouve au mauvais endroit dès que l'image change de taille. Où placer les points, comment traiter le tactile où le survol n'existe pas, et l'élément qui règle à lui seul l'accessibilité et le référencement. - Page: - Langue: fr - Publié le: 2026-10-06 - Mis à jour le: 2026-10-06 - Autres langues: [en](https://www.datafirefly.com/en/2026/10/06/product-hotspots-image-prestashop/index.md), [es](https://www.datafirefly.com/es/2026/10/06/hotspots-productos-imagen-prestashop/index.md), [de](https://www.datafirefly.com/de/2026/10/06/produkt-hotspots-bild-prestashop/index.md), [it](https://www.datafirefly.com/it/2026/10/06/hotspot-prodotti-immagine-prestashop/index.md), [pl](https://www.datafirefly.com/pl/2026/10/06/hotspoty-produktowe-obraz-prestashop/index.md), [nl](https://www.datafirefly.com/nl/2026/10/06/producthotspots-afbeelding-prestashop/index.md), [pt](https://www.datafirefly.com/pt/2026/10/06/hotspots-produtos-imagem-prestashop/index.md) - Index: Une photo d'ambiance montre une tenue complète, un intérieur meublé, un établi équipé. Le visiteur voit l'ensemble et il ne sait pas quels produits le composent ni où les trouver. Les points chauds règlent ce problème, à condition d'être placés et implémentés correctement. L'intérêt commercial de ce format a été traité séparément. Cet article porte sur la mise en œuvre. ## Où placer les points Quatre règles, dans l'ordre d'importance. **Sur le produit, pas à côté.** Un point placé au centre de l'objet est compris immédiatement. Un point flottant à quelques centimètres oblige à deviner ce qu'il désigne. **Espacés d'au moins la taille d'un doigt.** Deux points trop proches sont impossibles à distinguer au toucher. Comptez une distance équivalente à la zone tactile minimale entre deux centres. **Cinq à huit maximum par image.** Au-delà, l'image devient un semis de pastilles et le visiteur n'en ouvre aucune. Si votre visuel contient douze produits, montrez-en huit et proposez la liste complète en dessous. **Sur des zones lisibles.** Un point sur une zone très sombre ou très texturée disparaît. Prévoyez un contour ou une ombre pour garantir la visibilité quel que soit le fond. ## Le problème des coordonnées Difficulté technique principale, et elle est sous-estimée. Un point placé à 340 pixels du bord gauche sur une image de 1200 pixels se retrouve au mauvais endroit dès que l'image est affichée à 380 pixels sur un téléphone. La règle : **stockez les coordonnées en pourcentage** de la largeur et de la hauteur, jamais en pixels. Le point reste à sa place quelle que soit la taille d'affichage. Deuxième piège : le recadrage. Si votre image est recadrée différemment selon le format d'écran, une image large sur ordinateur et carrée sur mobile, les points calculés sur l'une sont faux sur l'autre. Deux réponses possibles. Utiliser la **même image** partout, simplement redimensionnée. Ou définir des **jeux de coordonnées distincts** par format, ce qui double le travail de placement. La première solution est la plus simple et elle suffit dans la grande majorité des cas. ## Le comportement tactile C'est ce qui décide de l'usage réel, puisque ce format est très consulté sur mobile. Sur ordinateur, le survol affiche un aperçu et le clic mène au produit. Sur écran tactile, le survol n'existe pas, et transposer directement ce comportement produit une interface inutilisable. Trois options pour le tactile. **Un appui ouvre l'aperçu, un second mène au produit.** Comportement courant, qui a l'inconvénient de demander deux gestes. **Un appui ouvre une fiche compacte** avec image, nom, prix et bouton d'ajout au panier. Le visiteur peut acheter sans quitter l'image, ce qui est le meilleur comportement commercialement. **Un appui mène directement au produit.** Rapide, et il fait perdre le contexte de l'image, ce qui est dommage sur une tenue complète. La deuxième option est celle qui convertit le mieux, parce qu'elle permet de composer plusieurs achats depuis la même image. Deux précisions d'implémentation. La **zone tactile** doit être plus large que le point visible, au moins quarante-quatre pixels de côté. Et la fermeture de l'aperçu doit être possible par un appui à l'extérieur, pas seulement sur une petite croix. ## L'accessibilité Point systématiquement négligé sur ce format, et pourtant traitable en quelques lignes. Une image avec des zones cliquables pose trois questions. **L'image elle-même** doit porter un texte alternatif décrivant la scène, pas la liste des produits. « Salon avec canapé gris, table basse en chêne et lampe sur pied » suffit. **Chaque point** doit être un élément interactif nommé, portant le nom du produit qu'il désigne. Un point sans intitulé est un bouton muet pour un lecteur d'écran. **La navigation au clavier** doit permettre d'atteindre chaque point dans un ordre logique, et d'ouvrir l'aperçu avec la touche d'activation. Ajoutez un élément qui règle tout : **une liste textuelle des produits sous l'image**. Elle sert les lecteurs d'écran, les utilisateurs de clavier, les moteurs, et les visiteurs qui préfèrent une liste. C'est le complément le plus rentable de ce dispositif. ## Ce que voient les moteurs Les points chauds sont construits par script et leur contenu n'est pas nécessairement lisible. Trois conséquences pratiques. Les **liens vers les produits** doivent être de vrais liens dans le code, pas des éléments cliquables gérés uniquement par script. Sinon vous perdez un maillage naturel entre votre page d'ambiance et vos fiches. Le **texte alternatif** de l'image porte l'information sur la scène, ce qui aide la recherche d'images. La **liste sous l'image**, évoquée plus haut, rend le contenu entièrement lisible sans dépendre du rendu de script. ## La performance Une image de lookbook est généralement grande et lourde. Trois précautions. **Servir la bonne dimension** selon l'écran, avec des formats adaptatifs. Une image de 2400 pixels sur un téléphone est du gaspillage pur. **Déclarer les dimensions** pour réserver l'espace et éviter que la page ne saute quand l'image arrive. **Charger les points après l'image**, mais réserver leur position dès le départ pour qu'ils n'apparaissent pas en décalage. Point complémentaire : si vous avez plusieurs images de lookbook sur une même page, ne chargez que la première immédiatement et différez les suivantes. ## Le contenu de l'aperçu Cinq éléments, pas davantage. La **vignette** du produit, qui confirme visuellement de quoi il s'agit. Le **nom**, complet mais court. Le **prix**, avec la mention d'indisponibilité le cas échéant. Le **bouton d'ajout au panier**, ou de sélection de taille si le produit a des déclinaisons. Le **lien vers la fiche complète**, pour ceux qui veulent en savoir plus. Sur les produits à déclinaisons, la question de la taille se pose. Deux approches : ouvrir un sélecteur dans l'aperçu, ou renvoyer vers la fiche. La première convertit mieux sur les produits simples à choisir, la seconde évite les erreurs sur les produits où le choix demande réflexion. ## La maintenance Aspect souvent découvert après quelques mois. Une image de lookbook vieillit avec son catalogue. Trois situations à traiter. **Le produit est épuisé.** Le point doit rester, avec la mention d'indisponibilité et éventuellement une alerte de retour en stock. Le supprimer laisse un trou dans l'image sans explication. **Le produit est retiré définitivement.** Deux options : retirer le point, ou le rediriger vers un produit équivalent avec une mention explicite. **L'image entière devient obsolète.** Une collection passée. Prévoyez une date de fin par image, ou au minimum une revue périodique. Un contrôle utile, à automatiser : lister les points pointant vers des produits inactifs ou supprimés. Sur une boutique qui a accumulé vingt lookbooks, cette liste se remplit vite. ## Mesurer Trois indicateurs. Le **taux d'interaction** avec les points, rapporté aux vues de l'image. Il vous dit si le dispositif est compris et repéré. Le **nombre de produits différents ouverts** par session. C'est l'intérêt propre du format : un visiteur qui en ouvre trois compose une tenue. Le **panier moyen des sessions** passées par un lookbook, comparé aux autres. C'est là que le format se justifie ou non. Le met en place ce dispositif sur PrestaShop 8 et 9 : placement des points en coordonnées relatives pour rester justes à toutes les tailles, fiche compacte avec ajout au panier sur appui tactile, liste textuelle des produits sous l'image pour l'accessibilité et le référencement, et détection des points pointant vers des produits inactifs.