Product Slider BlockFree downloadMenu
First Crack0 in the sample cart

A product slider for a coffee roaster, given a stir

Overhead view of black coffee in an orange polka dot cup on a terracotta and white backdrop
Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Overhead view of an open white bag of roasted coffee beans on white
Overhead view of black coffee in a white cup on a square saucer, half on white wood and half on black
Espresso in a pale blue cup on a bamboo saucer at the edge of a marble table
Two small grey stoneware espresso cups on a neutral surface

Sample shop. First Crack, its products and its prices are made up.

Crema, marbled

The same products on a warp, which moves like milk going into a cup.

Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Overhead view of an open white bag of roasted coffee beans on white
Overhead view of black coffee in a white cup on a square saucer, half on white wood and half on black
Espresso in a pale blue cup on a bamboo saucer at the edge of a marble table
Two small grey stoneware espresso cups on a neutral surface
Overhead view of black coffee in an orange polka dot cup on a terracotta and white backdrop

Why swirl for coffee

People hold a picture in their head of a spoon going through a cup, and a swirl transition puts it on the screen. It also works mechanically. Most coffee photos are round things seen from above: cups, saucers, a heap of beans. A vortex turning around the centre leaves that centre readable for most of the move.

A roaster sells often and sells small, so the page is built for repeat customers. There is little to look at beyond beans and a price, and the main decision is what goes with what. So a roaster gets good use out of a cross-sell row on the product page. A slider here earns its place by shortening the path to the next bag, not by entertaining.

How to build this

Product Slider
One at a time, Swirl, about 1300 ms, not too wide on a large screen.
Pattern
Goes well with, a free cross-sell row for the cart and product page.
Storewide
Hover morph on all product lists, so the bag turns into the bean.

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.

Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Gold bag single origin in second colour, a stand-in for a variation image
Detail of the gold bag single origin

Gold bag single origin

€16

In stock

Roasted in small batches and sent out within the week. 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.

Overhead view of black coffee in an orange polka dot cup on a terracotta and white backdrop
Close-up of the orange dot cup and saucer

Orange dot cup and saucer

€24Roasted in small batches and sent out within the week.
Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Close-up of the gold bag single origin

Gold bag single origin

€16Roasted in small batches and sent out within the week.
Overhead view of an open white bag of roasted coffee beans on white
Close-up of the morning roast beans

Morning roast beans

€14Roasted in small batches and sent out within the week.
Overhead view of black coffee in a white cup on a square saucer, half on white wood and half on black
Close-up of the square saucer cup

Square saucer cup

€22Roasted in small batches and sent out within the week.
Espresso in a pale blue cup on a bamboo saucer at the edge of a marble table
Close-up of the bamboo saucer cup

Bamboo saucer cup

€19Roasted in small batches and sent out within the week.
Two small grey stoneware espresso cups on a neutral surface
Close-up of the stoneware espresso cups

Stoneware espresso cups

€28Roasted in small batches and sent out within the week.

Goes well with it

Block: Product Slider. Pattern: Goes well with.

Two small grey stoneware espresso cups on a neutral surface
Stoneware espresso cups€28Roasted in small batches and sent out within the week.
Espresso in a pale blue cup on a bamboo saucer at the edge of a marble table
Bamboo saucer cup€19Roasted in small batches and sent out within the week.
Overhead view of black coffee in a white cup on a square saucer, half on white wood and half on black
Square saucer cup€22Roasted in small batches and sent out within the week.
Overhead view of an open white bag of roasted coffee beans on white
Morning roast beans€14Roasted in small batches and sent out within the week.
Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Gold bag single origin€16Roasted in small batches and sent out within the week.
Overhead view of black coffee in an orange polka dot cup on a terracotta and white backdrop
Orange dot cup and saucer€24Roasted in small batches and sent out within the week.

Questions

Does a swirl make people dizzy?

A very large one can. Keep it inside a contained column here, rather than across a whole wide hero, and leave autoplay off.

How do I sell filters and cups next to beans?

Use cross-sells in your WooCommerce product settings and show them with a Product Slider set to Cross-sells. The free version has this source.

Can I show a roast scale?

As a product attribute it appears in the Morph Card details panel, as text. The roast dots on this sample are plain HTML.

Features to look at

Effects on this page

Patterns to start from

Other sample shops