Outfit Lineup Ecommerce

Built for Ferrow, the sample brand inside the template

A shop-the-look fashion hero: six complete looks stand in one lineup, the chosen one sharp in the centre with numbered dots on its top, bottom and shoes, the rest soft at the sides; click, swipe or step and the lineup slides while the look's pieces and bundle price fill the panel.

It builds, or it's free. If this prompt doesn't rebuild the site you saw in its live demo, email us within 14 days of buying for a full refund.

Outfit Lineup preview: A shop-the-look fashion hero: six complete looks stand in one lineup, the chosen one sharp in the centre with numbered dots on its top, bottom and shoes, the rest soft at the sides; click, swipe or step and the lineup slides while the look's pieces and bundle price fill the panel.
Open in a new tab

How it moves

A warm stone page with nav links left, a centred FERROW wordmark in Bodoni Moda and Search and Bag right. Six fictional full-length models stand side by side on one floor: the chosen look sharp and about 700px tall in the centre with a soft contact shadow and three pulsing numbered dots (top, bottom, shoes); two models to its left and three to its right, each place smaller, blurrier and paler. Hovering a dot shows the piece's name and price beside it and lights its row in the 420px 'In this look' panel, which lists three cut-out product photos with name, colour, price and a round add button, then 'Complete the look' with the full price struck through, the 12%-off bundle price and 'Add full look to bag'. Clicking a side model, dragging or swiping the stage, the arrows, the arrow keys or the '01 Morning Trench 02 03 04 05 06' row slides the whole lineup (it wraps) so that look steps into the centre and sharpens, while the panel rows flip in and the dots land. On a phone the neighbours peek in from both edges, the look name sits above the number row and the bundle price and button are a fixed bottom bar.

What you get

  • A tested build prompt · 8.5k wordsPaste it into Claude Code, Cursor, Codex or Lovable and it builds the hero section by section.
  • The working projectVite + React. npm install && npm run dev and it runs, no keys or accounts.
  • The assets and their promptsEvery image and loop, plus the exact prompts that made them, so you can make your own.

Inside the prompt

A fashion shop whose first screen is a lineup of six complete looks. All six models stand side by side on one pale floor: the chosen look stands sharp and full height in the middle with three numbered dots on it (top, bottom, shoes), and the other five wait to each side, smaller, blurred and faded. Point at a dot (or tap it) and the piece's name and price appear beside it while its row lights up in the "In this look" panel on the right. Click a side model, swipe, drag, press an arrow or pick a number and the whole lineup slides so that look steps into the centre and sharpens, while the panel rows flip over to its pieces. The panel ends on the bundle price and one button: "Add full look to bag".

  1. What it is
  2. Style collection
  3. Build steps
  4. Assets
  5. Motion
  6. Make it yours
  7. Launch checklist
  8. Acceptance checks

More like this