# 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. - Category: E-commerce - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/runway-shop-the-look-section/ ## 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. ## Tech stack - CSS - HTML - JavaScript ## Build steps ### 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. Prompt: ```text 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. Prompt: ```text 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. Prompt: ```text 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. Prompt: ```text 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. ## Assets ### runway-shop-the-look.html — The finished file. Add six transparent model cut-outs in a photos/ folder (feet on the bottom edge), or edit PHOTOS. ``` Runway · Shop the look — Loom & Lane
Layout Scheme

New season · Line-up

This season, in one line-up.

Every look steps forward in turn. Tap the one in front to shop it.

View

    Tap the front look to open it

    ``` ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Runway shop-the-look section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/runway-shop-the-look-section/. Stack: CSS, HTML, JavaScript. Follow the plan's steps in order: Build the stage and the line-up → Open a look with numbered pins → Add the bag and the full-look discount → Layouts, schemes and the phone version. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Runway shop-the-look section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/runway-shop-the-look-section/. Stack: CSS, HTML, JavaScript. Follow the plan's steps in order: Build the stage and the line-up → Open a look with numbered pins → Add the bag and the full-look discount → Layouts, schemes and the phone version. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Runway shop-the-look section" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/runway-shop-the-look-section/. Stack: CSS, HTML, JavaScript. Follow the plan's steps in order: Build the stage and the line-up → Open a look with numbered pins → Add the bag and the full-look discount → Layouts, schemes and the phone version. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.