Make the photograph shoppable.

Choose the purchase pattern

Shoppable lookbook puts product cards on one image. Shop the fit offers product cards with variant and inclusion choices. Shop the outfit combines photographed looks, markers and a multi-item purchase. Full-width Slideshow supports two product hotspots per slide.

Build an accurate outfit

1. Add a Look block and photographs of the actual pieces. Connect Piece 1 through Piece 6.
2. Show a marker only for a piece visible in the picture. An unseen accessory can stay in the list without a dot.
3. Horizontal and vertical positions are percentages from the top-left. Place markers on the actual piece, clear of faces and controls.
4. Shop the outfit shares coordinates between desktop and mobile; align both compositions. Slideshow has independent mobile coordinates.
5. Choose sizes, change inclusion checkboxes and Add the look. Verify the exact variants, quantities and total in the cart.
6. Check sold-out pieces. These are normal cart items, not an automatic bundle discount.

Check every hotspot

Give lookbook hotspots descriptive Accessible labels. Use Tab to reach each marker, open the card and follow the link. Check touch interaction at phone size.

Recheck coordinates after replacing or cropping a photo. Select a real product before launch; do not rely on editor placeholders or hover alone.