Lookbook Shoppable — Shop the Look
Installer et utiliser le lookbook shoppable : créer un look, placer les hotspots, configurer les carrousels et l'achat du look en un clic.
Le module Lookbook Shoppable — Shop the Look transforme vos photos d’ambiance en vitrines interactives : vous placez des points cliquables (hotspots) sur les produits visibles dans une image, et vos visiteurs peuvent découvrir chaque article et ajouter l’intégralité du look au panier en un seul clic. Cette documentation couvre l’installation, la création d’un look, la configuration de l’affichage et le comportement côté boutique.
Compatibilité
- PrestaShop 8.0 à 8.2
- PrestaShop 9.0
- Mono-boutique et multiboutique
- Multilingue (FR / EN / ES / DE / IT)
- Thèmes basés sur le thème Classic
Installation
- Rendez-vous dans Modules > Gestionnaire de modules de votre back-office.
- Cliquez sur Installer un module et sélectionnez le fichier
dfshopthelook.zip. - Une fois l’installation terminée, un nouvel onglet Shop The Look apparaît sous le menu Catalogue.
À l’installation, le module enregistre automatiquement ses hooks d’affichage (page d’accueil et fiche produit) et crée les tables nécessaires au stockage des looks et de leurs hotspots.
Créer un premier look
Ouvrez Catalogue > Shop The Look puis cliquez sur Ajouter un nouveau look.
1. Renseigner le titre et l’image
Saisissez un titre (traduisible par langue) et, si vous le souhaitez, une courte description. Uploadez ensuite l’image du look : privilégiez un visuel d’au moins 1200 px de large, au format JPG, PNG ou WEBP. Dès la sélection du fichier, un aperçu s’affiche immédiatement dans l’éditeur, avant même l’enregistrement.
2. Placer les hotspots
Cliquez directement sur l’image à l’endroit où se trouve un produit : une fenêtre de recherche s’ouvre. Tapez le nom ou la référence du produit, puis sélectionnez-le dans la liste (les miniatures facilitent l’identification). Le point est alors posé et numéroté.
Vous pouvez repositionner un point à tout moment en le faisant glisser à la souris. Les coordonnées sont enregistrées en pourcentage, ce qui garantit un placement fidèle quelle que soit la taille d’affichage de l’image côté boutique.
3. Gérer la liste des points
Sous l’image, chaque hotspot apparaît dans une liste avec son numéro, le produit associé et ses coordonnées. Utilisez l’icône corbeille pour retirer un point. Vous pouvez placer autant de hotspots que nécessaire, et même associer plusieurs points au même produit.
4. Enregistrer
Réglez la position (ordre d’affichage du look) et l’état Activé, puis cliquez sur Enregistrer. Le look est prêt.
Configurer l’affichage
Depuis la page de configuration du module (Gestionnaire de modules > Configurer), vous contrôlez indépendamment les deux emplacements :
- Carrousel sur la page d’accueil : activation et nombre maximal de looks affichés.
- Looks en fiche produit : activation et nombre maximal de looks affichés. Seuls les looks contenant le produit consulté sont montrés dans le bloc « Complétez le look ».
Côté boutique
Le carrousel
Sur la page d’accueil, un carrousel horizontal présente vos looks sous forme de cartes. Chaque carte affiche l’image, un badge indiquant le nombre de produits, et deux boutons au survol : Voir le look et Acheter le look.
La modale « Voir le look »
Un clic sur Voir le look (ou sur la carte) ouvre une fenêtre immersive : l’image agrandie avec ses points pulsants d’un côté, la liste des produits de l’autre. Survoler une ligne produit met en évidence le point correspondant sur l’image, et inversement. Chaque produit affiche son prix formaté selon la devise et la langue actives ; les articles indisponibles sont signalés.
« Acheter le look » en un clic
Le bouton Acheter le look ajoute au panier, en une seule action, tous les produits associés au visuel. Le module :
- ajoute la déclinaison par défaut de chaque produit ;
- respecte la quantité minimale définie sur le produit ;
- ignore automatiquement les articles en rupture sans réassort autorisé ;
- déduplique les produits placés sur plusieurs points.
Le panier PrestaShop est ensuite rafraîchi nativement et une notification confirme l’ajout. Si certains produits n’ont pas pu être ajoutés (rupture de stock), un message le précise.
Multilingue
Le titre et la description de chaque look sont traduisibles langue par langue directement depuis la fiche du look. Les libellés d’interface côté boutique (boutons, notifications) suivent la langue active de la boutique.
Dépannage
Le carrousel ne s’affiche pas sur la page d’accueil. Vérifiez qu’au moins un look est activé, que l’option d’affichage sur la page d’accueil est cochée, et que votre thème déclenche bien le hook d’affichage de la page d’accueil.
Le bloc n’apparaît pas en fiche produit. Le bloc ne s’affiche que si au moins un look actif contient le produit consulté et que l’option correspondante est activée.
Un produit n’est pas ajouté par « Acheter le look ». C’est le comportement attendu lorsqu’il est en rupture de stock sans réassort autorisé, désactivé ou non disponible à la vente.
Désinstallation
La désinstallation depuis le gestionnaire de modules supprime les tables du module, les looks, leurs hotspots ainsi que les images de looks téléversées. Pensez à exporter ou sauvegarder vos visuels au préalable si vous souhaitez les conserver.