Shop the Look Shopify Code: Build It Without a Developer

Key takeaways

• Dawn has no built-in shop-the-look section, so you build one with a custom Liquid section, metafields, and a schema with hotspot blocks.
• Store hotspot positions as percentage coordinates, not pixels, so they stay pinned to the garment at every breakpoint.
• A product reference list metafield plus a look image metafield lets one styled look power every carousel without manual edits.
• Keep hotspot tap targets at least 44x44 pixels and test at 360px, 390px and 428px widths on a real phone.
• Custom code is free but you own the maintenance; apps suit merchants launching multi-image looks weekly.

Shop the look Shopify code lives in Dawn and other OS 2.0 themes as a custom section: a look image, product hotspots stored as percentage coordinates in metafields, and Liquid that renders a shoppable carousel from that JSON. This guide gives you the copy-paste snippets, the section schema, and the point where an app beats custom code.

Where is shop the look functionality in Shopify's Dawn theme?

Dawn does not ship a dedicated shop-the-look section out of the box. What you get natively is the "Image with text" and collage-style sections, which can display an image alongside a product, but neither supports clickable hotspots or a shoppable Shop The Look carousel tied to image coordinates. If you want hotspots, you build it: a custom section, metafields to hold the look's product list, and Liquid to render both.

What Dawn gives you natively

Dawn's sections follow Shopify's standard architecture: each is a Liquid file in /sections with a {% schema %} block defining its settings and blocks. That schema is what the theme editor reads, so any shop-the-look section you add appears there like a native one. The Shopify sections documentation covers the structure you need.

Where the section files live in the code editor

Open Online Store → Themes → Edit code. Your new file goes in sections/, e.g. shop-the-look.liquid. Product data lives in metafields under Settings → Metafields, and your section reads them via the product or variant object.

For the imagery itself, tools like Styla Studio vs The New Black AI compare generation workflows and pricing for the on-model looks you place under these hotspots, without a shoot per outfit.

How do you build shop the look with metafields and Liquid?

Setting up the metafield definitions

In Shopify admin, go to Settings > Custom data > Products and create two metafields. First, a file or image reference type called look_image that holds the full styled photo. Second, a product reference list called look_products with a limit high enough for every item in an outfit, typically 5 to 10 entries. Set both to be visible in the theme editor so templates can read them. If you want looks at the collection level instead, create the same pair under Collections and attach them to your lookbooks.

The Liquid snippet that renders the carousel

Create snippets/shop-the-look.liquid and pull both metafields from the product object:

{% if product.metafields.custom.look_image %}
  <div class="stl-carousel">
    <img src="{{ product.metafields.custom.look_image | image_url: width: 1200 }}"
         alt="{{ product.title }} styled look">
    {% for item in product.metafields.custom.look_products.value %}
      <a href="{{ item.url }}" class="stl-hotspot"
         style="top: {{ item.metafields.custom.hotspot_y.value }}%;
                left: {{ item.metafields.custom.hotspot_x.value }}%;">
        {{ item.title }} — {{ item.price | money }}
      </a>
    {% endfor %}
  </div>
{% endif %}

The loop is where design consistency matters. Because every look references the same product records, prices, URLs and titles stay correct without manual edits, and the imagery itself stays repeatable when it comes from one generation workflow rather than a new shoot per outfit. That single source of truth is what makes the shoppable Shop The Look carousel work for a small team: you style a look once, attach its products, and every product page, launch post and carousel pulls from the same data. The alternative, rebuilding each look by hand after every shoot, is the cost problem most solo founders already know too well (Styla Studio vs a product photoshoot). Where this snippet falls short: it renders hotspots from metafields you must fill in yourself, and it does nothing about image quality or hand placement. Garbage in, garbage out.

Attaching the snippet to product templates

In your OS 2.0 theme, edit the product template JSON and add a block or section that includes {% render 'shop-the-look', product: product %}. In Dawn, the fastest path is a custom liquid block on the product template. Position it below the buy box, then preview on a product that has both metafields filled.

What JSON template does a shop-the-look section need?

An OS 2.0 section is a Liquid file plus a {% schema %} block declaring its settings and blocks. You need three things: an image_picker setting for the look photo, a "products" block type for the items in the outfit, and per-block settings for the hotspot's x and y coordinates as percentages. Shopify's metafields and metafield definitions docs explain how to store look data on the product itself if you prefer metafields over section settings.

The section schema block by block

The schema needs a name, a class if you're styling it, and a settings array. The image_picker gets an id like "look_image". Each block gets "type": "hotspot" with settings for "product" (a product picker), "x_pos" and "y_pos" (range settings, 0–100), and optional label text. Add a "limit": 6 on the block type so merchants can't stack twenty hotspots on one image. Presets belong in the schema too, or the section won't appear in the theme editor's "Add section" list.

Adding the section to a JSON template

Create sections/shop-the-look.liquid, then reference it in your product or page JSON template under "sections" with a type matching the filename. In the Liquid body, loop section.blocks, use the block's product setting for the card, and position the hotspot with left: {{ block.settings.x_pos }}%; top: {{ block.settings.y_pos }}%.

Honest limitation: this hand-rolled section won't generate the on-model imagery itself. You still need a styling tool that respects fabric detail and keeps designs consistent, like Styla Studio pricing, before the section has anything worth hotspotting.

How do hotspots link products to image coordinates?

Percentage coordinates vs pixel coordinates

Store every hotspot as a percentage of the image width and height, not pixels. A hotspot at x: 42, y: 30 means 42% across, 30% down, so it stays pinned to the jacket's lapel whether the image renders at 1200px or 320px. Pixel values break the moment a theme resizes the image, which is every breakpoint. Store the pair in a metafield as JSON: [{"x":42,"y":30,"product":"gid://shopify/Product/123"}].

