# Shoppable Lookbook — Shop the Look

> 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…

- Page: <https://www.datafirefly.com/en/documentation/dfshopthelook/>
- Language: en
- Last updated: 2026-09-09
- Other languages: [fr](https://www.datafirefly.com/documentation/dfshopthelook/index.md), [es](https://www.datafirefly.com/es/documentation/dfshopthelook/index.md), [de](https://www.datafirefly.com/de/documentation/dfshopthelook/index.md), [it](https://www.datafirefly.com/it/documentation/dfshopthelook/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfshopthelook/index.md), [pt](https://www.datafirefly.com/pt/documentation/dfshopthelook/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfshopthelook/index.md)
- Index: <https://www.datafirefly.com/en/documentation/llms.txt>

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, picking combinations, display modes, and the storefront behavior.

## Compatibility

- PrestaShop 8.0 to 8.2
- PrestaShop 9.0
- Single-store and multi-store
- Interface translated into 8 languages (EN, FR, DE, ES, IT, PL, PT, NL)
- Classic-based themes

## Installation

1. Go to **Modules > Module Manager** in your back office.
2. Click **Upload a module** and select the `dfshopthelook.zip` file.
3. 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**: JPG, PNG, GIF or WEBP, 8 MB maximum, preferably at least 1200 px wide. 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).

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. Pick the combination shown on the photo

If the selected product has combinations, a second step appears: **"Which combination is shown in the photo?"**. Pick the exact combination shown in the image (for example "Color: Ecru, Size: M"), or leave **Default combination** if the visual does not show a specific variant.

That combination stays **editable at any time**: each dot in the list below the image has its own dropdown. So you can fix a color or a size on a look saved long ago, without deleting and re-placing the hotspot.

If a pinned combination is later removed from the catalog, the dropdown automatically falls back to "Default combination".

### 4. Manage the list of dots

Below the image, each hotspot appears with its number, the linked product, its combination 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.

### 5. Featuring and saving

Enable **Featured on home page** if this look should feed the home page carousel. Set the **position** (display order) and the **Enabled** state, then click **Save**.

In the looks list, a **Featured on home** column lets you toggle that state in a single click, without opening the form.

## Configure the display

From the module's configuration page (**Module Manager > Configure**), you control the home page and the product page independently.

### Two modes to choose from

- **Carousel**: several looks presented side by side as cards. A click opens an immersive window.
- **Single expanded look**: one look embedded right in the page, image on the left and product list on the right, **with no popup window at all**.

Both placements are set separately: you can for instance run a large expanded look on the home page and a carousel on the product page.

### Home page

In carousel mode, only **featured** looks are shown, up to the limit you set. In single look mode, pick the look you want from the **Look to display on home page** dropdown, or leave "First featured look".

If the selected look is later deleted or disabled, the module automatically falls back to the first featured look, to avoid an empty block on your home page.

### Product page

In carousel mode, the looks containing the current item are shown up to the limit you set. In single look mode, the most relevant look containing that item is displayed expanded. No manual selection is needed.

### Letting customers pick the combination

The **Let customers change the combination** option displays a selector next to each product on the storefront. When disabled, the combinations chosen in the back office are enforced. Enable it for fashion (customers pick their size), disable it for home decor if the look must stay fixed.

## On the storefront

### The carousel

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" window

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.

### The expanded display

In single look mode, the same content is embedded right in the page, with no popup. Clicking a dot highlights the matching product row. On mobile, the two columns stack.

### Price and availability per combination

Each product shows the price and image of its combination, formatted according to the active currency and language. If the selector is enabled, changing combination updates the price and stock state live. 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 the **combination chosen** by the customer, otherwise the one pinned in the back office, otherwise the product default;
- 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, a message says so.

## Multilingual

The module interface is translated into eight languages (EN, FR, DE, ES, IT, PL, PT, NL) and follows the store's active language. Each look's title and description are translated language by language directly from the look's form.

## Upgrading from an earlier version

Upgrades are automatic: upload the new version from the Module Manager and PrestaShop runs the migration scripts. Your looks, hotspots and images are preserved.

After upgrading to 1.2.0, every existing look is flagged as featured and both placements stay in carousel mode: your store behaves exactly as before, and you enable the new features whenever you want.

## Troubleshooting

**The carousel does not appear on the home page.** Check that at least one look is active _and_ featured: since 1.2.0, the home page carousel only shows featured looks. A warning is displayed in the settings when none is.

**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.

**The combination selector does not appear.** It is only displayed when the "Let customers change the combination" option is enabled and the product has at least two combinations.

**A product is not added by "Buy the look".** This is the expected behavior when it is out of stock without allowed backorder, disabled, not available for order, or not associated with the current shop.

**Image upload fails.** The `modules/dfshopthelook/views/img/looks/` folder must be writable. A warning is displayed in the module settings when it isn't.

## Uninstallation

Uninstalling from the Module Manager removes the module's tables, the looks, their hotspots and the uploaded look images. Remember to back up your visuals beforehand if you want to keep them.