Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Shop the Look — Free Website Section Template
Menus & listings · v1.0.0 · Updated 2026-11-15 · Responsive · GSAP animation · HTML, React & Vue
Extend with AI
Take This Section Further With AI
Ask an AI assistant to extend the section: load the looks from your own API, add a "Shop the full look" button that adds every tagged item at once, or add a second look with a tab switcher.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Create a "shop the look" section in HTML, CSS and JavaScript.
- Two columns: a portrait lookbook photo (4:5) on the left and a heading, short paragraph and button on the right.
- On the photo, add 2 to 6 round white hotspot buttons positioned with data-x and data-y percentages (left and top), each with a "+" icon that rotates to "x" when open and a soft pulsing ring (disabled for prefers-reduced-motion).
- Clicking or tapping a hotspot opens a small card next to it with a product thumbnail, name, price and an "Add to bag" button. Hovering also opens it with a mouse. Clicking elsewhere or pressing Escape closes it. Hotspots in the right half open the card to the left; hotspots in the lower half open upwards.
- Use aria-expanded on the buttons, and stack into one column on narrow screens.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
What's included
Features
About this section
Shop the Look — Free Lookbook With Product Hotspots
Shop the Look turns one styled photograph into a small shop. Dots sit on the garments in the picture; tap or hover one and a card opens with the product photo, name, price and an Add to cart button that fills the same cart as the rest of your store. It is the pattern fashion and interiors brands use on campaign pages, in a section you can edit and export.
Place the dots with two numbers
Each hotspot has a "from the left" and a "from the top" value, written as a percentage of the photo, so a dot stays on the jacket however large the picture is shown. The cards open to the left for dots on the right side of the photo and upwards for dots near the bottom, so they never run off the picture.
Works with the built-in cart
When the page also has the cart drawer, the Add to bag button adds the item and opens the drawer. Without it, the button is an ordinary link to your product page or payment link. On a phone a tap opens a card and a second tap, a tap elsewhere or Escape closes it; with a mouse the card also opens on hover.
Accessible by design
Every dot is a real button with a text label and an expanded state, the cards can be reached with the keyboard, and the pulsing ring around each dot stops for visitors who prefer reduced motion. Add a clear description of the photo as alt text.
Export it
Download HTML, a ZIP, React or Vue, or fork into My Code. It pairs well with the Product Strip and the Collection Tiles.
Getting the most from it
Choose a photo where every product is clearly visible, tag no more than four or five items, and only tag things that are in stock. Link each card to the real product page, and keep the heading about the occasion ("the weekend look") rather than the products.
Why use it
Why Use the Shop the Look
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, photo, hotspots (products), button and labels (screen readers) in the panel. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
In real websites
Website Templates That Use the Shop the Look Section
The Shop the Look section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Fashion Boutique Website (Online Store). Open any of them in the builder to edit the whole page, or keep customising this section by itself.
Got questions?
Frequently Asked Questions
Each hotspot has two numbers: how far it is from the left and from the top, as a percentage of the picture. Start at 50 and 50 for the centre and adjust until the dot sits on the item.
With the built-in cart switched on, the item is added to the shared cart. Without it, the button is a normal link, so point it at your product page or payment link.
Up to six. More than four or five makes a photo crowded, so choose the pieces that matter most and send the rest to your shop.
Yes. A tap opens a product card, and a tap elsewhere or on the dot again closes it. With a mouse, the card also opens on hover.
It saves an editable copy of your Shop the Look in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.