Shoppable lookbook in WooCommerce: turn one image into a shop-the-look gallery with hotspots
By Mariusz Szatkowski · Updated: 2026-06-22
A styled photo is the most persuasive thing in a store and the hardest to buy from. A shopper sees an outfit or a room they want, but cannot tell which products are in the shot or how to add them to the cart. A shoppable lookbook closes that gap: it turns one image into a shop-the-look gallery where every product is a hotspot you can open and buy. This guide explains what a shoppable lookbook is, what to look for, and how Lookbook does it.
What a Shoppable Lookbook Is
A shoppable lookbook is a single image with products pinned onto it as hotspots. Instead of a flat picture with a caption full of links, each item in the scene becomes an interactive marker. When a shopper activates a hotspot, a small product card appears with the thumbnail, title, current price and an add-to-cart link.
The point is the path from inspiration to cart. A beautiful photo creates desire; the hotspots let the shopper act on it without leaving the image. One scene can sell a whole outfit, a furnished room or a gift set, rather than sending people back to the catalog to find each piece.
Why a Plain Photo Does Not Sell
A styled photo on its own has three problems:
- Shoppers cannot tell which products are in the photo. They see the look, not the SKUs.
- There is no path from inspiration to cart. Each item has to be hunted down in the catalog, and most people give up.
- Manual linking is tedious and goes stale. Listing products under a photo by hand is slow, and the links break or show old prices when the catalog changes.
A shoppable lookbook fixes all three by binding the products to the image itself and reading their data live.
What to Look For
Not every shop-the-look tool is built the same. Four things matter:
- Live product data. Hotspots should read the title, price, thumbnail and cart link from the real WooCommerce product, so nothing goes stale.
- Accessibility. Markers should be real buttons that work with the keyboard and carry screen-reader labels, not just decorative dots.
- Performance. The gallery should not load assets site-wide or shift the layout. Heavy galleries slow the store and push content around as they load.
- Graceful failure. If a pinned product is deleted, its hotspot should disappear quietly rather than break the page.
How Lookbook Does It
Lookbook for WooCommerce turns a single image into a shoppable scene. You upload a photo, pin any number of products as hotspots, and embed the result with the [lookbook id="123"] shortcode anywhere on the site.
Each hotspot is positioned with a simple X/Y editor: you give each product a position as a percentage from the top-left of the image, in the 0 to 100 range, so the marker lines up with the item in the photo. Markers are real buttons, keyboard operable and labelled for screen readers.
When a shopper opens a hotspot, the product-card popover shows the thumbnail, title, live price and an add-to-cart link. All of it is read live from WooCommerce by product ID, so prices and stock are always current. The add-to-cart label and whether the price shows are toggles under WooCommerce → Lookbook that apply to every lookbook at once.
The front end is built to stay out of the way. The stylesheet and script load only on pages that actually render a lookbook, the script is deferred, the image reserves its space so there is no layout shift, and the plugin uses no jQuery. A missing image, a lookbook with no hotspots, or a deleted product all render cleanly with no broken markup. On uninstall, the plugin removes its own data.
The free edition is the complete shoppable image. Lookbook Pro extends it with a marker accent colour, the product gallery shown as a slideshow inside hotspot cards, multiple images per lookbook with tab navigation, video hotspots and click analytics. Those are shipped today; extra animation styles beyond the three free marker styles are planned.
Shoppable Lookbook Versus Default WooCommerce
WooCommerce has no built-in way to make an image shoppable. Here is the difference for shop-the-look specifically:
| Capability | Default WooCommerce | Lookbook |
|---|---|---|
| Pin products onto an image | None built in | Unlimited hotspots on one image |
| Position the markers | n/a | X/Y editor in percentages (0 to 100) |
| Product card on the image | None | Thumbnail, title, live price, add to cart |
| Live price and stock | n/a | Read live from WooCommerce by product ID |
| Accessible markers | n/a | Real buttons, keyboard, screen-reader labels |
| Embed anywhere | n/a | [lookbook] shortcode |
| Performance | n/a | Assets only where used, deferred, no jQuery, no layout shift |
| Deleted product | n/a | Hotspot skipped, page stays intact |
| Cost | Free (no such feature) | Free; PRO adds accent colour, gallery cards, multiple images, video hotspots, analytics |
The Short Version
A shoppable lookbook turns a styled photo into a shop-the-look gallery by pinning products onto the image as hotspots that open a card with the live price and add to cart. Look for live WooCommerce data, accessible markers, a light front end and graceful failure when a product is removed. Lookbook delivers all of that for free, with Lookbook Pro adding gallery cards, multiple scenes, video hotspots and analytics on top.