# Shop the look

By featuring an image that showcases products combined in a cohesive look, this section allows customers to view related products alongside the main image and add them directly to their cart. This section is ideal for encouraging customers to purchase entire outfits, sets, or complementary items in one easy experience.

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

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Shop the look** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The **Section settings** control the main image, layout, product display, and other visual options.

* **General settings:**

> - **Image**: Select an image to display in the Shop the look section. Use a high-quality image that clearly showcases the featured products.
> - **Image ratio**: Adjust the image ratio with the following options: **Square, Portrait, Adapt to image** (maintains original image size).
> - **Desktop layout**: Choose the position of the image relative to the product list: **Left** or **Right.** On mobile, the image layout defaults to showing the image first.
> - **Products per row on desktop**: Specify the number of products to display per row beside the image.

* **Product card settings:** allow you to control the appearance of products displayed alongside the main image.

> - **Image ratio**: Adjust the product image ratio to **Portrait** or **Square**.
> - **Show product rating**: If enabled, displays the product rating (for products with existing reviews).
> - **Show color swatches**: Enable this option to display color swatches under each product image, helping customers easily view available color variations.
> - **Enable quick add button**: Activates a **Quick view** button, allowing customers to view product details and add items to their cart without navigating away from the page.

* **Hotspot color**: Choose a color for the hotspot markers on the image: **Light** (White) or **Dark** (Black)
* **Shop the look button** (Mobile only): Customize the label for the “Shop the Look” button on mobile. When customers tap this button on mobile, the products list will appear, making it easier for mobile users to view and add items.

### 3, **Product block settings:**

The **Product block settings** enable you to select individual products and set the position of their respective hotspots:

* **Add a product block**. Select a product from your store to display in the section. This product will appear in the product list beside the main image.
* **Hotspot position**: Position the hotspot for each product on the main image using the following sliders:

> - **Horizontal**: Adjust the horizontal position of the hotspot (range from 0% to 100%).
> - **Vertical**: Adjust the vertical position of the hotspot (range from 0% to 100%).


---

# 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://help.byinspiredlabs.com/section/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.