> 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/theme-sections/shop-the-look.md).

# Shop the look

Show a styled photo with clickable hotspots next to the products in it. Use it to let shoppers buy a complete look.

***

The **Shop the look** section shows a lifestyle image with hotspots that point to products, next to cards for those same products. Shoppers can explore the look and buy each item from one place.

### 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="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2F36CB7RtLoBmCXCO5wNLB%2FScreenshot%202026-04-21%20at%203.52.35%E2%80%AFPM.png?alt=media&#x26;token=794071c4-6523-46f6-957d-9365f8e1bc01" alt=""><figcaption></figcaption></figure>

The section is added with two **Product** blocks. You can add up to 6.

### 2. Section settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FqxXblN19bOfpMBWOQfmv%2FScreenshot%202026-04-21%20at%203.51.32%E2%80%AFPM.png?alt=media&#x26;token=2cce5713-d251-471c-b3f3-64cb37752355" alt=""><figcaption></figcaption></figure>

* **Color scheme:** The colors of the section's background, text and buttons.
* **Heading:** The title of the section. Leave it blank to hide it.
* **Heading size:** 15–80px.
* **Desktop layout:** Image first / Image second. Places the image on the left or right of the products.
* **Image settings**
  * **Image:** The lifestyle photo that shows the look.
  * **Image overlay opacity:** Darkens the image so hotspots stand out, 0–100%.
  * **Corner radius:** Rounds the image corners, 0–40px.
* **Product card**
  * **Font size scale:** Size of the product titles, 100–200%.
  * **Content alignment:** Left / Center.
  * **Image ratio:** Portrait / Square / Arch.
  * **Show second image on hover:** Shows the product's second image when shoppers hover over the card.
  * **Show image border:** Adds a border around the product image.
  * **Show vendor:** Shows the product's vendor.
  * **Show product rating:** Shows star ratings. Requires a product rating app.
  * **Enable quick add button:** Lets shoppers add a product to the cart without leaving the page.
* **Hotspot**
  * **Hotspot icon:** Bag / Cart.
  * **Hotspot color:** Light / Dark. Pick the one that stands out against your image.
* **Section**
  * **Top padding** and **Bottom padding:** 0–100px.

This section doesn't show color swatches on its product cards. Swatch styles for other sections are set in Theme settings → [Swatches](/articles/theme-settings/inspiredtheme-settings-intro/swatches.md).

### 3. Product block settings

<figure><img src="https://1670075522-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6M5ltDUBhmgWKXclaWBK%2Fuploads%2FVcAXszxNvFBrmIFukrLE%2FScreenshot%202026-04-21%20at%204.01.38%E2%80%AFPM.png?alt=media&#x26;token=fa1ebeb0-12e4-43bd-83f3-e379ecb1aa00" alt=""><figcaption></figcaption></figure>

Each block is one product, with its own hotspot on the image.

* **Product:** The product to show and link to.
* **Hotspot position**
  * **Horizontal:** Moves the hotspot from left (0%) to right (100%).
  * **Vertical:** Moves the hotspot from top (0%) to bottom (100%).

### 4. Tips

* Use an image where each product is clearly visible, then place each hotspot right on the item.
* Preview the section on mobile to check that the hotspots still sit on the right products.
* Try both **Hotspot color** options to see which stands out best on your image.