Shoppable Lookbook — Shop the Look
Install and use the shoppable lookbook: create a look, place hotspots, configure the carousels and one-click look checkout.
The Shoppable Lookbook — Shop the Look module turns your lifestyle photos into interactive storefronts: you place clickable dots (hotspots) on the products visible in an image, and your visitors can explore each item and add the entire look to the cart in a single click. This documentation covers installation, creating a look, configuring the display, and the storefront behavior.
Compatibility
- PrestaShop 8.0 to 8.2
- PrestaShop 9.0
- Single-store and multi-store
- Multilingual (FR / EN / ES / DE / IT)
- Classic-based themes
Installation
- Go to Modules > Module Manager in your back office.
- Click Upload a module and select the
dfshopthelook.zipfile. - Once installed, a new Shop The Look tab appears under the Catalog menu.
On installation, the module automatically registers its display hooks (home page and product page) and creates the tables required to store looks and their hotspots.
Create your first look
Open Catalog > Shop The Look then click Add a new look.
1. Set the title and image
Enter a title (translatable per language) and, optionally, a short description. Then upload the look image: prefer a visual at least 1200 px wide, in JPG, PNG or WEBP format. As soon as the file is selected, a preview appears immediately in the editor, even before saving.
2. Place the hotspots
Click directly on the image where a product is located: a search window opens. Type the product’s name or reference, then pick it from the list (thumbnails make identification easier). The dot is then placed and numbered.
You can reposition a dot at any time by dragging it with the mouse. Coordinates are stored as percentages, which guarantees faithful placement whatever the image’s display size on the storefront.
3. Manage the list of dots
Below the image, each hotspot appears in a list with its number, the linked product and its coordinates. Use the trash icon to remove a dot. You can place as many hotspots as needed, and even link several dots to the same product.
4. Save
Set the position (the look’s display order) and the Enabled state, then click Save. The look is ready.
Configure the display
From the module’s configuration page (Module Manager > Configure), you control both placements independently:
- Home page carousel: enable it and set the maximum number of looks shown.
- Looks on the product page: enable it and set the maximum number of looks shown. Only looks that contain the current product appear in the “Complete the look” block.
On the storefront
The carousel
On the home page, a horizontal carousel presents your looks as cards. Each card shows the image, a badge with the number of products, and two buttons on hover: View the look and Buy the look.
The “View the look” modal
Clicking View the look (or the card) opens an immersive window: the enlarged image with its pulsing dots on one side, the product list on the other. Hovering a product row highlights the matching dot on the image, and vice versa. Each product shows its price formatted according to the active currency and language; unavailable items are flagged.
“Buy the look” in one click
The Buy the look button adds every product tied to the visual to the cart in a single action. The module:
- adds each product’s default combination;
- respects the minimum quantity defined on the product;
- automatically skips items out of stock without allowed backorder;
- deduplicates products placed on several dots.
The PrestaShop cart is then refreshed natively and a notification confirms the addition. If some products could not be added (out of stock), a message says so.
Multilingual
Each look’s title and description are translatable language by language directly from the look’s form. The storefront interface labels (buttons, notifications) follow the store’s active language.
Troubleshooting
The carousel does not appear on the home page. Check that at least one look is enabled, that the home page display option is ticked, and that your theme properly triggers the home page display hook.
The block does not appear on the product page. The block only shows if at least one active look contains the current product and the matching option is enabled.
A product is not added by “Buy the look”. This is the expected behavior when it is out of stock without allowed backorder, disabled, or not available for order.
Uninstallation
Uninstalling from the Module Manager removes the module’s tables, the looks, their hotspots and the uploaded look images. Remember to export or back up your visuals beforehand if you want to keep them.