Section: Shop the Look

Everything you'll need to know on how to setup your Shop the Look section.

The Shop the Look section pairs a lifestyle image with clickable hotspot dots — each dot pinned to a position on the image links to a specific product card on the side. Perfect for fashion outfits, room scenes, gift bundles, or any context where multiple products tell a single visual story. Up to 6 products per look.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section which can be found in your left sidebar.

2) Scroll down, or search for Shop the Look, then click on it.

3) Done — your Shop the Look section is added.

The general settings contain the heading, layout, image, and spacing of the Shop the Look section. Simply click on the section to open the settings.

Select the color scheme for the section. You can pick from any of the schemes set up in Theme Settings → Colors. Controls the section background, heading text, hotspot dot color, and product card styling.

Small uppercase label shown above the title. For example: Complete the Look, Featured Outfit, or Style Guide. Leave empty to hide.

The main heading of the section, rendered as an H2 tag. For example: Shop the Look or Get the entire outfit. Leave empty to hide.

Short paragraph below the title. Use it to add context — for example: Click any dot on the image to discover the product. Leave empty to hide.

Text alignment of the heading group: Left, Center, or Right. Default: Left.

Maximum desktop font size of the title in pixels (28–72). The default 44 px gives the title strong presence. Mobile scales down automatically.

Where the lifestyle image sits on desktop: Image left or Image right. On mobile the image always shows on top with the products below.

Percentage of total width occupied by the image, between 40% and 70%. The default 60% gives the image dominance — perfect for tall portrait lifestyle photos. Reduce to 40–50% if you have many products.

Horizontal space between the image and the product cards on desktop, between 20 px and 100 px. The default 50 px gives the layout breathing room.

Maximum width of the section content, between 900 px and 1600 px. The default 1200 px works for most stores.

Use a portrait or square lifestyle photo for best results. The image hosts the hotspot dots that link to your products. A built-in placeholder is shown if empty. Recommended size: 800 × 1067 px or larger.

Round the corners of the lifestyle image, between 0 px and 24 px. The default 8 px gives a soft modern look. Set to 0 for sharp edges.

Space above the section in pixels (0–120). The default 64 px works for most pages.

Space below the section in pixels (0–120). The default 64 px works for most pages.

Each hotspot is an individual Product block. Click Add block inside the section and choose Product. You can add up to 6 products per section. Each block creates one dot on the image and one card on the side.

Pick the product to feature in this hotspot. The card automatically pulls the product image, title, vendor, price, and availability. The Add to cart button uses the first available variant. Sold-out products show a Sold out label instead of the button.

Horizontal position of the hotspot on the image, between 5% and 95%. 0% = left edge, 100% = right edge. Use the value to pin the dot directly onto the product in the photo (e.g. on the shirt or shoes).

Vertical position of the hotspot on the image, between 5% and 95%. 0% = top edge, 100% = bottom edge. Adjust until the dot sits exactly on the product within the photo.

Use the live preview in the theme editor as your reference. Adjust Horizontal position and Vertical position in small steps (1–2%) and watch the dot move on the image. For a model wearing an outfit, place dots near the center of each visible item — the shirt at around (50%, 30%), shoes at (50%, 90%).

The section is capped at 6 products to keep the image readable — too many dots would clutter the photo. If you need more, add a second Shop the Look section below the first with a different lifestyle image.

Portrait or square lifestyle photos work best because they leave room for product cards beside them on desktop. A 3:4 portrait or 1:1 square at 800–1200 px wide gives a sharp result without slowing the page.

The button reads availability from the product's first available variant. If all variants are sold out, the button is replaced with a Sold out label. Restock the product or pick a different one for the hotspot.

Yes — each dot has a pulsing ring animation that draws attention without being distracting. The animation is automatically disabled for visitors who have Reduced motion enabled in their OS, for accessibility.