The hotspot Liquid and CSS

Wrap the look image in a relatively positioned container, then loop the metafield and output each hotspot as an absolutely positioned button:

<div class="look-wrap">
  {{ look_image | image_url: width: 1200 | image_tag }}
  {% for spot in product.metafields.custom.hotspots.value %}
    {% assign p = all_products[spot.product] %}
    <a class="hotspot" style="left:{{ spot.x }}%;top:{{ spot.y }}%"
       href="{{ p.url }}">{{ p.title }}</a>
  {% endfor %}
</div>

.look-wrap { position: relative; }
.hotspot { position: absolute; transform: translate(-50%, -50%); }

translate(-50%, -50%) centres the dot on the coordinate, so the marker itself never drifts. Keep hit targets at least 44px on mobile or thumbs will miss. If your on-model imagery comes from an AI styling tool, generate each look at a fixed aspect ratio so your saved coordinates stay valid; the Styla FAQ covers garment detail, commercial use and signup credits for that workflow.

How do you test shop the look on mobile breakpoints?

Tap target size and scroll behaviour

Most of your traffic will tap hotspots with a thumb, so each one needs a hit area of at least 44×44 pixels. Wrap your small visual dot in a larger button element and keep hotspots away from the image edges, where thumbs overshoot. Test that a tap opens the product card without also triggering the carousel's horizontal scroll; set touch-action on the hotspot layer so the browser treats the two gestures separately.

Then check the carousel itself: it should snap to one card per swipe, not drift halfway between two. Resize down to 360px wide and confirm the look image crops to the model's outfit rather than shrinking into a thumbnail where fabric detail disappears.

A quick QA checklist

• Hotspots stay inside the visible crop at 360px, 390px and 428px widths
• Tap opens the card in one touch; no double-tap zoom hijacking
• Horizontal swipe scrolls cards, never the page
• Product thumbnails load lazily so the first look paints fast
• On-model imagery keeps stitching, logos and pattern detail legible at mobile resolution

Run this on a real phone, not just DevTools, since emulators handle touch and viewport behaviour differently from physical devices.

When should you use an app instead of custom code?

Custom code vs apps vs native sections compared

If you ship a handful of looks per season, the native Dawn section is enough. If you regenerate on-model imagery weekly and want a shoppable Shop The Look carousel on every product page, an app saves you from maintaining Liquid yourself.

Where custom code falls short

Custom Liquid gives you control, but you own every bug: hotspot drift on mobile breakpoints, image cropping that moves coordinates, and no admin UI for merchandisers to reposition hotspots without a developer. Apps handle that editing layer for you.

One honest limitation of AI-generated imagery worth naming: the image_url filter caps resolution at 2048x2048, so zoom-heavy look images need care (Shopify dev docs on image_url and responsive image filters). If your generated on-model shots need fine fabric detail on zoom, test this before committing to either path.

Where does the on-model imagery for each look come from?

The content bottleneck behind shop the look

A carousel is only as good as the image behind it. Frequent professional photoshoots are out of budget for most small apparel teams, and hiring models for every look is worse. Generic tools make it harder: mainstream generators often fail to respect the actual details of the clothing, so logos distort, patterns shift between images, and fabric ignores real-world physics. Lingerie and swimwear get flagged as NSFW even when the shot is clearly for e-commerce.

Generating consistent look imagery with Styla Studio

Styla Studio generates on-model imagery built around your garments, so the minute details of the fabric and how it falls on the model carry across every look in the carousel. You style outfits from your own closet, produce the images, and feed them straight into the metafields from earlier sections. Weird hand placements, extra fingers, and distorted patterns are the failure modes to check for.

Honest limits: Styla is our product, so treat this as one option among several. The New Black AI, Whering, and Pebblely also generate fashion imagery, and a professional shoot still beats any generator for hero pieces. Run any tool through the same test: same garment, three generations, compare the stitching and logo. If they drift, the carousel drifts with them.

FAQ

How do I add a shop the look section to a product page in Dawn?

Dawn has no built-in shop-the-look section, so you create one. Add sections/shop-the-look.liquid with an image picker, hotspot blocks, and a schema with presets, then reference it in your product JSON template. Alternatively, drop a custom liquid block on the product template that renders a snippet reading your look metafields.

Can I do shop the look on Shopify without an app?

Yes. Store a look image and a product reference list as product metafields, then use Liquid to render the image with hotspot links positioned by percentage coordinates. It costs nothing but your time: expect a day or more of setup, and you own the maintenance. Apps suit merchants launching multi-image looks weekly instead.

How do I make shoppable images with clickable hotspots in Shopify?

Wrap the look image in a relatively positioned container and output each hotspot as an absolutely positioned anchor, using percentage coordinates like left: 42%; top: 30% so they survive resizing. Store the coordinates and product references in a JSON metafield, loop it in Liquid, and keep each tap target at least 44 pixels.

Why are my shop the look hotspots in the wrong place on mobile?

Pixel-based coordinates break when the theme resizes the image at different breakpoints, so hotspots drift off the garment. Switch to percentage coordinates instead. Also check that your look image keeps a fixed aspect ratio across widths, add transform: translate(-50%, -50%) to centre each marker, and test at 360px, 390px and 428px.

Does shop the look work with Shopify's free themes other than Dawn?

Yes, any Online Store 2.0 free theme works, because they all support custom sections in sections/ with a schema block, JSON templates, and custom liquid blocks on product templates. The same metafields and Liquid snippets apply unchanged. Older vintage themes lack JSON templates, so there you would edit the product template Liquid directly.