Product Slider BlockFree downloadMenu

A product slider for a sneaker shop, turned up

Pair of red leather low-top sneakers with white laces and soles on a light grey background
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Pair of white chunky sneakers with taupe panels lying on red satin
Pair of pale grey suede trainers with lugged soles on a dark glass plinth

0 in the sample cart

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

Fling it

Pair of red leather low-top sneakers with white laces and soles on a light grey background
Red court low€129
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Navy pebble low€149
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Silver foil low€139
Pair of white chunky sneakers with taupe panels lying on red satin
White chunk runner€135
Pair of pale grey suede trainers with lugged soles on a dark glass plinth
Pebble trainer€155

Why glitch for sneakers

Sneaker pages are allowed to be rude. The customer knows the product, knows the price range, and came to feel that something is happening. A glitch does that in well under a second: torn lines, a channel split, next pair. It fits the visual world of drops, posters and tape, and it answers a click so quickly that it feels like hitting something.

The row below is the free stretch effect, because trainers and elastic belong together and because a flung row should feel physical. What keeps all of this usable is that it only happens when asked. Glitch stays off autoplay, the price is ordinary large text, and the cart button never moves.

How to build this

Product Slider
One at a time, Glitch, 600 to 700 ms. Keep autoplay off, as it flickers.
Pattern
Sneaker drop adds a countdown from the sale dates in your products.
Effect
Stretch on a row, a higher amount than the default. It is in the free version.

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.

Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Navy pebble low in second colour, a stand-in for a variation image
Detail of the navy pebble low

Navy pebble low

€149

In stock

Soft leather upper, cushioned sole. Comes with a spare set of laces. 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.

Pair of red leather low-top sneakers with white laces and soles on a light grey background
Close-up of the red court low

Red court low

€129Soft leather upper, cushioned sole. Comes with a spare set of laces.
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Close-up of the navy pebble low

Navy pebble low

€149Soft leather upper, cushioned sole. Comes with a spare set of laces.
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Close-up of the silver foil low

Silver foil low

€139Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of white chunky sneakers with taupe panels lying on red satin
Close-up of the white chunk runner

White chunk runner

€135Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of pale grey suede trainers with lugged soles on a dark glass plinth
Close-up of the pebble trainer

Pebble trainer

€155Soft leather upper, cushioned sole. Comes with a spare set of laces.

Goes well with it

Block: Product Slider. Pattern: Goes well with.

Pair of pale grey suede trainers with lugged soles on a dark glass plinth
Pebble trainer€155Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of white chunky sneakers with taupe panels lying on red satin
White chunk runner€135Soft leather upper, cushioned sole. Comes with a spare set of laces.
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Silver foil low€139Soft leather upper, cushioned sole. Comes with a spare set of laces.
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Navy pebble low€149Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of red leather low-top sneakers with white laces and soles on a light grey background
Red court low€129Soft leather upper, cushioned sole. Comes with a spare set of laces.

Questions

Is a glitch effect bad for accessibility?

It flickers, so it should run only on a click or a drag, not automatically. Visitors with reduced motion set see autoplay turned off and less movement.

Can I show a countdown for a drop?

Yes, in Pro. It reads the sale end date of the WooCommerce product, so nothing has to be entered twice.

What should I use for many colourways?

Chroma or a Morph Card with swatches. A separate slide per colourway makes a row very long.

Features to look at

Effects on this page

Patterns to start from

Other sample shops