The Colourway Room
One hoodie, four colours. The next one waits small in the corner, flies into the middle when called, and the whole room repaints to match.
The Colourway Room is a product page where the colour does the selling. One heavyweight hoodie owns the middle of the screen, four dots under it are the whole interface, and the next colour waits small in the bottom corner. Call it and it flies into the centre, lands with a bounce, and the entire room repaints to match it, ink black, midnight blue, oxblood wine or lifted cement grey. One price, no clutter, no strikethrough theatre.
How it works
The page is a product page for a single heavyweight hoodie in four colourways. The colour on stage fills the middle of the screen, the next colour waits as a small product in the bottom corner, and the four swatch dots sit directly under the hoodie. Scroll, click a swatch, or click the corner and the change plays: the current hoodie lifts away, the corner one flies across the page into the centre and lands with a bounce, the following colour steps into the emptied corner, and the entire page repaints to live in the new colour, from near black for ink to a lifted grey for cement. The size buttons work too: choose S and the hoodie on stage shrinks a touch, choose XL and it swells, so the size row does something instead of just sitting there. There is one price and no strikethrough theatre.
Who it fits
Built here for a fictional Korean streetwear brand, it fits any product sold on colour or finish: hoodies and tees, sneakers, caps, bottles, headphones, even cosmetics shades. Three to six colourways is the sweet spot, each needing one cutout product photo, and the playful size buttons suit anything that comes in sizes.
Why it sells
Most product pages treat colour as a thumbnail swap, which sells none of the feeling. Repainting the whole page turns each colourway into a room the visitor stands in for a moment, and the little flight from the corner gives the product the weight of a real object being handed over. The single price keeps the decision simple: pick your mood, pick your size, add to cart.
Recommended for
- Streetwear and basics brands
- Products sold in colourways
- Single product launches
- Drop culture stores
Common questions
What happens when a colour is picked?
Three things at once: the current hoodie lifts away, the chosen colourway flies in from the bottom corner and lands centre stage with a bounce, and the whole page repaints to that colour's mood. The next colour then steps into the empty corner.
Why repaint the whole page instead of just the photo?
Because a colourway is a mood, not a thumbnail. When the room changes with the product, the visitor tries the colour on rather than comparing swatches, which is much closer to how people actually choose.
Do the size buttons do anything?
Yes, playfully: the hoodie on stage wears the size you pick. S pulls it in a little, XL fills the stage. It costs nothing and makes the page feel handled rather than printed.
Can this work for more products or colours?
Yes. The layout takes any number of colourways, each needing one cutout product photo and a background tone, and the same frame works for sneakers, bags, bottles or anything else sold in colour.