Zum Inhalt springen
UI Kit
Accent

Product Pages

Gallery, Optionen, Reviews und Kaufen.

2 Components · 11 Variants
Kategorie wechseln

product-detail

Produktseite

Galerie, Auswahl, Bewertungen und Kaufen, vom klassischen Aufbau bis zum Konfigurator mit Live-Preis.

Props und Details · Produktseite

Mit Akkordeon

Bildraster und mitlaufende Kaufspalte mit Vorteilen und aufklappbaren Details.

Mit Bewertungen

Kompakter Produktkopf und der ganze Bewertungsteil mit Verteilung und Filtern.

Mitlaufende Kaufleiste

Sobald der Kaufknopf verschwindet, läuft eine Leiste mit, oben am Desktop und unten auf dem Telefon.

Geteilter Auftakt

Halb Bild, halb Geschichte. Für das eine Produkt, um das eine Seite gebaut ist.

Konfigurator

Farbe, Größe und Gravur mit Live-Vorschau und einem Preis, der beim Wählen mitrechnet.

size-guide

Größenberatung

Größentabellen in cm oder Zoll, ein Größenfinder aus Körpergröße und Gewicht, eine gezeichnete Figur, die zeigt, wie man misst, ein Schuhgrößen-Umrechner und die Beratung im Dialog direkt an der Größenwahl.

Props und Details · Größenberatung

Größentabelle

Körpermaße je Größe mit EU-, US- und UK-Größen. Ein Schalter mit gleitendem Daumen rechnet cm in Zoll um und jeder Wert rollt neu ein, Hover oder Tippen zieht ein Fadenkreuz durch Zeile und Spalte. Auf dem Telefon bleibt die erste Spalte stehen, während die Tabelle scrollt.

Im Studio öffnen

Größenfinder

Körpergröße und Gewicht auf großen Reglern, der Sitz als dreiteiliger Schalter. Die empfohlene Größe wechselt mit kurzem Aufstieg, die Balken der Wahl ähnlicher Menschen wachsen beim Hereinscrollen und gleiten bei jeder Änderung.

Im Studio öffnen

Richtig messen

Eine gezeichnete Figur, deren Messlinien sich nacheinander zeichnen. Jeder Schritt öffnet sich mit weicher Höhe und lässt seine Linie leuchten, auf dem Desktop beim Hover, auf dem Telefon beim Tippen, auch die Zahlen an der Figur wählen einen Schritt.

Im Studio öffnen

Schuhgrößen-Umrechner

Die Fußlänge auf einem Regler neben einem gezeichneten Fuß, der an einem Lineal mitwächst. EU-, US- und UK-Größe wechseln mit Aufstieg, die passende Zeile der Tabelle leuchtet.

Im Studio öffnen

Beratung an der Größenwahl

Die Größenwahl einer Produktseite mit dem Link „Größentabelle“. Er öffnet einen Dialog, der auf dem Telefon von unten kommt, mit Tabelle (die gewählte Größe ist markiert) und Messfigur in Tabs und dem Einheitenschalter im Kopf.

Im Studio öffnen

Ähnliche Components

Mehr aus E-Commerce, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Product Pages stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert