← All notes

HBN Notes / Shopify guide

How to create a shoppable lookbook on Shopify

Choose a set of lifestyle photos, tag the Shopify products visible in each image, and place the finished lookbook on a page shoppers can browse.

A campaign photograph can make a collection feel obvious. The blouse works with the trousers, the lamp belongs beside the chair, and the three tools form one useful kit. Then the shopper has to search for every item.

A shoppable lookbook closes that gap by connecting visible objects in a photograph to the correct products. The photograph still does the editorial work; product markers simply provide a route into the catalog.

Choose the lookbook’s shopping goal

Choose a specific story before selecting images. “Spring” is broad. “Three lightweight layers for a wet commute” tells the team which products and photographs belong. A room-based store might organize by finished space; a beauty store might show the steps in one routine.

A clear job also creates an ending. Once the photographs have answered the question, the lookbook is complete. Adding another near-duplicate image can make the sequence feel longer without helping anyone discover a new product.

Select photos that show products together

Product photography identifies an item. Lookbook photography should add context: scale, combination, use, texture, or sequence. Keep an image when it reveals something the product page does not already show.

Order the images deliberately. A wide establishing photograph can introduce the whole idea, followed by closer scenes that make individual products easier to recognize. On mobile, that order matters more because shoppers may see only one image at a time.

A useful editing question: if this photograph disappeared, would the shopper lose a product relationship, a practical detail, or a necessary step? If not, it may be repetition.

Tag only products visible in each photo

Tag products that are clearly visible. Place the marker on the object rather than in a convenient empty corner, while avoiding faces, important text, and fine details. If two products overlap tightly, one clear marker and a useful preview can be better than two targets that are difficult to tap.

Check that every marker opens the intended product and that the photographed color or variant still exists. If the exact variant is no longer sold, decide whether the image remains honest inspiration or has become an outdated promise. Removing the tag may be more accurate than linking to a loose substitute.

Choose what happens after a shopper selects a product marker

A product preview is enough when shoppers need to confirm the name, price, and basic identity before opening the full product page. Direct add-to-cart controls are useful for simple, familiar products, but they should not bypass a purchase form that collects measurements, personalization, subscriptions, or other required choices.

The same principle applies to “shop the look” actions. Adding several items together can suit a fixed set or a simple outfit. When every product has meaningful options, let shoppers review each choice instead of presenting a fast button that creates a slow correction later.

Place the lookbook where shoppers browse outfits or collections

A homepage lookbook introduces a campaign. A collection-page lookbook can explain how products in that collection combine. A product-page section can show the item in complete scenes without asking the shopper to navigate away. Repeating the same large gallery on every template is rarely necessary.

Preview the final placement on desktop and mobile, then test every product link in the market where the campaign will run. The lookbook is ready when a shopper can understand the story, identify an item, and reach the right product without needing the store's internal vocabulary.