> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/shoppable-content/shop-the-look.md).

# Shop the look

A styled image beside a product list. The photo shows the full look while shoppers add individual items to cart from the list next to it, and each product can drop a pin on the image.

![Shop the Look overview](/files/2JP09U3tlGt8Fe39c27Z)

{% hint style="success" %}
The look image displays large on desktop — upload it at a minimum of 1800px on the long side to keep it sharp. Portrait orientation usually fills the panel best.
{% endhint %}

***

## Settings

### Layout

| Setting        | Description                                                                                                                                                                     |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width          | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
| Image width    | How much of the section the look image takes up.                                                                                                                                |
| Image position | **Left** — Image on the left, product list on the right. **Right** — Image on the right, product list on the left.                                                              |

### Gap

| Setting | Description                                              |
| ------- | -------------------------------------------------------- |
| Desktop | Space between the image and the product list on desktop. |
| Mobile  | Space between them on mobile.                            |

### Background

| Setting         | Description                                       |
| --------------- | ------------------------------------------------- |
| Media           | Section background media type.                    |
| Video           | Shopify-hosted background video. Autoplays muted. |
| Image           | Section background image.                         |
| Image — Mobile  | Separate background image for mobile.             |
| Show overlay    | Adds a color layer over the background media.     |
| Overlay color   | Color and opacity of the overlay.                 |
| Parallax effect | Scroll effect applied to the background media.    |

### Color

| Setting      | Description                   |
| ------------ | ----------------------------- |
| Color scheme | Color scheme for the section. |

### Padding

| Setting                 | Description                                           |
| ----------------------- | ----------------------------------------------------- |
| Padding top / bottom    | Outer spacing above and below the section.            |
| Custom padding — Mobile | Override desktop padding with separate mobile values. |

***

## Available Blocks

The section uses a fixed three-block structure.

### Image

The styled photo the pins sit on.

| Setting                 | Description                                                                             |
| ----------------------- | --------------------------------------------------------------------------------------- |
| Image                   | The desktop image.                                                                      |
| Mobile Image (optional) | Separate image for mobile.                                                              |
| Image ratio             | Crop ratio — Original, Square (1:1), Portrait (4:5, 3:4, 2:3), or Landscape (3:2, 4:3). |
| Corner radius           | Rounding of the image corners — Inherit, Square, Rounded, or Custom.                    |
| Custom corner radius    | The exact radius, when Corner radius is Custom.                                         |

### Section Header

The heading area above the product list. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).

### Product List

Holds one **Product** child block per item in the look.

| Setting                    | Description                                                                                       |
| -------------------------- | ------------------------------------------------------------------------------------------------- |
| Type                       | Show the products as a grid or a carousel.                                                        |
| Desktop columns            | Number of products per row on desktop.                                                            |
| Mobile columns             | Number of products per row on mobile.                                                             |
| Horizontal / Vertical      | Grid only — gaps between products and rows on desktop.                                            |
| Horizontal — Mobile        | Grid only — gap between products on mobile.                                                       |
| Desktop / Mobile           | Carousel only — gap between slides.                                                               |
| Show navigation on desktop | Carousel only — previous / next arrows, with **Position**, **Style**, **Icon**, and **Behavior**. |
| Type (Pagination)          | Carousel only — style of the pagination indicator.                                                |
| Top padding                | Carousel only — space between the carousel and the indicator.                                     |
| Limit width                | Carousel only — caps the progress bar to a **Max width** instead of letting it span the carousel. |
| Max width                  | Carousel only — the widest the progress bar can run. Available when Limit width is on.            |
| Autoplay                   | Carousel only — advances the carousel automatically.                                              |
| Pause on hover             | Carousel only — stops the timer while the cursor is over the carousel.                            |
| Speed                      | Carousel only — how long each slide stays before advancing.                                       |

{% hint style="info" %}
The arrows are a wide-screen feature — below 1200px the panel is too narrow to hold them and they stay hidden. When **Behavior** reveals them on hover, hovering anywhere in the product panel is enough; the pointer does not have to be over a product.
{% endhint %}

#### Product

Each Product block holds one product and can place its pin on the look image.

| Setting                                 | Description                                                                        |
| --------------------------------------- | ---------------------------------------------------------------------------------- |
| Product                                 | The product this block represents.                                                 |
| Show hotspot on image                   | Displays this product's pin on the look image.                                     |
| Horizontal / Vertical                   | Pin position on the image.                                                         |
| Custom mobile position                  | Lets the pin sit at a different spot on mobile, where the image crops differently. |
| Horizontal — Mobile / Vertical — Mobile | The pin's mobile position. Shown when Custom mobile position is on.                |

Hovering a pin on desktop shows the product's name and price beside it and brings that product up in the list. In the carousel layout the hover also holds the autoplay, so the slide stays put while the shopper reads it. Clicking or tapping a pin jumps to the product without the tooltip, which is how it behaves on touch screens.

{% hint style="info" %}
A pin placed perfectly on desktop can drift onto the wrong item once the image reframes on a narrow screen. After positioning your pins, preview on mobile and use **Custom mobile position** to correct any that have moved.
{% endhint %}