How do you add a shop-the-look section on Shopify?

A shop-the-look section displays a styled photo, a room scene or a full outfit, with clickable hotspots on each featured product. Shoppers tap a dot and get a quick view or a link to the product page. Some themes ship a shoppable-image section you can configure in the editor. If yours does not, an app or a small custom section gets you there. The custom build is lighter and cheaper than most apps, but it needs a developer hour, not a weekend.

Check your theme first

Open the theme editor, add a section to a page template, and search for lookbook, shoppable image, or hotspots. A growing number of themes include this as a native section: you upload the styled photo, add products, and drag each hotspot into position over the image. Because it uses the theme's own product cards and quick-view styling, it matches the store automatically and adds no extra scripts.

If the section exists but the hotspot positioning is fiddly, that is normal. Positioning dots precisely on a responsive image is inherently awkward in every implementation. Zoom the editor preview, place the dots on desktop, and then check mobile, where the image crops differently and dots often drift. Budget time for the mobile check; it is where most shop-the-look sections quietly break.

The app route

Lookbook and shoppable-gallery apps add hotspot sections to any theme, usually with nicer admin interfaces than theme-native sections: drag-and-drop dot placement, analytics on which hotspots get tapped, and support for video. The costs are the subscription, the extra JavaScript on every page where the section appears, and the styling, which will never match the theme as cleanly as a native section.

Apps make sense when merchandising needs the analytics, when the marketing team builds looks weekly and needs the friendliest editor, or when the store runs on a theme with no native section and no developer access. For a set-and-forget look on the homepage, the app is usually overkill.

The custom section build

A developer can build a lean shop-the-look section in a few hours: an image with absolutely positioned buttons over it, each button opening the theme's existing quick-view or linking to the product. The hotspot coordinates are stored as section settings, percentages of image width and height, so they scale responsively. The product data comes from product pickers in the schema, so merchandisers can swap products without touching code.

The details that separate a good build from a janky one: dots that stay legible on busy photos, usually with a pulse or ring treatment; keyboard and screen-reader access to each hotspot, since dots are buttons, not decoration; and a fallback layout on small screens, where tapping tiny dots on a cropped image frustrates everyone. On mobile, consider switching to a product carousel under the image instead of hotspots.

Making the photography work

The section is only as good as the photo. Hotspots need clear visual separation between products: an outfit where the bag overlaps the jacket and the shoes are half-cropped produces dots that confuse more than they convert. Shoot or select images with each shoppable product clearly visible and spatially separated. Fewer products per look convert better than a dot-covered image; three to five hotspots is the sweet spot.

Update the looks seasonally. A shop-the-look section with last season's products is worse than no section, because it advertises staleness. Tie the refresh to whatever calendar the merchandising team already follows.

The verdict

Use the theme's native shoppable-image section if it has one, reach for an app when the team needs analytics and a friendly editor, and build custom when you want the lightest, best-matched result. Whatever the method, keep hotspots few, photography clear, and the mobile experience tested, because that is where the taps actually happen.