Skip to content
UI Kit
Accent color

Product pages

Gallery, options, reviews and buying.

2 components · 11 variants
Switch category

product-detail

Product page

Gallery, options, reviews and buying, from a classic layout to a configurator with live price.

Props and details · Product page

With accordion

An image grid and a sticky buy column with highlights and folding details.

With reviews

A compact product header and the full review section with distribution and filters.

Sticky buy bar

Once the buy button scrolls away, a bar follows, at the top on desktop and at the bottom on phones.

Split hero

Half image, half story. For the one product a page is built around.

Configurator

Color, size and engraving with a live preview and a price that adds up as you choose.

size-guide

Size guide

Size charts in cm or inches, a fit finder from height and weight, a drawn figure that shows how to measure, a shoe size converter and the guide in a dialog from the size picker.

Props and details · Size guide

Size chart

Body measures per size with EU, US and UK names. A switch with a sliding thumb turns cm into inches and every value rolls in, hover or tap draws a crosshair through row and column. On phones the first column stays while the table scrolls.

Open in Studio

Fit finder

Height and weight on large sliders, the fit as a three way switch. The recommended size swaps with a short rise, the bars of what similar people chose grow when they scroll in and glide on every change.

Open in Studio

How to measure

A drawn figure whose measuring lines draw themselves one after another. Each step opens with a soft height change and lights up its line, on desktop on hover, on phones on tap, and the numbers on the figure pick a step too.

Open in Studio

Shoe size converter

Foot length on a slider next to a drawn foot that grows along a ruler. The EU, US and UK sizes swap with a rise and the matching row of the table lights up.

Open in Studio

Guide from the size picker

The size picker of a product page with a "Size guide" link. It opens a dialog that slides up on phones, with the chart (the picked size is marked) and the measuring figure in tabs and the unit switch in the head.

Open in Studio

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Product pages on a page.

Often searched

Jump to

Copied to the clipboard