Product Slider BlockFree downloadMenu
Pro

Liquid transition for WooCommerce product sliders

Unlabelled white pump bottles and jars beside stacked white towels
Amber glass bottles on a round wooden tray with folded linen behind
White pump bottle, waffle towel, natural sponge and wooden brush on a pale backdrop
Clear bottle of oil with a lime green dropper beside woven sponges and a palm leaf
Rose quartz facial roller and gua sha stone on beige cloth under a pink waffle towel
Three amber bottles with blank labels on a white marble surface

Cloud care set

€64

Drag the picture sideways and hold: you can stop in the middle of the move.

A field of noise pushes both pictures sideways, and the next one flows in along the same channels, the way dye spreads through water.

Nothing has an edge at any moment. There is no line for the eye to follow, so it feels slower than it is, and that is its use.

Pro

Comes with Pro. Pro starts at $19 a year.

Put it on

Skincare, oils, perfume
Products whose whole promise is softness. A two-second pour says it better than a sentence.
Soft colour on soft colour
Pastel photos melt through each other without a harsh middle moment.
A home page hero with few products
Three or four products at this pace feels considered. Twenty would feel like waiting.

Keep it off

Fast browsing
If people came to compare forty items, two seconds per step is a tax on them.
Fine print on the packaging
Labels smear on the way through. If the label is the selling point, it will be unreadable for a while.

Settings

In the block the time of a move is a setting on every transition. Everything else on this list comes from gpu slider, which draws it.

Unlabelled white pump bottles and jars beside stacked white towels
Amber glass bottles on a round wooden tray with folded linen behind
White pump bottle, waffle towel, natural sponge and wooden brush on a pale backdrop
Clear bottle of oil with a lime green dropper beside woven sponges and a palm leaf

Cloud care set €64

2200Slow on purpose. Under a second the noise looks like a rendering fault rather than a liquid.

In the block, in three steps

  1. Add the Product Slider block to your page, and under Products choose hand-picked products.
  2. Set Layout to One at a time, then pick Liquid under Transition. It comes with Pro.
  3. Click through it three times quickly. If you already feel impatient, shorten the time or cut the number of products.

Close relatives

In a sample shop

Blocks that can use it

Where it goes in a shop: on a hover image swap, in a related products row or in a slider on autoplay. Questions about browsers and motion are in the FAQ.

Liquid is part of Pro, and the free plugin has fade, distance, ripple, zoom, stretch and parallax to start with. Pro starts at $19 a year.

Get the free plugin