Lookbook
ProProductv1.0.0
Turn a styled photo into a shop. Place a hotspot on every product in the scene; shoppers open a card with the live price, pick a variant and add it to the cart without leaving the page. The optional product list beside the photo mirrors the hotspots and can add the whole look at once. Adding goes through Shopify's standard cart actions, so your theme's own cart drawer opens and updates.
Good for: Shop the look · Room or outfit inspiration · Campaign photo that sells
When to use it
Use it on your home page, a campaign page or a collection page, wherever you have a styled photo of an outfit or a room.
- Shop straight from the photo. A hotspot sits on each product in the picture. Shoppers open it to see the price, pick a variant and add it to the cart without leaving the page.
- The whole look in one click. The product list beside the photo repeats the hotspots and has an Add all to cart button, so shoppers who like the full set can buy it at once.
- Works with your theme’s cart. Adding goes through Shopify’s standard cart, so your theme’s own cart drawer opens and updates.
Set it up
Add the section
Choose Add section and pick SU: Lookbook. It starts with three hotspots on a placeholder photo.
Add your photo
Under Look, pick the Image. If the photo doesn’t work well on small screens, add a Mobile image too, for example a taller crop of the same scene.
Pick a product for each hotspot
Select a Hotspot block and choose its Product. Add one Hotspot block per product in the photo, up to 8. A hotspot without a product shows only in the theme editor, not to shoppers.
Place the hotspots
Move each hotspot onto its product with Horizontal position and Vertical position, in percent of the photo’s width and height. If you added a mobile image, or the dot lands in the wrong place on phones, turn on Different position on mobile and set Mobile horizontal position and Mobile vertical position.
Choose the layout
Layout sets Image with product list or Image only. With the list, choose which side it sits on under Product list, and keep Show Add all to cart on to let shoppers add every product at once. The button shows when the look has at least two products.
Pick the hotspot style
Set Hotspot style to Pulsing dot, Number or Plus, and choose what happens After adding to cart: Open the cart or Stay on the page.
Add all to cart adds each product in its first available variant, or in the options the shopper picked in the list, and skips anything sold out.
Try it
Settings
In the theme editor, in the order you'll see them. Every section also has the heading and style settings.
Look
| Setting | What it does |
|---|---|
| ImageImage | |
| Mobile imageImage | Optional. Hotspots can have their own positions on it. |
| LayoutDropdown | |
| Product listDropdown | |
| Show Add all to cartCheckbox | |
| Hotspot styleDropdown | |
| After adding to cartDropdown |
Blocks go inside the section: use Add block, up to 8 in all, and drag them to change the order.
Block: Hotspot
| Setting | What it does |
|---|---|
| ProductProduct | |
| Horizontal positionSlider (0–100 %) | |
| Vertical positionSlider (0–100 %) | |
| Different position on mobileCheckbox | |
| Mobile horizontal positionSlider (0–100 %) | |
| Mobile vertical positionSlider (0–100 %) |
Good to know
- Prices, variants and availability come from Shopify when the page renders; a variant that sells out meanwhile is refused at add time with Shopify's message.
- Up to 8 hotspots per look.
- Without JavaScript hotspots link to the product pages and the product list adds to the cart with normal forms.
Changelog
- 1.0.0: Initial release.