← All sections

Shoppable Lookbook

An editorial image with hotspot product cards, a linked product list and add-the-look.

ProCollections26 settingsInstall
Full screen ↗

Install

One file: sections/mf-shoppable-lookbook.liquid. It appears in the theme editor as EX · Shoppable lookbook.

  1. Connect EXPERAISE Sections to Claude (once). In Claude Code:
    terminal
    claude mcp add --transport http experaise-sections https://sections.experaise.com/api/mcp --header "Authorization: Bearer YOUR_LICENSE_KEY"
    In the Claude app: Settings → Connectors → Add custom connector → https://sections.experaise.com/api/mcp. Full setup
  2. Ask Claude. It fetches sections/mf-shoppable-lookbook.liquid, pushes only that file to your theme with Shopify CLI, and tells you where to find it.
    prompt
    Install the EXPERAISE Sections section "Shoppable Lookbook" (shoppable-lookbook) on my Shopify store your-store.myshopify.com. Put it on an unpublished copy of my live theme, then tell me how to add it in the theme editor.
  3. Customize. Online Store → Themes → Customize → Add section → EX · Shoppable lookbook. Every text, color and product is a setting.
Pro

The Liquid for Shoppable Lookbook is part of Unlimited

The live preview is free for everyone. Unlimited unlocks the installable file for every Pro section, Claude installs with your license key, and new drops every week.

Get Unlimited · €99/year →What's included
Why it converts

Shop-the-look turns inspiration into a multi-item cart: every product in the frame is one tap from the bag, and the whole look is one more.

Specs

File: sections/mf-shoppable-lookbook.liquidIn the theme editor: EX · Shoppable lookbookBest on: index, collection, page templatesSettings: 26 · blocks: HotspotValidated: Shopify Theme Check, no external assets

About this section

Shoppable Lookbook is a Pro Shopify Online Store 2.0 section that turns one editorial photo into a shop. Merchants add up to eight hotspot blocks, each with a product and a horizontal and vertical position in percent. Every hotspot is a numbered, softly pulsing dot. Clicking a dot, or reaching it with the Tab key, opens a product card next to it with image, title, star rating from the standard reviews.rating metafields, price, compare-at price, variant name, an Add to cart button and a link to the product page. Escape or a click outside closes it, and the card opens above or below the dot and away from the image edges based on its position. Beside the image, an optional panel lists the tagged products with the same numbers and a round quick-add button; hovering a row highlights its dot and hovering a dot highlights its row. Under the list, the total of the available products (with the compare-at total struck through) sits above an Add the full look button that puts everything in the bag in one request. Adding uses the AJAX Cart API, announces the result to screen readers and dispatches cart:refresh; without JavaScript every form still posts to the cart. On mobile the dots stay on the image, the products become a swipeable strip, and tapping a dot scrolls to its card. With reduced motion the pulse and entrance animations are off. An empty image setting shows an illustrated bathroom shelf with hotspots already placed. It is one self-contained file with scoped CSS and JavaScript.

Questions

How do I place the hotspots on my photo?

Add a Hotspot block for each product, pick the product, then move the Horizontal position and Vertical position sliders (0 to 100%) until the dot sits on the item in the theme editor preview. Positions are relative to the image, so they stay put at every screen size as long as the Image shape setting does not change.

What does Add the full look do?

It sends every available tagged product to the cart in one AJAX Cart API request, one of each, using the first available variant. Sold-out products are skipped and left out of the total. Without JavaScript, the button posts a regular form with the same items to your cart.

Is the lookbook keyboard and screen-reader friendly?

Yes. Each dot is a real button labelled with its number, product name and price, with aria-expanded reflecting the card. Tabbing onto a dot opens its card, Tab moves into the card's buttons, and Escape closes it and returns focus to the dot. Add-to-cart results are announced through a polite live region.

What happens on phones?

Cards next to the dots would cover the photo on a small screen, so on mobile the dots stay on the image and the tagged products appear as a swipeable strip underneath, each with its own quick-add button. Tapping a dot scrolls the strip to that product and outlines it.

More sections