Product Slider BlockFree downloadMenu
Woman wearing an oat wool coat over her shoulders against a warm sand backdrop
Woman in a checked blazer, jeans and white sandals leaning on a leather chair in a studio
Woman lowering her sunglasses, wearing a belted taupe trench coat against a brown backdrop
Woman in a stone-coloured double-breasted trench coat against a pale grey backdrop
Woman in an oversized black leather blazer sitting on a wooden stool in a studio
Person in a fuchsia blazer, jeans and a blue and white striped scarf against a pink backdrop
Hem

A product slider for a fashion shop, turned like a magazine

0 in the sample cart

Sample shop. Hem, its products and its prices are made up.

This season, frayed at the ends

Woman wearing an oat wool coat over her shoulders against a warm sand backdrop
Oat wool coat€340
Woman in a checked blazer, jeans and white sandals leaning on a leather chair in a studio
Check blazer€175
Woman lowering her sunglasses, wearing a belted taupe trench coat against a brown backdrop
Taupe belted trench€260
Woman in a stone-coloured double-breasted trench coat against a pale grey backdrop
Stone trench€245
Woman in an oversized black leather blazer sitting on a wooden stool in a studio
Leather boyfriend blazer€390
Person in a fuchsia blazer, jeans and a blue and white striped scarf against a pink backdrop
Fuchsia blazer€189

Why fold for fashion

Clothes are sold by the page. People read a lookbook the way they read a magazine, one spread at a time, and they expect a good crop and an attitude. So the first slider turns: a tall portrait folds to the left and the next look is underneath. It gives the page an order, and it flatters tall crops.

The row underneath uses unweave. Product rows always cut somebody off at the edge of the container, and in a shop that sells cloth you can turn that into a selling point: the cut frays out into threads. Colour choices belong to the Morph Card, where hovering a swatch shows the same coat in another colour without a page load.

How to build this

Product Slider
One at a time, Fold, about 1000 ms, on a 4:5 crop.
Morph Card
For the shop grid, with swatches and a details panel for fabric and fit.
Effect
Unweave on a full-width row with a fraction of a slide in view.

The same products, in plain store blocks

What the rest of this shop would use day to day: a product page, a grid and a related row, in its own colours.

The product page

Block: Product Stage. Pattern: Product page.

Woman in a checked blazer, jeans and white sandals leaning on a leather chair in a studio
Check blazer in second colour, a stand-in for a variation image
Detail of the check blazer

Check blazer

€175

In stock

Cut for an easy fit, in cloth that holds its shape. Pick a colour and the picture, the price and the stock line change together.

The range, with quick view

Block: Morph Grid. Pattern: Shop grid with quick view.

Woman wearing an oat wool coat over her shoulders against a warm sand backdrop
Close-up of the oat wool coat

Oat wool coat

€340Cut for an easy fit, in cloth that holds its shape.
Woman in a checked blazer, jeans and white sandals leaning on a leather chair in a studio
Close-up of the check blazer

Check blazer

€175Cut for an easy fit, in cloth that holds its shape.
Woman lowering her sunglasses, wearing a belted taupe trench coat against a brown backdrop
Close-up of the taupe belted trench

Taupe belted trench

€260Cut for an easy fit, in cloth that holds its shape.
Woman in a stone-coloured double-breasted trench coat against a pale grey backdrop
Close-up of the stone trench

Stone trench

€245Cut for an easy fit, in cloth that holds its shape.
Woman in an oversized black leather blazer sitting on a wooden stool in a studio
Close-up of the leather boyfriend blazer

Leather boyfriend blazer

€390Cut for an easy fit, in cloth that holds its shape.
Person in a fuchsia blazer, jeans and a blue and white striped scarf against a pink backdrop
Close-up of the fuchsia blazer

Fuchsia blazer

€189Cut for an easy fit, in cloth that holds its shape.

Goes well with it

Block: Product Slider. Pattern: Goes well with.

Person in a fuchsia blazer, jeans and a blue and white striped scarf against a pink backdrop
Fuchsia blazer€189Cut for an easy fit, in cloth that holds its shape.
Woman in an oversized black leather blazer sitting on a wooden stool in a studio
Leather boyfriend blazer€390Cut for an easy fit, in cloth that holds its shape.
Woman in a stone-coloured double-breasted trench coat against a pale grey backdrop
Stone trench€245Cut for an easy fit, in cloth that holds its shape.
Woman lowering her sunglasses, wearing a belted taupe trench coat against a brown backdrop
Taupe belted trench€260Cut for an easy fit, in cloth that holds its shape.
Woman in a checked blazer, jeans and white sandals leaning on a leather chair in a studio
Check blazer€175Cut for an easy fit, in cloth that holds its shape.
Woman wearing an oat wool coat over her shoulders against a warm sand backdrop
Oat wool coat€340Cut for an easy fit, in cloth that holds its shape.

Questions

Which image ratio is right for fashion?

Usually 4:5 or taller, so a whole figure fits. Fold and swipe both look better on a tall crop than on a square one.

Can swatches change the picture on the shop page?

Yes. On a Morph Card hovering a swatch previews that variation's image, and clicking it keeps it. Each variation needs its own image.

Will the frayed edge cut off products?

Only those near the very end of the row, and only until they are dragged into the middle. You can set where it starts.

Features to look at

Effects on this page

Patterns to start from

Other sample shops