# Shop the Look

This element offers an innovative and creative way to visually display product bundles and provide users with an interactive shopping experience.

Using **hover spots** on an image, you can place and link individual products directly in a lifestyle image. This allows users to purchase the products they see in the image directly from the list—either individually or as a bundle.

{% hint style="info" %}
**What is the Shop the Look element?**

It allows you to enhance an image—such as a mood picture, room design, or fashion shoot—with clickable **hover spots**.

Each of these spots can be linked to a product, so users can see product information by hovering over or tapping on mobile devices, and they can be directly redirected to the respective product.

Alongside the image, the products are detailed in a list and can be **bundled** into the shopping cart.
{% endhint %}

<figure><img src="/files/WoYB6nZpT12NIc1AFjR9" alt=""><figcaption></figcaption></figure>

### Product - Settings

<figure><img src="/files/pp2lnctLQvKXe1qhqKJY" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="264">Function</th><th>Description</th></tr></thead><tbody><tr><td>Select Products (1)</td><td>Here, you set the products that should be placed on the image.</td></tr><tr><td>Product Settings (2)</td><td>Settings for each product:<br><strong>Top</strong> = Distance of the spot from the top edge of the image<br><strong>Left</strong> = Distance of the spot from the left edge of the image<br><strong>Min. Quantity</strong> = The minimum quantity that the customer can place in the cart for the respective product<br><strong>Max. Quantity</strong> = The maximum quantity that the customer can place in the cart for the respective product.</td></tr><tr><td>Spot in Image (3)</td><td>Preview of the spot in the image to better adjust the positioning.</td></tr></tbody></table>

### Image - Settings

<figure><img src="/files/XznTOatTtbe2OeHJS7G7" alt=""><figcaption></figcaption></figure>

### Additional - Settings

<figure><img src="/files/QSaM1PD6eUPl8P4xIF1c" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="264">Function</th><th>Description</th></tr></thead><tbody><tr><td>Add to Cart (1)</td><td>Products can be added individually to the cart from the list. Alternatively, only as a complete bundle.</td></tr><tr><td>Wishlist (2)</td><td>Products can be added to the wishlist. Note that you must <a href="https://docs.shopware.com/de/shopware-6-de/einstellungen/warenkorb#merkzettel">activate the wishlist in the shop</a>.</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/en/elemente/produktdartstellung/shop-the-look.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.