Das Wichtigste in Kürze
- Konversionsstarke Shopify-Produktseiten teilen einige wenige strukturelle Entscheidungen, keine bestimmte Ästhetik.
- Der wichtigste Block ist die Buy Box. Alles andere ist nur dazu da, den Besucher mit dem nötigen Vertrauen dorthin zu führen, um den Artikel in den Warenkorb zu legen.
- Mobile-first bedeutet, die Buy Box zuerst für mobile Endgeräte zu designen – Sticky Add-to-Cart, komprimierte Trust-Signale, ausklappbare Details.
- Trust-Signale in der Nähe der Buy Box steigern zuverlässig die Kaufabschlüsse. Eine Wand aus Trust-Badges im Footer tut das nicht.
Eine konversionsstarke Shopify-Produktseite zeichnet sich nicht durch einen einzigen Stil aus. Sie ist eine Kombination aus Entscheidungen über Klarheit, Vertrauen, das mobile Erlebnis und die Beseitigung von Reibungspunkten. Dieser Artikel geht die Anatomie Block für Block durch – mit den Mustern, die die Conversion Rate konstant steigern, und denen, die es nicht tun.
Warum du uns vertrauen kannst
Wir arbeiten seit vier Jahren tief im Shopify-Ökosystem und haben hunderte Produktseiten über verschiedene Kategorien hinweg neu aufgebaut. Außerdem entwickeln wir Fudge, ein Tool, das von hunderten Shopify-Shops genutzt wird, um PDP-Rebuilds auf Basis eines Prompts als nativen Theme-Code zu veröffentlichen.
Above the fold
Was der Kunde sieht, ohne zu scrollen. Der wichtigste Platz im gesamten Shop.
Hero Image
- Ein Foto des Produkts in Aktion, nicht auf weißem Hintergrund (sofern die Kategorie es zulässt).
- Ein einzelnes Bild, kein Karussell, das automatisch rotiert und ablenkt.
- Für Mobile optimiert – dasselbe Hero Image erscheint prominent auf dem Smartphone und wird nicht ungünstig abgeschnitten.
- Unter 200 KB nach WebP-/AVIF-Komprimierung.
Headline
Eine spezifische, vorteilsorientierte Headline. Der Produktname ist impliziert; die Headline übernimmt den Verkauf. „Feuchtigkeitsspendendes Nachtserum“ → „Wache in 14 Tagen mit weicherer Haut auf, ohne Hautirritationen.“
Wenn der Produktname selbst das Markenversprechen ist (Kultprodukt, bekannte SKU), darf die Headline simpler ausfallen. Bei unbekannten Produkten muss die Headline die Überzeugungsarbeit leisten.
Preis, Variantenauswahl, in den Warenkorb
Auf Desktop und Mobile ohne Scrollen sichtbar. Die Variantenauswahl ist vorausgewählt, falls es einen Standard gibt. Der ATC-Button (Add to Cart) ist visuell dominant; es gibt keine konkurrierenden CTAs. Der Preis wird in der Währung des Kunden angezeigt.
Bewertungsübersicht
Sternebewertung und Anzahl der Bewertungen sind „above the fold“ sichtbar. Ein Klick öffnet den vollständigen Bewertungsblock weiter unten auf der Seite. Die Menge ist wichtiger als die genaue Punktzahl – 1.200 Bewertungen mit durchschnittlich 4,6 Sternen schlagen 12 Bewertungen mit 4,9 Sternen.
Trust-Block
Drei bis fünf kompakte Trust-Signale in der Nähe der Buy Box: Schwellenwert für kostenlosen Versand, Rückgabefrist, Zahlungsoptionen, Versanddauer, Garantie. Klein, komprimiert, leicht zu scannen.
Below the fold
Was der Kunde sieht, sobald er sich entschieden hat, weiter runter zu scrollen.
Benefits-Leiste
Drei bis vier kurze Vorteile (Benefits) mit Icons. „Was bringt mir dieses Produkt?“ – nicht „Was ist hier drin?“. Beispiele: „Vegane Formel“, „Tierversuchsfrei“, „Produziert in Deutschland“, „Kostenloser Versand ab 50 €.“
Detaillierte Beschreibung
Ein leicht lesbarer Beschreibungsblock. Kurze Absätze (1-3 Sätze). Zwischenüberschriften. Die gleichen Verkaufsargumente, nur detaillierter wiederholt.
Vermeide: Massive Wände aus Marketingtexten. Endlose, monotone Spezifikationslisten. Beides ruiniert die Lesbarkeit.
„Anwendung“ oder „Lieferumfang“
Für Produkte, bei denen die Anwendung wichtig ist (Hautpflege, Nahrungsergänzungsmittel, Haushaltswaren): ein kurzer „How-to-use“-Block. Für Produkte, bei denen der Inhalt zählt (Sets, Bundles): ein „Was ist enthalten“-Block mit Bildern.
Hautpflege hat genug kategoriespezifische Anforderungen, um separat behandelt zu werden. Sieh dir unseren Guide zum Aufbau einer Shopify Skincare PDP an, um mehr über die Deklaration von Inhaltsstoffen, den Kontext in der Pflegeroutine und die Formulierung von Claims zu erfahren.
Bewertungsblock
Vollständige Bewertungen, idealerweise mit Fotos. Filterbar nach Sternebewertung und Inhaltstyp. Verstecke keine negativen Bewertungen – gefilterte Transparenz schafft weitaus mehr Vertrauen als das Verheimlichen von Fehlern.
Empfehlungen für Bewertungs-Apps findest du hier: Die besten Shopify Review Apps.
UGC-Block
Wenn du User-Generated Content (UGC) hast – Instagram, TikTok, direkte Kundenfotos – zeige ihn als Kachel-Grid oder Karussell. UGC schneidet beim Vertrauensaufbau konsequent besser ab als hochglanzpolierte Markenästhetik.
Cross-Sells oder „Wird oft zusammen gekauft“
Bloß eine Reihe an Cross-Sells, mehr nicht. Zwei oder mehr konkurrierende Angebote schaden der Übersicht mehr, als dass sie helfen. Die besten Cross-Sells ergänzen das Produkt funktional und stammen nicht einfach nur aus der gleichen Kategorie.
FAQ
5-10 produktspezifische KPIs. Sizing, Inhaltsstoffe, Versand, Retouren, Allergene, Kompatibilität. Optimalerweise mit Schema-Markup für Rich Results in den Suchmaschinen versehen.
Rückgabe- und Versandbedingungen
Eine kurze Zusammenfassung ganz unten auf der PDP. Verlinke dort auf die vollständigen Richtlinien. Zwinge den Kunden nicht dazu, die Seite zu verlassen, um sie kurz überfliegen zu können.
Mobile-spezifische Anatomie
70-80 % des gesamten Traffics auf Shopify ist mobil. Die mobile Ansicht ist für den Großteil deiner Kunden die PDP schlechthin.
Sticky In den Warenkorb (ATC)
Eine fixierte Leiste am unteren Bildschirmrand, die ein kleines Vorschaubild, den Namen, Preis und den ATC-Button enthält. Sie taucht auf, sobald der Nutzer an der Buy Box vorbeigescrollt hat.
Einspaltiges Layout
Mobile ist naturgemäß einspaltig aufgebaut. Versuch nicht, die zweispaltige Buy Box vom Desktop einfach auf die Mobilansicht zu quetschen – das zerstört beide Hälften und wirkt unprofessionell.
Akkordeons für die restlichen Details
Ausführlichere Produktdetails (Beschreibung, Zutaten, Anleitung, Versand) sollten standardmäßig in Akkordeons zusammengeklappt sein. Der Kunde klappt einfach nur das auf, wonach er gezielt sucht.
Bildergalerie als wischbares Karussell
Die Bildergalerie lässt sich horizontal durchwischen, mit klaren Indikatorpunkten versehen. Das allererste Bild ist das Hero Image; der Rest sind Anwendungsbilder, Detaileinblendungen, Maße und Verpackungsshots.
Touch Targets
Mindestgröße von 44px, mit etwas Freiraum (Abstand) versehen. Variantenauswähler am besten als Full-Width-Chips präsentieren, und nicht als verschachtelte Dropdown-Menüs.
Was die Conversion einer PDP ruiniert
Fünf klassische Fehler, die uns bei schlecht performenden Shopify-Produktseiten immer wieder begegnen:
- Auto-rotierendes Hero-Karussell. Lenkt die Aufmerksamkeit drastisch von der Buy Box ab. Nutze lieber ein einzelnes Bild, bei dem der Kunde selbst durch die Aufnahmen wischen kann.
- Generisches „In den Warenkorb“ ohne Preis in der Sticky Bar. Der Nutzer muss jedes Mal hochscrollen, nur um sich nochmal kurz den Preis ins Gedächtnis zu rufen.
- Trust-Badges nur im Footer. Sie müssen so nah es geht an der Buy Box platziert werden und nicht erst ganz unten am Footer verstauben.
- Massive Wände aus Text ohne gut scanbare Strukturen. Fehlende Bulletpoints, Überschriften oder kleine Lesehappen? Sogenannte „Textwände“ werden komplett überflogen oder ignoriert.
- Modale E-Mail-Popups, die hochploppen, noch bevor der Kunde überhaupt das Produkt gesehen hat. Conversion-Killer schlechthin. Verschiebe die E-Mail-Erfassung besser auf den Moment nach der eigentlichen Interaktion.
Für einen umfassenderen Einblick in CRO schau dir den Shopify CRO Guide sowie diese 12 CRO-Taktiken an. Alles zum A/B-Testing verschiedener Varianten findest du in Wie man Shopify-Produktseiten A/B testet.
So baust du eine, ohne das Theme komplett neu aufzubauen
Drei Wege:
- Einen Entwickler engagieren. 20-40 Stunden Theme-Arbeit. Am besten für einmalige, präzise Umbauten.
- Einen Drag-and-Drop-Builder nutzen. 5-15 Stunden im Editor. Dafür zahlst du die laufenden App-Kosten.
- Einen KI-Agenten wie Fudge nutzen. Beschreibe den PDP-Umbau (“Hero-Sektion mit Anwendungsbild, Benefits-Reihe, Sticky Mobile ATC, Trust-Block an der Buy Box, Reviews above the fold, FAQ unten”) und veröffentliche die Änderung als nativen Theme-Code. Nur wenige Minuten bis zum ersten Entwurf.
Der richtige Weg hängt davon ab, wie oft du PDPs neu baust und wie wichtig dir die volle Kontrolle über den Code ist.
FAQ
Klarheit an der Buy Box, mobile Geschwindigkeit, Trust-Signale in der Nähe des ATC und Reviews above the fold. Die Ästhetik variiert; die strukturellen Entscheidungen nicht.
Einspaltig auf Mobile (immer), zweispaltig auf Desktop (meistens). Versuch nicht, auf dem Smartphone eine zweispaltige Buy Box zu erzwingen – das quetscht beide Hälften zusammen.
5-8 decken die meisten Fälle ab: Hero (in Anwendung), Lifestyle, Detail, Abmessungen/Größenverhältnisse, Verpackung, optionale alternative Blickwinkel. Mehr als 10 verwässern die wertvollsten Aufnahmen.
Zusammenfassung above the fold (Sterne + Anzahl), der vollständige Review-Block below the fold. Sichtbarkeit vor dem Scrollen baut Vertrauen im Moment der Kaufüberlegung auf; der vollständige Block weiter unten stellt Kunden zufrieden, die tiefer in die Materie einsteigen wollen.
Ja, aber ausgegraut mit einem "Benachrichtigen, wenn wieder da"-CTA. Sie zu verstecken, sorgt für Phantom-Produkt-Verwirrung. Sie auszugrauen, fängt die E-Mail-Nachfrage für zukünftigen Bestand ein.
