Snug Gallery

Snug Gallery / Guides

How to make a shoppable lookbook on Shopify

6 min read · Updated September 27, 2026

Turn editorial photos into a shop-the-look page: pin products onto images so shoppers can add them to the cart without leaving the lookbook.

A lookbook sells the outfit, the room or the setup, not a single SKU. The problem with most Shopify lookbooks is that they are just image sections: a shopper who likes the jacket has to guess its name and search for it. A shoppable lookbook fixes that by pinning the products shown in each photo, with a card that adds them to the cart in place.

Plan the shoot around the pins

Every lookbook photo should show two to four products you actually stock, framed so that each has a clear area for a pin. Wide shots with one small product produce pins that overlap; tight shots with ten products get cluttered. Landscape images work best in the Lookbook layout because product cards sit beside the photo on desktop and under it on phones.

Export images at about 2000 px on the long edge. Shopify resizes them for every screen, so there is no need to prepare multiple sizes.

Step 1: build the gallery

  1. In Snug Gallery, create a gallery and choose the Lookbook layout. Upload your editorial photos and write a caption for each one; the caption becomes the headline next to the image (“Big air, bright layers”), so write it like a magazine deck, not a file name.
  2. Click an image, then Shop the look. Click Add pin (or click directly on the photo where the product is), search your catalog and pick the product and, if relevant, the variant (colour, size). Repeat for every product in the shot.
  3. Save. Pinned images show a badge with the pin count in the editor so you can see what still needs pinning.

Step 2: choose how pins look

In the theme editor block settings, Shop the look pins can be shown as a dot, a numbered marker, or a product-name tag. Dots are the least distracting on busy photos; numbered pins match the numbered product list beside the image; name tags need the least explanation for first-time visitors. Pick a pin colour that contrasts with your photos rather than your brand colour if the two clash.

When a shopper taps a pin they see the product image, title, price and an Add to cart button. Adding uses Shopify's cart API, so the theme's cart drawer or cart count updates the same way it does for a regular product page.

Step 3: put the lookbook where people will see it

  1. Create a page (Online Store > Pages) called Lookbook or the name of the collection, then open it in the theme editor and add the Gallery app block from Snug Gallery.
  2. Add the same gallery, or a shorter one, to the home page under the hero. Lookbooks placed only in the footer menu get a fraction of the traffic.
  3. Link to the lookbook from the collection it features and from your campaign emails. The page has a clean URL and real HTML, so it can also rank for “[your brand] lookbook” searches.

Measure it

Adds to cart from a lookbook show up in Shopify Analytics like any other add to cart, so compare the conversion rate of sessions that viewed the lookbook page with sessions that did not. If pins are being opened but not added, the price or the variant selection is usually the reason; if pins are not being opened at all, try numbered pins so shoppers realise the markers are interactive.

Shop-the-look pins are part of Snug Gallery's Unlimited plan ($9.99/month); galleries, layouts, captions, tag filters and the lightbox are available on every plan, including Free.

More guides