Product Slider BlockFree downloadMenu
Thin Layer

A product slider for a skincare range, one layer at a time

0 in the sample cart

Sample shop. Thin Layer, its products and its prices are made up.

Two unlabelled cream pump bottles on an orange and red backdrop with diagonal light
White spray bottles beside a dried palm fan and stone on a blue and tan backdrop
Three unlabelled amber glass bottles with black pumps and a dropper on textured white
Glass serum bottles and a dark jar in a shaft of light on a sage backdrop
Burgundy serum bottle with a blank label and raised dropper on a bamboo-lidded jar
Hand holding an unlabelled white tube against a solid pink background

Behind the glass

Two unlabelled cream pump bottles on an orange and red backdrop with diagonal light
Daily lotion duo€34
White spray bottles beside a dried palm fan and stone on a blue and tan backdrop
Milk mist set€46
Three unlabelled amber glass bottles with black pumps and a dropper on textured white
Amber cleanser trio€58
Glass serum bottles and a dark jar in a shaft of light on a sage backdrop
Night serum and cream€72
Burgundy serum bottle with a blank label and raised dropper on a bamboo-lidded jar
Berry dropper serum€39
Hand holding an unlabelled white tube against a solid pink background
Soft hand balm€18

Why colour distance for skincare

A skincare range is usually shot with care: one surface, matching bottles, the same light. The colour distance transition uses exactly that. Whatever the two photographs share changes first, and only the differences arrive last, so the surface seems to stay still while one bottle becomes another. That gives you a change that hardly looks like an effect, and a sense of order that suits a clinical promise.

The range below sits behind fluted glass, a material from the same bathroom shelf. And the smear effect is there for creams, because the gesture is the product. Note what is not on this page: no before and after pictures and no percentages. A slider should not be making claims about skin.

How to build this

Product Slider
One at a time, Colour distance, about 1300 ms, on one backdrop.
Pattern
Calm duo is a free way to put two products side by side with fades.
Morph Card
With ingredients in the details panel. Keep them to a line or two.

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.

White spray bottles beside a dried palm fan and stone on a blue and tan backdrop
Milk mist set in second colour, a stand-in for a variation image
Detail of the milk mist set

Milk mist set

€46

In stock

A short ingredient list, fragrance free, for every skin type. 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.

Two unlabelled cream pump bottles on an orange and red backdrop with diagonal light
Close-up of the daily lotion duo

Daily lotion duo

€34A short ingredient list, fragrance free, for every skin type.
White spray bottles beside a dried palm fan and stone on a blue and tan backdrop
Close-up of the milk mist set

Milk mist set

€46A short ingredient list, fragrance free, for every skin type.
Three unlabelled amber glass bottles with black pumps and a dropper on textured white
Close-up of the amber cleanser trio

Amber cleanser trio

€58A short ingredient list, fragrance free, for every skin type.
Glass serum bottles and a dark jar in a shaft of light on a sage backdrop
Close-up of the night serum and cream

Night serum and cream

€72A short ingredient list, fragrance free, for every skin type.
Burgundy serum bottle with a blank label and raised dropper on a bamboo-lidded jar
Close-up of the berry dropper serum

Berry dropper serum

€39A short ingredient list, fragrance free, for every skin type.
Hand holding an unlabelled white tube against a solid pink background
Close-up of the soft hand balm

Soft hand balm

€18A short ingredient list, fragrance free, for every skin type.

Goes well with it

Block: Product Slider. Pattern: Goes well with.

Hand holding an unlabelled white tube against a solid pink background
Soft hand balm€18A short ingredient list, fragrance free, for every skin type.
Burgundy serum bottle with a blank label and raised dropper on a bamboo-lidded jar
Berry dropper serum€39A short ingredient list, fragrance free, for every skin type.
Glass serum bottles and a dark jar in a shaft of light on a sage backdrop
Night serum and cream€72A short ingredient list, fragrance free, for every skin type.
Three unlabelled amber glass bottles with black pumps and a dropper on textured white
Amber cleanser trio€58A short ingredient list, fragrance free, for every skin type.
White spray bottles beside a dried palm fan and stone on a blue and tan backdrop
Milk mist set€46A short ingredient list, fragrance free, for every skin type.
Two unlabelled cream pump bottles on an orange and red backdrop with diagonal light
Daily lotion duo€34A short ingredient list, fragrance free, for every skin type.

Questions

Why does colour distance work better here than elsewhere?

It depends on the two photos being similar. A skincare set shot on one backdrop is a close to ideal case. On a mixed set it looks like an ordinary fade.

Can the details panel show ingredients?

It shows the short description and the attributes of the product, so a line of key ingredients added there will appear on hover.

Is smear appropriate for a clinical brand?

For creams and balms it is fun rather than clinical. If the tone is strict, use magnify so people can read the label.

Features to look at

Effects on this page

Patterns to start from

Other sample shops