Runway shop-the-look section
A fashion store section where full-length looks line up, step forward and open with numbered pins on every piece you can add to the bag.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A single-file, no-library shop-the-look section for a fashion store. Six full-length looks stand on a soft stage with a mirror floor. The front look steps forward every few seconds; tap it and numbered pins pop onto each piece. The side panel lists every piece with sizes (sold-out sizes crossed out), and shoppers can add one item or the whole outfit with a bundle discount. Four layouts (Line-up, Runway queue, Turning ring, Gallery), three colour schemes, a bag drawer that remembers its contents, swipe on phones and a sticky add-to-bag bar. The demo store is Loom & Lane with example products and INR prices; swap in your own looks, products and photos in CONFIG and LOOKS.
Build it step by step
Sign in to tick steps off-
1
Build the stage and the line-up
Create one HTML file with a store header, the section title and a soft stage where six full-length looks stand in a row. The front look is sharp; the rest step back, shrink and blur.
Create a single-file HTML shop-the-look section for a fashion store called "Loom & Lane". No libraries, no outside requests. Layout: a sticky store header, then a two-column section (stage on the left, a 380px product panel on the right). The stage is a rounded box, height clamp(420px, 58vh, 600px), with a white-to-#f4f4f2 gradient and a faint floor line at 83%. Six looks stand on the floor as full-length transparent cut-out photos with a soft mirror reflection under each. Arrange them as a line-up: the active look is centred at full size, neighbours sit 0.8 model-widths apart, 5% smaller per step, blurred 1.6px per step and hidden beyond two steps. Animate every change with transform, filter and opacity over 900ms, cubic-bezier(.22,.8,.22,1). Under the stage add previous / next buttons, a pause button and a row of tabs whose progress bar fills over 6 seconds and then moves to the next look.
Done when Six looks stand on the stage and step forward one by one every 6 seconds.
-
2
Open a look with numbered pins
Tapping the front look opens it: the others slide away and numbered pins pop onto each piece. The right-hand panel lists the pieces with size buttons and an Add to bag button.
Add an open state to the runway. Tapping the front look sets the stage to open: other looks slide off to the sides and fade, a "All looks" back button appears top left, and numbered round pins (26px, white, monospace number) pop onto each piece with a staggered delay and a soft ping ring. Hovering a pin shows its product name. The right-hand panel shows "In this look", the look number and name, and one row per piece: a cropped thumbnail of that piece with its pin number, brand, product name, price (sale price in red with the old price struck through) and a + button that expands size buttons. Sold-out sizes are crossed out and disabled. Clicking a pin opens the matching row, highlights it and makes that pin dark. Never pick a size for the shopper.
Done when Tapping the front look shows pins; tapping a pin opens that piece's sizes in the panel.
-
3
Add the bag and the full-look discount
Shoppers can add one piece or the whole outfit. The bag opens as a side drawer with quantities, and a full-look bundle takes a percentage off.
Add a working bag. Each piece has "Add to bag" (asks for a size first). The panel footer shows "Complete the look" with the bundle price (e.g. 10% off, code LOOK10) and an "Add full look to bag" button; if any size is missing, open the look, expand the first missing piece and say which sizes are needed. The bag opens as a right-hand drawer with a scrim: lines with thumbnail, name, size, a quantity stepper, remove, subtotal, the bundle discount line when every piece of a look is in the bag, total and a Checkout button. Show a toast after each add and bump the bag count in the header. Save the bag in localStorage and close the drawer with Escape. Prices in INR with Intl.NumberFormat en-IN.
Done when Adding the full look opens the bag with the discount applied, and the bag survives a reload.
-
4
Layouts, schemes and the phone version
Add the extra layouts and colour schemes, then make it work well on phones with swipe and a sticky add-to-bag bar.
Add three more layouts with a segmented switch: Runway queue (looks queue into the distance and walk out one at a time), Turning ring (looks turn on a ring with the front one in focus) and Gallery (all six side by side). Each layout has its own eyebrow, title and subtitle. Add Studio, Paper (warm cream) and Night colour schemes with CSS variables, and a Mirror floor toggle. Under 860px wide: stack the panel under the stage, make the stage edge-to-edge, hide tab names, show a sticky bottom bar with the look name, bundle price and "Add full look", and support left/right swipe on the stage. Support arrow keys, pause autoplay while the panel is hovered, the bag is open or the tab is hidden, and respect prefers-reduced-motion.
Done when All four layouts and three schemes switch cleanly, and on a phone you can swipe looks and add one from the sticky bar.
Files and links
-
runway-shop-the-look.html 57 KB The finished file. Add six transparent model cut-outs in a photos/ folder (feet on the bottom edge), or edit PHOTOS.
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.