Shoppable image hotspots on Shopify: make a lookbook photo buyable
A complete-the-look widget usually renders as a row of product cards underneath the photo. A shoppable image does the opposite: it leaves the photo as the hero and puts small numbered dots on it, one per product, so the image itself becomes the storefront. If your merchandising already lives in your photography, that is the layout you want.
When a hotspot beats a carousel
A carousel is the right default for most product pages: it is compact, predictable, and works on any photo. A pinned image earns its place in narrower cases:
- Editorial and lookbook imagery, where the styling is the point and a row of cropped cards undersells it.
- A hero product that deserves the extra attention of a hand-curated set.
- Campaign and landing pages where the image is doing the selling and you want the shopper to buy from the photo, not from a grid below it.
Building one
- Start a hand-built look. Hotspots are a hand-built-look feature — you place the pins yourself.
- Choose the backdrop. Pick which image from that product’s own gallery the dots sit on. This is rarely the featured image, which is often a packshot with nothing to pin onto.
- Add an item per product you want shoppable, then click the photo to drop that item’s dot where it actually appears.
- Set the block Layout to “Pinned image” in the theme editor so the dots render instead of a carousel.
The two catches to know first
Changing the backdrop clears your pins. This is deliberate, not a bug: a pin is stored as a position relative to the photo it was dropped on, so reusing those coordinates on a different image would scatter the dots into meaningless places. Pick the backdrop before you start pinning.
A look with no pins renders as a carousel. The layout falls back rather than showing a bare photo, so a half-finished look never breaks a page — but it also means “I set Pinned image and nothing changed” usually means the look has no pins yet.
Hotspots and AI looks aren’t either/or
A product can hold an AI look and a hand-built look at the same time. The AI look serves first; the hand-built one sits behind it as the fallback. So hand-pinning your twenty hero products costs you nothing in AI coverage elsewhere — it is additive, not a trade.
Worth being precise about one thing: AI looks do not get pins automatically. Pin placement is a manual act. An AI look renders as a carousel or grid, and choosing the pinned layout does not convert it.
What it costs
Nothing in AI terms. Hand-built looks involve no image analysis, and every plan — including the free one — includes the same hand-built allowance (25 by default). For a brand with a handful of campaign images, that is usually more than enough to cover everything worth pinning.
Do it with Shop The Look
Merch - Shop The Look ships the pinned-image layout alongside the carousel and grid, and the hand-built look editor lets you pick the backdrop from the product’s own photos and click to place each pin. AI looks cover the catalogue at scale; hand-built pinned looks cover the images you have styled deliberately. It installs as a no-code theme app block, and hand-built looks are included on every plan. Live on the Shopify App Store, with plans from a free tier up to Enterprise.
Install on the Shopify App Store →
Frequently asked questions
Do AI-generated looks get hotspots automatically?
No. Pin placement is a hand-built-look feature — you click the photo to place each dot. An AI look renders as a carousel or grid.
What happens if a look has no pins?
It quietly renders as a carousel instead. The pinned-image layout falls back rather than showing an empty photo, so a half-finished look never breaks the page.
What happens to my pins if I change the backdrop photo?
They’re cleared, deliberately. A pin is stored as a position relative to the photo it was dropped on, so the same coordinates would land in meaningless places on a different image.
Does a hand-built look replace the AI look on that product?
No, they coexist. A product can hold both; the AI look serves first and the hand-built one acts as the fallback, so hand-pinning your hero products isn’t a trade-off against AI coverage.
Do hotspots cost AI credits?
No. Hand-built looks involve no AI analysis, and every plan includes the same hand-built allowance — including the free plan.