> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shop the Look

> Showcase products within styled images using interactive product cards and pulse dots.

The Shop the Look section showcases products within a styled image or visual composition. It supports interactive product cards, pulse dots, and multiple layout options.

Shop the Look helps create immersive shopping experiences by connecting products to lifestyle imagery, allowing customers to discover and purchase items directly from styled visuals.

<img src="https://mintcdn.com/digifist/F5zpOunTVbelJdFM/images/theme/release/sections/shop-the-look/shop-the-look-overview.jpg?fit=max&auto=format&n=F5zpOunTVbelJdFM&q=85&s=6f34b6398d7d1f6e370362b2107b6383" alt="Shop the Look section overview" width="3280" height="2176" data-path="images/theme/release/sections/shop-the-look/shop-the-look-overview.jpg" />

## What this section controls

This section controls product showcases within images with the following capabilities:

* Interactive product cards linked to visual imagery
* Pulse dot indicators for product discovery
* Dual content or full width layout options
* Desktop and mobile-specific image support
* Customizable product carousel positioning

## How the Shop the Look works

The Shop the Look uses a block-based product system:

* Products are linked to a visual using product cards or pulse dots
* Layout changes how products are displayed and interacted with
* Pulse dots allow users to discover products directly on the image
* Product slides control which products appear and where dots are placed

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin, access the Theme Customizer.
  </Step>

  <Step title="Add Shop the Look section">
    Add the Shop the Look section to your page or template.
  </Step>

  <Step title="Add product slides">
    Click **Add Product slide** to link products to the image.
  </Step>

  <Step title="Configure layout">
    Select layout type and enable pulse dots if desired.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/shop-the-look-location.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=e03e8509b6133ef3dbf81d5696b9589d" alt="Shop the Look section in Theme Customizer" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/shop-the-look-location.png" />

## Section settings

Section settings define the content, layout behavior, and visual presentation.

<Tabs>
  <Tab title="Content">
    ### Heading

    Main heading text displayed above the section.

    * Supports bold, italic, and links

    ### Heading size

    Controls the size of the heading.

    **Available options:** S, M, L, XL

    ### Text

    Supporting text displayed below the heading.

    * Supports bold, italic, and links
  </Tab>

  <Tab title="Layout">
    ### Layout

    Controls how the image and product cards are displayed.

    **Available options:**

    * **Dual content:** Image and product carousel are displayed side by side
    * **Full width:** Image fills the section width

    <img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/layout-options.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=35e76d2b6e7d8604df84089ff31f8352" alt="Layout options comparison" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/layout-options.png" />

    ## Dual content behavior

    When **Dual content** is selected:

    * Products are displayed as a carousel next to the image
    * The position of the product carousel depends on the **Reverse positions** setting

    ## Full width behavior

    When **Full width** is selected:

    * Image spans the full width of the section
    * If **Show pulse dots** is enabled, products appear when:
      * A pulse dot is hovered
      * A pulse dot is clicked

    <Note>
      In full width layout, products are revealed through pulse dot interaction only.
    </Note>

    ### Image

    Main image used for the section.

    Uses Shopify's image selector.

    ### Mobile image

    Image used on mobile devices.

    <Note>
      If a mobile image is set, it will be used on mobile instead of the main image.
    </Note>

    ### Reverse positions

    Reverses the position of the image and product carousel.

    * Only works when **Dual content** layout is selected
    * Does not apply to **Full width** layout
  </Tab>

  <Tab title="Pulse dots & buttons">
    ### Show pulse dots

    Enables or disables pulse dots on the image.

    **Options:** Enabled / Disabled

    <Tip>
      Pulse dots are interactive indicators that reveal associated products.
    </Tip>

    <img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/pulse-dots.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=39f4cf1999232a9588bb17efc324e0e0" alt="Pulse dots interactive feature" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/pulse-dots.png" />

    ## Button settings

    Product card button settings used in **Full width** layout.

    ### Button label

    Defines the button text displayed on product cards.

    <Note>
      Leave empty to hide the button.
    </Note>

    ### Button style

    Controls the visual style of the button.

    **Available options:** Filled, Outlined, Text
  </Tab>

  <Tab title="Aspect ratio">
    ### Aspect ratio (desktop)

    Controls the aspect ratio of the image or media.

    <Tip>
      Auto option is recommended for long text.
    </Tip>

    **Available options:** Auto, Square, Portrait, Landscape

    ### Aspect ratio for mobile

    Aspect ratio used on mobile devices.

    **Available options:** Auto, Square, Portrait, Landscape

    <img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/aspect-ratio-settings.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=860a152d6126a6b985226cf71a09f066" alt="Aspect ratio configuration" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/aspect-ratio-settings.png" />
  </Tab>
</Tabs>

## Block settings

Block settings control individual product slides. Each product slide represents a single product linked to the image.

<Tabs>
  <Tab title="Product">
    ### Product

    Select a product using Shopify's product selector.

    <Note>
      Once selected, the Shop the Look product card becomes visible.
    </Note>

    <img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/product-selection.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=ab1c002ad0f8b9844eb0ec69ed333438" alt="Product selection in block settings" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/product-selection.png" />
  </Tab>

  <Tab title="Dot position">
    Controls where the pulse dot appears on the image.

    <Warning>
      Pulse dots are visible on desktop only and appear on the image selected in section settings.
    </Warning>

    ### Horizontal position

    Sets the horizontal position of the dot.

    **Range:** 1% – 100%

    ### Vertical position

    Sets the vertical position of the dot.

    **Range:** 1% – 100%

    <img src="https://mintcdn.com/digifist/l5801AUoh95gHg1X/images/theme/release/sections/shop-the-look/dot-positioning.png?fit=max&auto=format&n=l5801AUoh95gHg1X&q=85&s=87d436d9920d69c09c1bdb50b8ef667a" alt="Dot position controls" width="3280" height="2186" data-path="images/theme/release/sections/shop-the-look/dot-positioning.png" />
  </Tab>
</Tabs>

## Best practices

* Use **Dual content** for editorial-style layouts that showcase products alongside imagery
* Use **Full width + pulse dots** for immersive shopping experiences where customers discover products
* Keep pulse dots away from edges (at least 5-10% margin) for better usability and visibility
* Always test dot positions on large screens to ensure proper placement
* Limit the number of product slides to 3-5 for clarity and to avoid overwhelming users
* Use high-quality lifestyle images that naturally showcase multiple products
* Ensure pulse dots are positioned precisely on product locations in the image
* Test mobile experience as pulse dots are desktop-only

## Related guides

<Card title="Common Settings" icon="sliders" href="/themes/release/common-settings">
  Learn about common settings shared across sections
</Card>