Wie man die ideale Produktdetailseite gestaltet
Blaupause für die Produktdetailseite: First-Glance-Priorität, mobile Sticky-Add-to-Cart, Swipe-Galerie, einklappbare Specs, FAQ für SEO.
Die Produktdetailseite (PDP) ist die letzte Seite vor dem Warenkorb. Jede andere Seite deines Shops existiert, um qualifizierten Traffic hierhin zu schicken. Ist die PDP gut gebaut, folgt Conversion; ist sie unaufgeräumt, langsam oder fehlt die Basis, rettet auch keine Homepage-Politur sie. Dieser Artikel führt durch die vollständige PDP-Blaupause für einen Pflanzen-Webshop, mit expliziten Mobil-Mustern — weil der meiste deines PDP-Traffics auf einem Telefon landet.
💡 Fehler Nr. 1: alles über den Falz quetschen wollen. Den Falz gibt es nicht mehr — aber First-Glance-Priorität schon. Stell sicher, dass Foto, Name, Preis, Bestand und primärer CTA das Erste sind, was ein Besucher sieht, und lass den Rest darunter aufklappen.
Die erste Ansicht: fünf Elemente, keine Kompromisse
Wenn die PDP lädt, müssen fünf Dinge ohne Scrollen sichtbar sein — auf Desktop und Mobil. Alles andere, was um diesen Platz kämpft, wird nach unten geschoben.
Hero-Foto, groß, mit mindestens drei weiteren sichtbaren Thumbnails (oder einer swipebaren Galerie auf Mobil). Lifestyle-Hero, kein Weiß-Studio. Siehe Produktfotografie für die Shotlist.
Produktname, klar und vollständig: "Monstera Deliciosa — Ø 17 cm, 60 cm hoch". Lateinischer Name + Größe im Titel spart Dutzende Supportfragen.
Preis, prominent, mit durchgestrichenem MSRP und Sale-Preis, falls zutreffend. Siehe Preis- und Bestandsbotschaften für die Regeln zu Fake-Dringlichkeit und Sale-Framing.
Varianten, falls das Produkt welche hat — Topfgröße, Pflanzenhöhe, Topffarbe. Buttons oder Swatches, keine Dropdowns. Nicht verfügbare Varianten ausgegraut, nicht versteckt. Siehe Produktvarianten für die Entscheidung Variante vs. separates Produkt.
Bestand + Lieferversprechen + primärer CTA, in dieser Reihenfolge. "Auf Lager — vor 14:00 bestellt, morgen geliefert" steht direkt über dem In-den-Warenkorb-Button. Versprechen und Button gehören zusammen, weil das Versprechen den Klick schließt.
Das war's für die erste Ansicht. Kein "Warum bei uns kaufen"-Block, keine Upsells, keine volle Beschreibung. Die kommen darunter.
Zweite Sektion: Galerie + Specs
Unter der ersten Ansicht zwei nebeneinander liegende Blöcke (oder gestapelt auf Mobil):
Thumbnail-Galerie: vier bis sechs Fotos. Hero (Lifestyle), Topfdetail, Skalenreferenz (Hand oder Raumfoto), Aufsicht für Hängepflanzen, Verpackung-bei-Ankunft-Foto, falls du eins hast. Kundenfotos aus Bewertungen können am Ende einrutschen.
Spec-Tabelle: die sieben essenziellen Pflanzen-Specs in einer kompakten Zwei-Spalten-Tabelle — Topfdurchmesser, Pflanzenhöhe bei Lieferung, Lichtbedarf, Gießrhythmus, haustiergiftig ja/nein, Wachstumsrate, Endgröße. Optionale Zeilen darunter für Herkunft, Zertifizierungen, Duft. Specs in einer Tabelle, nicht in der Beschreibung vergraben. Siehe Produktspezifikationen für das volle Template und welche Specs nicht verhandelbar sind.
Die Spec-Tabelle macht Doppelarbeit: sie beantwortet die Vor-Kauf-Fragen des Kunden, und sie speist die Filter auf der Collection Page. Eine saubere Spec ist ein Filter, den der Besucher anderswo im Shop nutzen kann.
Dritte Sektion: lange Beschreibung + Pflege
Unter den Specs kommt die lange Beschreibung — der Ort, wo du die Pflanze tatsächlich verkaufst, statt ihre Eigenschaften aufzulisten. Das Vier-Block-Template (stimmungsvoller Opener → sinnliche Beschreibung → wo sie gedeiht → Pflege-Schnellreferenz) ist der Standard; für die volle Struktur siehe Produktbeschreibungen.
Speziell für Pflanzen fügst du hier auch die Pflege-Schnellreferenzkarte hinzu: Licht, Wasser, Luftfeuchtigkeit, Umtopfen, häufige Probleme. Selbst wenn die Spec-Tabelle das numerisch abdeckt, wollen Kunden es in einfacher Sprache ausgeschrieben haben. Zwei Absätze Pflegetext verdienen ihren Platz auf jeder Pflanzen-PDP.
Vierte Sektion: Trust-Strip + Bewertungen
Ein horizontaler Streifen mit drei bis fünf Trust-Elementen: Schwelle für versandkostenfreie Lieferung, Rückgaberegelung, Pflanzengarantie, Zahl-Icons. Eine Zeile pro Element, Icons + kurzes Label.
Direkt darunter der Bewertungs-Block: aggregierte Score oben ("4,7 / 5, 142 Bewertungen"), drei bis fünf aktuellste Bewertungen angezeigt, "alle ansehen"-Link zur vollen Liste. Bewertungen auf der PDP konvertieren härter als Bewertungen überall sonst — das ist der Moment, in dem ein Besucher der Kaufentscheidung am nächsten ist und Beruhigung von einem Fremden braucht. Siehe Kundenbewertungen.
Fünfte Sektion: Complete the Look
Eine Reihe von drei bis vier Produkten, handkuratiert oder algorithmisch gematcht. Für Pflanzen ist das der natürliche Ort für Töpfe, Erde, Gießwerkzeug und gebündelte Pflege-Kits — die "Complete the Look"-Framing konvertiert auf einer Pflanzen-PDP, weil der Besucher die Pflanze mental schon besitzt.
Was funktioniert: "Kombiniere diese Monstera mit einem Ø 21 cm Terrakotta-Topf und Bambusstab." Was nicht: eine generische "das könnte dir auch gefallen"-Reihe mit unzusammenhängenden Pflanzen. Hat dein Empfehlungs-Engine nichts Relevantes, zeig nichts. Leere Kuration schlägt rauschige Kuration. Volle Logik in Upsells und Cross-Sells.
Sechste Sektion: PDP-FAQ
Drei bis sechs produktspezifische Fragen in einklappbaren H3s: "Ist diese Pflanze sicher für Katzen?", "Wie oft muss sie gegossen werden?", "Überlebt sie an einem Nordfenster?", "Wie groß wird sie in 2 Jahren?". Dieser Block macht dreifach Arbeit — er beantwortet Vor-Kauf-Fragen, er entfernt Supporttickets, und er ist starker SEO-Content, weil er voll mit Long-Tail-Keywords ist, nach denen dein Publikum tatsächlich sucht.
Mobil: hier lebt der meiste PDP-Traffic
Etwa 70% des Pflanzenshop-PDP-Traffics ist mobil, und die meisten Wiederverkäufer-PDPs sind immer noch desktop-first designt und mobil-übersetzt. Drei Muster, die auf Mobil zählen:
Sticky In-den-Warenkorb-Leiste
Sobald der Besucher über die erste Ansicht hinaus scrollt (~600 px nach unten), erscheint unten eine dünne sticky Leiste: Thumbnail + Preis + In den Warenkorb. Ab diesem Punkt immer sichtbar, unabhängig von der Scrolltiefe. Dieses eine Muster steigert die mobile Conversion bedeutsam — die Alternative ist, den Besucher zu zwingen, nach dem Lesen der Beschreibung zurückzuscrollen, und viele werden das nicht tun.
Swipebare Fotogalerie
Die Galerie auf Mobil sollte horizontal swipen, mit Punkten, die die Fotoanzahl anzeigen. Tippen zum Zoomen. Repliziere nicht den vertikalen Thumbnail-Streifen vom Desktop — der frisst Bildschirmplatz und liest sich kaputt. Die Swipe-Galerie ist nach dem In-den-Warenkorb-Button das meistgenutzte UI-Element auf einer mobilen PDP.
Klapp die Spec-Tabelle ein
Specs und FAQ sollten auf Mobil standardmäßig eingeklappt sein (ein Tipp zum Aufklappen). Die Begründung: der Besucher hat das Wesentliche schon in der ersten Ansicht gesehen, und ihn zu zwingen, an 12 Zeilen Specs vorbeizuscrollen, um den In-den-Warenkorb zu erreichen, bricht den Flow. Standardmäßig ausgeklappte Specs sind ein Desktop-Muster; mobile Leser klappen nur auf, was sie brauchen.
⚠️ Teste auf einem echten Telefon, nicht im Responsive-Modus-Emulator. Touch-Targets, Sticky-Bar-Abstände und Galerie-Swipe-Verhalten verhalten sich auf echten Geräten alle anders. Verbring 10 Minuten auf deinem eigenen Telefon, bevor du die mobile PDP für fertig erklärst.
Was nicht auf eine Pflanzen-PDP gehört
Newsletter-Modal beim PDP-Laden. Der Besucher kam hierher, um ein Produkt zu beurteilen, nicht um sich anzumelden.
Auto-abspielendes Video mit Ton. Stumme Hintergrundloops auf dem Hero sind okay; Ton-an-Autoplay ist ein Bounce-Trigger.
Kürzlich angesehene Produkte oben auf der Seite. Unten auf der Seite ist okay; oben stiehlt Aufmerksamkeit vom eigentlichen Produkt.
Live-Chat-Bubble, die den In-den-Warenkorb auf Mobil verdeckt. Überlappt dein Chat-Widget den Sticky-CTA bei schmalen Breiten, verschiebe die Bubble oder verstecke sie auf PDPs.
Nächster Schritt
Öffne deine drei traffic-stärksten PDPs auf deinem Telefon. Für jede stoppe, wie lange du brauchst, um den Preis, den Bestandsstatus und den In-den-Warenkorb von einem frischen Seitenladen aus zu finden. Dauert eines davon länger als zwei Sekunden, ist deine erste Ansicht falsch. Fix die erste Ansicht zuerst, und schichte dann den Rest der Blaupause darunter — Galerie, Specs, Beschreibung, Trust, Cross-Sells, FAQ. Die Reihenfolge zählt mehr als die Politur einer einzelnen Sektion.