Lookbook Shoppable — Shop the Look
Installer et utiliser le lookbook shoppable : créer un look, placer les hotspots, choisir les déclinaisons, régler carrousel ou affichage déplié 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, le choix des déclinaisons, les modes d’affichage et le comportement côté boutique.
Compatibilité
- PrestaShop 8.0 à 8.2
- PrestaShop 9.0
- Mono-boutique et multiboutique
- Interface traduite en 8 langues (EN, FR, DE, ES, IT, PL, PT, NL)
- 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 : JPG, PNG, GIF ou WEBP, 8 Mo maximum, de préférence au moins 1200 px de large. 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).
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. Choisir la déclinaison visible sur la photo
Si le produit sélectionné possède des déclinaisons, une seconde étape apparaît : « Quelle déclinaison est visible sur la photo ? ». Choisissez la combinaison exacte montrée sur l’image (par exemple « Couleur : Écru, Taille : M »), ou laissez Déclinaison par défaut si le visuel ne montre pas de variante particulière.
Cette déclinaison reste modifiable à tout moment : chaque point de la liste sous l’image dispose d’une liste déroulante. Vous pouvez donc corriger une couleur ou une taille sur un look enregistré depuis longtemps, sans supprimer ni replacer le hotspot.
Si une déclinaison épinglée est supprimée du catalogue par la suite, le menu retombe automatiquement sur « Déclinaison par défaut ».
4. Gérer la liste des points
Sous l’image, chaque hotspot apparaît avec son numéro, le produit associé, sa déclinaison 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.
5. Mise en avant et enregistrement
Activez Mis en avant sur la page d’accueil si ce look doit alimenter le carrousel de la page d’accueil. Réglez la position (ordre d’affichage) et l’état Activé, puis cliquez sur Enregistrer.
Dans la liste des looks, une colonne Mis en avant permet de basculer cet état d’un simple clic, sans ouvrir la fiche.
Configurer l’affichage
Depuis la page de configuration du module (Gestionnaire de modules > Configurer), vous contrôlez indépendamment la page d’accueil et la fiche produit.
Deux modes au choix
- Carrousel : plusieurs looks présentés côte à côte sous forme de cartes. Un clic ouvre une fenêtre immersive.
- Look unique déplié : un seul look intégré directement dans la page, image à gauche et liste des produits à droite, sans aucune fenêtre popup.
Les deux emplacements se règlent séparément : vous pouvez par exemple afficher un grand look déplié sur la page d’accueil et un carrousel en fiche produit.
Page d’accueil
En mode carrousel, seuls les looks mis en avant sont affichés, dans la limite que vous fixez. En mode look unique, choisissez le look voulu dans la liste déroulante Look à afficher sur la page d’accueil, ou laissez « Premier look mis en avant ».
Si le look sélectionné est supprimé ou désactivé par la suite, le module bascule automatiquement sur le premier look mis en avant, pour éviter un bloc vide sur votre page d’accueil.
Fiche produit
En mode carrousel, les looks contenant l’article consulté sont affichés dans la limite fixée. En mode look unique, c’est le look le plus pertinent contenant cet article qui s’affiche déplié. Aucune sélection manuelle n’est nécessaire.
Choix de la déclinaison par le client
L’option Laisser le client changer la déclinaison affiche un sélecteur à côté de chaque produit côté boutique. Désactivée, les déclinaisons choisies en back-office s’imposent. Activez-la en mode (le client choisit sa taille), désactivez-la en décoration si le look doit rester figé.
Côté boutique
Le carrousel
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 fenêtre « 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.
L’affichage déplié
En mode look unique, le même contenu est intégré directement dans la page, sans popup. Cliquer un point met en évidence la ligne produit correspondante. Sur mobile, les deux colonnes passent l’une sous l’autre.
Prix et disponibilité par déclinaison
Chaque produit affiche le prix et l’image de sa déclinaison, formatés selon la devise et la langue actives. Si le sélecteur est activé, changer de déclinaison met à jour le prix et l’état de stock en direct. 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 choisie par le client, sinon celle épinglée en back-office, sinon la déclinaison par défaut ;
- 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, un message le précise.
Multilingue
L’interface du module est traduite en huit langues (EN, FR, DE, ES, IT, PL, PT, NL) et suit la langue active de la boutique. Le titre et la description de chaque look sont, eux, à traduire langue par langue directement depuis la fiche du look.
Mise à jour depuis une version antérieure
Les mises à jour sont automatiques : déposez la nouvelle version depuis le gestionnaire de modules et PrestaShop exécute les scripts de migration. Vos looks, hotspots et images sont conservés.
Après une mise à jour vers la 1.2.0, tous les looks existants sont marqués comme mis en avant et les deux emplacements restent en mode carrousel : votre boutique se comporte exactement comme avant, et vous activez les nouveautés quand vous le souhaitez.
Dépannage
Le carrousel ne s’affiche pas sur la page d’accueil. Vérifiez qu’au moins un look est actif et mis en avant : depuis la 1.2.0, le carrousel de la page d’accueil n’affiche que les looks mis en avant. Un avertissement apparaît d’ailleurs dans la configuration si aucun ne l’est.
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.
Le sélecteur de déclinaison n’apparaît pas. Il n’est affiché que si l’option « Laisser le client changer la déclinaison » est activée et que le produit possède au moins deux déclinaisons.
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é, non disponible à la vente ou non associé à la boutique courante.
L’envoi de l’image échoue. Le dossier modules/dfshopthelook/views/img/looks/ doit être accessible en écriture. Un avertissement s’affiche dans la configuration du module si ce n’est pas le cas.
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 à sauvegarder vos visuels au préalable si vous souhaitez les conserver.