Product Slider BlockFree downloadMenu
Lowpass0 in the sample cart

A product slider for an audio shop, played as a tracklist

Coral red wireless headphones lying on a polished red wooden surface
Black over-ear wireless headphones on a white background
White wired headphones with brushed metal ear cups on a yellow background
White on-ear wireless headphones on a white background
Black open-back headphones on a dark textured surface, in black and white

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

On a wave

Coral red wireless headphones lying on a polished red wooden surface
Coral wireless headphones€179
Black over-ear wireless headphones on a white background
Soft-shell headphones€219
White wired headphones with brushed metal ear cups on a yellow background
Brushed metal headphones€89
White on-ear wireless headphones on a white background
Chalk on-ear headphones€129
Black open-back headphones on a dark textured surface, in black and white
Open-back headphones€249
Coral red wireless headphones lying on a polished red wooden surface
Coral wireless headphones€179
Black over-ear wireless headphones on a white background
Soft-shell headphones€219
White wired headphones with brushed metal ear cups on a yellow background
Brushed metal headphones€89
White on-ear wireless headphones on a white background
Chalk on-ear headphones€129
Black open-back headphones on a dark textured surface, in black and white
Open-back headphones€249

Why signal for audio

Audio customers already live with signals, levels and tape, so a transition that loses its picture for a moment and locks back in feels like an inside joke. The signal transition does that: jittering lines, a rolling bar, colour drifting out of register, gone in a second. On pale studio shots of headphones it reads clearly because the scanlines have contrast to work with.

Below it, the list works like a tracklist, which suits a small range where each thing has a name and a number. Clicking a row jumps to that product. And the wave layout turns a row of products into something like a waveform, which is the one place on the page where the shop is allowed to show off.

How to build this

Product Slider
One at a time, Signal, around 1000 ms, with a list of product names alongside.
Effect
Wave on a wide band. Allow height for the peaks.
Pattern
Ticker above the footer runs evenly through the range.

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.

Coral red wireless headphones lying on a polished red wooden surface
Coral wireless headphones in second colour, a stand-in for a variation image
Detail of the coral wireless headphones

Coral wireless headphones

€179

In stock

Clear highs and a tight low end, with up to thirty hours on a charge. 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.

Black over-ear wireless headphones on a white background
Close-up of the soft-shell headphones

Soft-shell headphones

€219Clear highs and a tight low end, with up to thirty hours on a charge.
Coral red wireless headphones lying on a polished red wooden surface
Close-up of the coral wireless headphones

Coral wireless headphones

€179Clear highs and a tight low end, with up to thirty hours on a charge.
White wired headphones with brushed metal ear cups on a yellow background
Close-up of the brushed metal headphones

Brushed metal headphones

€89Clear highs and a tight low end, with up to thirty hours on a charge.
White on-ear wireless headphones on a white background
Close-up of the chalk on-ear headphones

Chalk on-ear headphones

€129Clear highs and a tight low end, with up to thirty hours on a charge.
Black open-back headphones on a dark textured surface, in black and white
Close-up of the open-back headphones

Open-back headphones

€249Clear highs and a tight low end, with up to thirty hours on a charge.

Goes well with it

Block: Product Slider. Pattern: Goes well with.

Black open-back headphones on a dark textured surface, in black and white
Open-back headphones€249Clear highs and a tight low end, with up to thirty hours on a charge.
White on-ear wireless headphones on a white background
Chalk on-ear headphones€129Clear highs and a tight low end, with up to thirty hours on a charge.
White wired headphones with brushed metal ear cups on a yellow background
Brushed metal headphones€89Clear highs and a tight low end, with up to thirty hours on a charge.
Coral red wireless headphones lying on a polished red wooden surface
Coral wireless headphones€179Clear highs and a tight low end, with up to thirty hours on a charge.
Black over-ear wireless headphones on a white background
Soft-shell headphones€219Clear highs and a tight low end, with up to thirty hours on a charge.

Questions

Which effect suits headphones and speakers?

Signal for moves, waves under the pointer, or coverflow for a small set. Keep the product itself easy to recognise at rest, as these effects only show while something moves.

Can I make a tracklist like this one?

On this page it is a few lines of script that call the slider. In the block you get dots and arrows. A list of names is not a block option today.

Does the wave layout work on phones?

It works with fewer slides in view, and needs room above and below. Try it with one and a half.

Features to look at

Effects on this page

Patterns to start from

Other sample shops