> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/produktdartstellung/shop-the-look.md).

# Shop the Look

Creative product bundle presentation with hover spots

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="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FnBrqPbTS5tsjC1DzfJu2%2FBildschirmfoto%202024-10-07%20um%2021.29.35.png?alt=media&amp;token=b8f6c333-6ec2-4142-acba-951441451597" alt=""><figcaption></figcaption></figure>

### Product - Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2F8XES4tgP9PT0ro2YNVWV%2FBildschirmfoto%202024-10-07%20um%2021.30.56.png?alt=media&amp;token=2b628092-ed28-4324-bb97-ce30e5769d9f" 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="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FVFnov9GO9WMHsphGKs9G%2FBildschirmfoto%202024-10-07%20um%2021.31.46.png?alt=media&amp;token=901c72e4-a1b2-43ce-96e0-ed6f6e405172" alt=""><figcaption></figcaption></figure>

### Additional - Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FzFp5uHqxnAv84zHqek47%2FBildschirmfoto%202024-10-07%20um%2021.32.06.png?alt=media&amp;token=269cb251-05a9-489b-a262-561f68c96433" 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>