Zum Inhalt
← Rezepte
Alle Rezepte

Onlineshop & Produktmarke: Produkt zuerst

Onlineshop / D2C-Produktmarke / Manufaktur mit Shop

Produktfotos auf warmen Neutraltönen, eine klare Grotesk für Navigation, Preise und Produktnamen und eine charaktervolle Serif nur für Marken-Claims – so arbeiten Allbirds, ooia und KoRo. Kategorien, Bestseller und Vertrauen (Bewertungen, Versand, Rückgabe) kommen vor jeder Inszenierung. Bewegung ist schnell und dient Warenkorb, Filtern und Drawern.

Bauplan tokens.css Alle Techniken

Schrift

Produkt zuerst

Produktfotos auf warmen Neutraltönen, eine klare Grotesk für Navigation, Preise und Produktnamen und eine charaktervolle Serif nur für Marken-Claims – so arbeiten Allbirds, ooia und KoRo.

Headline
Young Serif
Text
Instrument Sans

Farbe

  • #F5F4F1
  • #ECE9E2
  • #212121
  • #6B6B6B
  • #10714E
  • #EB5C9D

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
Dauer
150–200 (Hover, Swatches, Buttons), 250–300 Öffnen / 200 Schließen (Warenkorb-Drawer, Filter, Mega-Menü), 400 (Produktbild-Wechsel)

Aufbau der Seite

SignaturIn-den-Warenkorb-FlugLike/Herz mit Partikel-Burst

HeroBento-Grid mit lebenden Zellen

  1. Bestseller / NeuheitenNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe
  2. Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento)Bento-Grid mit lebenden ZellenBild mit Markierungspunkten · Shop the Look
  3. Kategorie mit FilterFacettenfilter mit Ergebnisliste · Filterleiste
  4. Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe)Zahlen-/Fakten-Sektion als Typo-Ereignis · Typo-Ereignis
  5. ProduktdetailseiteKaufbox mit Farb- und Größenwahl · ProduktseiteRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · ZoomAkkordeon mit Höhenanimation auf auto · FAQ FahrschuleWarenkorb als Seitenpanel · SeitenpanelEU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
  6. Produktvergleich / FinderProduktfinder in wenigen Fragen · Schritt für SchrittVergleichstabelle mit fester Kopfzeile · Paketvergleich
  7. Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)Bewertungen mit Sternverteilung · Verteilung als BandPlattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
  8. Community / Rezepte / JournalMasonry-Galerie mit nativem display: grid-lanes (plus Fallback)Editorial-/Magazin-Layout · Magazin
  9. Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)Kontakt- und Anfrageformular als eigene SektionÖffnungszeiten mit Live-Status · KopfzeileKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  10. Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Startseite: Claim + Kategorie-Einstiege (Bento oder 2–4 große Kacheln) statt Slider; darunter sofort Bestseller mit Preis, Bewertung und Farb-Swatches.
  • Produktkacheln einheitlich: gleiches Seitenverhältnis, gleicher Hintergrundton (#ECE9E2), zweites Bild beim Hover, Preis mit Tabellenziffern, Grundpreis wo Pflicht.
  • Produktseite: Galerie links, Kaufbox rechts sticky (Varianten, Größe, Preis, Lieferzeit, Button); darunter Akkordeons für Material, Pflege, Versand & Rückgabe.
  • Serif nur für Claims und Themenwelten, nie für Preise, Buttons oder Formulare.
  • Warenkorb als Drawer mit Bestätigung (Flug-Animation nur, wenn das Warenkorb-Icon sichtbar ist) und Hinweis auf Gratisversand-Schwelle.
  • Vertrauen sichtbar: Prüfsiegel, Bewertungen, Versand/Rückgabe direkt unter dem CTA (ooia-Prinzip: drei konkrete Argumente).
  • Laufband (marquee) höchstens als schmale Ankündigungsleiste oben, nie für Produktreihen.
  • Footer mit Newsletter (Vorteil konkret nennen), Zahlungsarten, Hilfe/FAQ, Impressum, Widerruf (Widerrufs-Button), AGB, Erklärung zur Barrierefreiheit.
  • Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Grundpreis wo Pflicht, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), bei Abos Kündigungs-Button (§ 312k BGB), AGB, Zahlungsarten; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse, Warnhinweise) in der Kaufbox; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; bei Lebensmitteln LMIV-Angaben vor dem Kauf – vom Kunden prüfen lassen.
Bild und Ton
  • Licht: Helles, gleichmäßiges Studiolicht auf #ECE9E2; Themenwelten in Tageslicht.
  • Ausschnitt: Produkt mittig mit gleichem Rand; das zweite Bild zeigt den Gebrauch.
  • Personen: Im zweiten Bild und in Themenwelten; nie im Produktraster.
  • Formate: 1:1, 4:5, 3:2
  • Nicht: Keine wechselnden Hintergründe im Raster, keine Freisteller mit künstlichem Schlagschatten, keine Stock-Lifestyle-Bilder.
  • Anrede: du
  • Sätze: Kurz und freundlich, konkret zu Material, Menge, Preis und Lieferzeit.
  • Haltung: Sympathisch und direkt; Vertrauen über Fakten (Versand, Rückgabe, Bewertungen mit Quelle).
  • Tonproben: Leicht, weich, waschbar. Ab 89 €., Bis 14 Uhr bestellt, am selben Tag verschickt.
  • Nicht schreiben: „nachhaltig“ ohne Nachweis, „Bestseller“ ohne Grundlage, Fake-Countdown, „Nur noch 2 Stück!“ ohne echte Zahl.
Hero, Raum und Form
  • Hero-Raster: Claim über 8 Spalten oben, darunter Bento: eine große Kachel über 6 Spalten und 2 Reihen, 2 bis 3 kleinere daneben (bento-grid-interaktiv).
  • Hero-Bild: Echte Produkt- und Kategoriefotos, 4:5 und 1:1; kein Slider, kein Video.
  • Überschrift: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, oben links.
  • Handlung: „Bestseller ansehen“ (#212121 gefüllt); die Kategorie-Kacheln sind selbst die Wege, kein zweiter Knopf.
  • Zusatz: Schmale Ankündigungsleiste oben (Gratisversand ab …), Vertrauenszeile Versand / Rückgabe / Bewertungen unter dem Bento.
  • Sektionsabstand: clamp(56px, 7vw, 104px)
  • Dichte: mittel
  • Raum: Shop-Rhythmus: Produktkacheln dicht (8 bis 16 px Spalt), Kaufbox mit 16 px zwischen Variante, Preis und Knopf. Inszenierung kommt nach Kategorien und Bestsellern.
  • Spalten: 12
  • Maximale Breite: 1440px
  • Raster: Startseite: Bento oder 2 bis 4 große Kacheln, darunter Bestseller in 4 Spalten (2 mobil). Produktseite 7/5: Galerie links, Kaufbox rechts sticky.
  • Radius klein: 8px
  • Radius groß: 12px
  • Schatten: keiner auf Kacheln; der Warenkorb-Drawer dunkelt den Grund ab
  • Form: Kacheln 12 px auf #ECE9E2, Knöpfe als Pille, Swatches rund. grain-noise-overlay nur am Button (Variante button).
Vorbilder