> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/shop-the-look.md).

# Shop the look

***

The **Shop the look** section allows you to showcase a styled image with interactive hotspots that link directly to products. This creates a highly engaging shopping experience where customers can explore and purchase items directly from a visual “look”.

### 1. Our guide to set up a Shop the look section:

{% hint style="info" %}
**Steps:**

* In the theme editor, click **Add section.**
* Locate **Shop the look.**
* Click **Save.**
  {% endhint %}

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

### 2. **Section settings**

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

* **Color scheme:** Applies colors to the section background, text, and buttons for a cohesive look.
* **Heading:** Add a title for the section (e.g., *Shop the look*).
* **Heading size:** Adjust the size of the heading.
* **Desktop layout:** Controls whether the main image appears on the left or right side of the product list.
* **Image settings**
  * **Image:** Upload the main lifestyle image that represents the “look”.
  * **Image overlay opacity:** Adds a dark overlay to improve hotspot visibility and contrast.
  * **Corner radius:** Adjusts rounded corners of the image for a softer or sharper appearance.
* **Product card settings:** Control how linked products are displayed next to the image:
  * **Font size scale:** Adjusts product title size.
  * **Content alignment:** Aligns product information within cards.
  * **Image ratio:** Controls the shape of product images.
  * **Show second image on hover:** Displays an alternate product image when hovering.
  * **Show image border:** Adds a border around product images.
  * **Show vendor:** Displays brand/vendor name.
  * **Show product rating:** Shows product ratings (requires a rating app).
  * **Show color swatches:** Displays variant color options.
  * **Enable quick add button:** Allows customers to quickly view/add products without leaving the page.
* **Hotspot settings:** Hotspots are clickable icons placed on the image to highlight products.
  * **Hotspot icon:** Choose the icon style: Bag or Cart.
  * **Hotspot color:** Adjust contrast depending on image background.

### **3. Product block settings**

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

Each block represents one product linked to a hotspot on the image.

* **Product:** Select a product from your store to display and link.
* **Hotspot position:** Defines where the hotspot appears on the image:
  * **Horizontal:** Controls left → right position.
  * **Vertical:** Controls top → bottom position.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.inspiredtheme.com/articles/sections/sections-available-in-inspiredtheme/shop-the-look.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.