Shop the look on Shopify: a collection launch where the models arrive in style

Give it a second and 6 people walk into an empty studio, find their marks and line up. Drag the line-up round. Pick whoever's dressed the way you fancy, step up to them, and everything they're wearing has a pin on it and a place in your bag.

Have a go below. There's music if you want it (tap Sound, bottom right, while the opening plays). On a phone, swipe the line-up and tap View look.

Open it full screen

What you're looking at

Clicky Fits is a clothing label we made up, launching a range that doesn't exist, worn by 6 people who were never in a studio. Each one is a short film of a single turn on the spot, looping. Step up to a look and they come round to face you and stop, 3 numbered pins appear on what they're wearing, and each pin opens the piece: a proper product photograph, sizes, add to bag. Take one piece or the whole outfit (the whole outfit is 10% off, obviously).

It's "shop the look", which every fashion site has somewhere. Usually it's a small grid under the product photos that nobody scrolls to. We wanted to see what happens if you make it the whole page.

What it's for

Launch day. A new collection is the one moment a clothing brand has everybody's attention, and most of the time it gets a banner and a grid of the same products on the same white background as everything else.

This is a campaign page for that moment. It sits on top of a Shopify store, so every piece is a live product, every size is a variant with its real stock, the bag is Shopify's cart and the checkout is Shopify's own. We don't expect it to replace your product grid, and it shouldn't. The grid is still there for search, filters and anyone who knows exactly what they want. This is the bit that makes people stop and look first.

Why this one was hard

You'd think the hard part would be the people. It wasn't... it was getting 6 of them to walk in at once.

Our first opening was one film of all 6 walking into the studio together. It looked great as a thumbnail. Then you watched it at full size and the faces fell apart, because each one was only about 90 pixels tall and a video model has nothing to work with at that size. We threw it away (twice) and shot it again as two closer films of 3, which the page plays side by side as if it were one. Nobody can see the join because there isn't anything in the middle to join: it's the same empty studio.

The other thing nobody warns you about is shadows. Cut a person out of a photo and you lose the shadow at their feet, and a person with no shadow looks stuck on. So there are no cut-outs here at all. Every film was re-lit until its studio was the exact colour of the page, and the browser does the rest.

How we made it

Here's the whole thing, step by step, with the pictures from the build.

1. Cast 6 people who don't exist

Each look started as a written brief: who they are, what they're wearing, how they stand. An image model made between 4 and 8 takes of each. We picked one per look, choosing on light first, so that all 6 stand in the same sun with their shadows falling the same way.

2. Ask each one for a single turn

A video model was given the still twice, as the first frame and as the last, and asked for one slow turn on the spot. Because the film ends on the picture it started from, it loops with no join. Each turn is 8 seconds.

3. Re-light the studio until it is the page

There are no cut-outs anywhere on the page. Every frame of every film is re-lit so the studio paper becomes exactly the page's colour, and the browser then shows whichever is darker, the page or the film. The paper disappears. The person stays, and so does their real shadow, which a cut-out would have thrown away.

4. Stand everyone on the same floor

A subject mask finds each person's feet and the top of their head. From those, each is scaled to their own height, from 164 to 187cm, and stood on one floor line. The same mask places the 3 pins: the top, the bottoms and a shoe.

5. Photograph every piece

Each of the 18 pieces has its own product photograph, made from the person's own still so the jumper in the rail is the jumper they're wearing, down to the buttons. They came back on a paper slightly pinker than the page, so they were re-lit the same way as the films. That's why each piece lies straight on the page with no box round it.

6. Walk them in together

The opening is two 10 second films playing side by side, 3 people in each: an empty studio at the start, a row of 6 at the end. Each film's last frame was laid out by the page itself, so every person lands within a pixel of where their own loop is waiting, and the loops take over while nothing is moving.

7. Check every face

Faces are where a video model goes wrong first, and the smaller the face, the sooner. Both walk-in films were checked frame by frame at full size, next to the same person's own loop.

AI made the pictures and the music. We chose the people, directed every film, checked every face and threw away the takes that weren't good enough.

Would this work with real clothes?

Yes, and that's rather the point. For a real range you'd photograph the pieces you already photograph, and the people could be generated like these, or be your own models filmed doing one turn each. One turn per look is a short morning in a studio, not a shoot. Everything after that, the line-up, the pins, the bag, is the page.

Built by Sprint

Clicky Fits is an experiment from Sprint, the web development studio that's part of Clicky Group. It's one of a series we're building to show what we can make when we stop starting from a template.

Got a collection coming?

If you've a range to launch and you'd like it to feel like an event, talk to Sprint. We'll show you what it could look like with your clothes on the line-up.