Produktseite im Onlineshop: Diese Elemente darf sie nicht fehlen
Eine überzeugende Produktseite im Onlineshop braucht klare Bilder, einen präzisen Titel, Preis, Verfügbarkeit, eine starke CTA-Schaltfläche, eine ehrliche Beschreibung, Kundenbewertungen und Vertrauenssignale. Jedes Element hat eine konkrete Funktion für die Kaufentscheidung.
Eine Produktseite ist nicht einfach eine Unterseite mit Foto und Preis. Sie ist der Ort, an dem der Besucher entscheidet: kaufen oder zurück zur Suchergebnisliste. Im stationären Handel kann der Kunde ein Produkt in die Hand nehmen, es riechen, fühlen, drehen - der Onlineshop hat dafür nur Text, Bilder und ein paar Schaltflächen.
Ich habe in mehr als einem Jahrzehnt Praxis als WooCommerce-Entwickler immer wieder erlebt, dass gut sortierte Shops mit soliden Produkten schlechte Verkaufszahlen haben - weil ihre Produktseiten grundlegende Elemente vermissen oder unübersichtlich aufgebaut sind. Dieser Leitfaden erklärt, was auf jede Produktseite gehört und warum jedes Element seinen Platz verdient.
Was eine Produktseite leisten muss
Die Aufgabe einer Produktdetailseite lässt sich in einem Satz zusammenfassen: Sie muss alle Fragen beantworten, die ein potenzieller Käufer stellt, bevor er sein Geld ausgibt. Diese Fragen sind immer dieselben - unabhängig davon, ob Sie Möbel, Kleidung, Elektronik oder handgemachte Kerzen verkaufen:
- Ist das das richtige Produkt für mich?
- Ist der Preis fair?
- Kann ich dem Shop vertrauen?
- Was passiert, wenn ich nicht zufrieden bin?
Wer diese vier Fragen auf einer einzigen Seite klar und ohne Ablenkung beantwortet, hat eine überzeugende Produktseite.
Der Produkttitel: Klarheit vor Kreativität
Der Titel steht ganz oben und wird sowohl von Suchmaschinen als auch von Käufern zuerst gelesen. Ein guter Produkttitel ist präzise, nicht poetisch. Er nennt, was das Produkt ist, in welcher Ausführung und - wenn relevant - von welcher Marke.
Ein schwacher Titel: "Sommerkleider 2er-Set"
Ein starker Titel: "Leinenkleid Damen, kurzarm, dunkelblau, Größe S-XL"
Bei Varianten - also wenn ein Produkt in verschiedenen Farben, Größen oder Ausführungen erhältlich ist - sollte das Unterscheidungsmerkmal im Titel oder zumindest in der Variantenauswahl klar benannt sein. Käufer, die nach "Rucksack schwarz 30 Liter" suchen, wollen genau das sehen.
Für WooCommerce-Shops lässt sich der Produkttitel direkt als H1-Überschrift der Seite nutzen - das stärkt gleichzeitig die SEO, ohne technischen Aufwand zu erfordern.
Produktbilder: Das Auge kauft mit
Das Bild ist das Erste, worauf ein Besucher schaut. Im Onlineshop übernimmt die Bildergalerie die Rolle des Verkäufers, der das Produkt in der Hand hält und von verschiedenen Seiten zeigt. Wer nur ein einziges Foto bietet, verliert Käufer - denn Unsicherheit über das Aussehen des Produkts ist einer der häufigsten Abbruchgründe.
Empfehlenswert sind mindestens drei bis fünf Bilder pro Produkt:
- Eine Hauptansicht vor neutralem, weißem oder hellem Hintergrund
- Detailaufnahmen (Material, Nähte, Anschlüsse, Beschriftungen)
- Eine Perspektive im Einsatz oder im Größenvergleich (z.B. Rucksack auf dem Rücken einer Person)
- Bei Kleidung: sowohl Flachbild als auch Aufnahme am Modell
Die Bilder sollten in einer Qualität vorliegen, die eine Zoom-Funktion sinnvoll macht. Bei einem Kunden, der Heimtextilien verkaufte, haben wir nach der Einführung einer Zoomfunktion und vier zusätzlichen Detailfotos pro Produkt eine deutlich niedrigere Rückgabequote beobachtet - die Käufer wussten vorher genau, was sie erhalten.
Bilder auf weißem Hintergrund wirken professioneller und lassen sich plattformübergreifend (Shop, Marktplätze, Social Media) leichter wiederverwenden.
Preis und Varianten: Keine versteckten Informationen
Der Preis muss klar sichtbar, vollständig und sofort lesbar sein. Für den deutschen Markt bedeutet das:
- Bruttobetrag (inkl. MwSt.) als Hauptpreis
- Steuerhinweis direkt darunter ("inkl. 19 % MwSt.")
- Versandkostennote oder -link in unmittelbarer Nähe
- Durchgestrichener Originalpreis bei Rabatt, wenn zutreffend
Varianten wie Farbe, Größe oder Ausführung sollten als Auswahlelemente direkt unter dem Preis erscheinen - mit sofortiger Aktualisierung des Preises, wenn verschiedene Varianten unterschiedlich kosten. Wer den Käufer zwingt, erst in den Warenkorb zu gehen, um den genauen Preis seiner gewünschten Variante zu erfahren, verliert ihn.
Preis und Varianten: Was funktioniert
| Element | Gut | Vermeiden |
|---|---|---|
| Preisdarstellung | Brutto inkl. Steuerhinweis | Netto ohne Erklärung |
| Variantenauswahl | Dropdown oder Buttons direkt auf der Seite | Erst im Warenkorb auswählen |
| Rabatt | Originalpreis durchgestrichen, neuer Preis in Farbe | Nur Text ohne visuellen Kontrast |
| Versandkosten | Hinweis direkt unter dem Preis | Erst im Checkout sichtbar |
| Verfügbarkeit | Sofort sichtbar (auf Lager / 3-5 Tage) | Gar nicht angezeigt |
Der Call-to-Action-Button: Eines, nicht viele
Der "In den Warenkorb"-Button ist das Herzstück der Produktseite. Er verdient eine eigene Farbe, einen eigenen Platz und keinen Wettbewerb durch gleichwertige andere Buttons in direkter Umgebung.
Praktische Anforderungen:
- Kontrastfarbe, die sich klar vom Rest der Seite abhebt
- Beschriftung, die die Aktion benennt: "In den Warenkorb", nicht "Weiter" oder "OK"
- Gut erreichbar auf Mobilgeräten (mindestens 44 Pixel hoch)
- Immer im sichtbaren Bereich ohne Scrollen (above the fold) - zumindest auf Desktop
Ein "Auf die Wunschliste"-Button oder ein "Jetzt kaufen"-Button können ergänzend existieren, sollten aber visuell klar nachrangig sein.
In Onlineshops, die ich für kleine und mittlere Unternehmen aufbaue, ist der CTA-Button eine der ersten Stellen, die ich in der Qualitätskontrolle prüfe. Erstaunlich oft ist er zu klein, zu grau oder auf Mobilgeräten halb verdeckt.
Produktbeschreibung: Informieren, nicht werben
Die Produktbeschreibung hat eine einzige Aufgabe: dem Käufer alle Informationen zu geben, die er braucht, um eine gute Entscheidung zu treffen. Dazu gehören Materialien, Maße, Gewicht, Pflegehinweise, Kompatibilität und Verwendungszweck.
Eine häufige Schwäche sind Beschreibungen, die aus Marketingfloskeln bestehen: "Hochwertiges Produkt für anspruchsvolle Kunden." Solche Sätze sagen nichts aus. Besser: "Gefertigt aus 100 % Baumwolle, Fadenstärke 180 g/m², maschinenwaschbar bis 60 Grad."
Strukturell hat sich eine zweigeteilte Form bewährt:
1. Kurze Zusammenfassung (3-5 Sätze oder eine Stichpunktliste) direkt im sichtbaren Bereich
2. Ausführliche Beschreibung mit Details, Tabellen und Hinweisen weiter unten
Das erlaubt sowohl dem schnellen Entscheider als auch dem gründlichen Käufer, das zu finden, was er sucht.
Checkliste: Was eine vollständige Produktbeschreibung enthält
- Verwendungszweck klar benannt
- Materialien und Inhaltsstoffe aufgeführt
- Maße und Gewicht angegeben
- Kompatibilität oder Varianten erklärt
- Pflegehinweise vorhanden (wenn relevant)
- Keine duplizierten Texte von anderen Produkten
- Eigene Beschreibung pro Variante bei deutlichen Unterschieden
Verfügbarkeit und Lieferzeit: Klare Erwartungen setzen
Wer auf der Produktseite nicht erfährt, ob ein Artikel vorrätig ist und wann er ankommt, kauft nicht - oder kauft und beschwert sich später. Beides ist vermeidbar.
Die Verfügbarkeitsanzeige sollte direkt im sichtbaren Bereich neben dem CTA-Button stehen. Gute Beispiele:
- "Auf Lager - Versand in 1-2 Werktagen"
- "Noch 3 auf Lager"
- "Derzeit nicht vorrätig - voraussichtlich wieder verfügbar in 2 Wochen"
Für den deutschen Markt ist Transparenz bei Lieferzeiten besonders wichtig. Käufer, die eine Bestellung für einen Anlass oder einen Termin benötigen, müssen verlässliche Angaben haben.
Lieferzeiten zu optimistisch angeben, um Käufe zu generieren, kostet langfristig Vertrauen und führt zu negativen Bewertungen - auch wenn das Produkt selbst gut ist.
Versandhinweise: Klarheit noch vor dem Checkout
Einer der häufigsten Gründe für Warenkorbabbrüche ist die Überraschung über Versandkosten erst im Checkout. Die Lösung ist einfach: Versandinfos direkt auf der Produktseite, unmittelbar unter dem Preis.
Das kann minimal sein - ein Link auf die Versandseite reicht oft aus. Besser ist ein kurzer Hinweis direkt auf der Seite: "Versandkostenfrei ab 50 EUR" oder "Standardversand: 3,99 EUR, kostenlos ab 49 EUR". Bei speziellen Artikeln (Sperrgut, Kühlartikel, internationale Lieferung) lohnt sich ein eigener Hinweis direkt beim Produkt.
Dieses Element wird beim Aufbau von Produktseiten oft als "unwichtig" übergangen, weil es technisch unspektakulär ist. In der Praxis ist es einer der wirkungsvollsten Hebel gegen Abbrüche.
Kundenbewertungen: Vertrauen, das keine Werbung ersetzen kann
Ein Käufer, der noch nie von Ihrem Shop gehört hat, vertraut den Erfahrungen anderer Kunden mehr als Ihrem Marketingtext. Das ist kein Misstrauensvotum - das ist menschliches Verhalten.
Kundenbewertungen auf der Produktseite sollten:
- Direkt unterhalb der Hauptinformationen oder am Ende der Seite platziert sein
- Echte Texte zeigen, nicht nur Sterne
- Eine Gesamtbewertung (z.B. 4,3 von 5 Sternen aus 47 Bewertungen) gut sichtbar haben
- Wenn möglich, nach Themen filterbar sein (Passform, Lieferung, Qualität)
Für neue Shops, die noch keine Bewertungen haben: Bessere Ausgangslage als Bewertungen zu fälschen ist Geduld. Bitten Sie Käufer nach dem Kauf per E-Mail um eine ehrliche Einschätzung. Erste echte Bewertungen kommen schneller als gedacht.
Vorteile
- Steigert das Vertrauen ohne zusätzliche Werbeausgaben
- Beantwortet Fragen, die der Shop-Text nicht stellt
- Verbessert SEO durch nutzergenerierten Inhalt
- Hilft bei der Produktentwicklung durch echtes Feedback
Nachteile
- Negative Bewertungen sind öffentlich sichtbar
- Erfordern aktive Moderation und Antworten
- Erster Aufbau braucht Zeit und Geduld
Vertrauenssignale: Die unsichtbare Überzeugungsarbeit
Vertrauenssignale sind Elemente, die dem Besucher zeigen: Hier bin ich sicher, hier ist der Kauf ohne Risiko. Im stationären Handel übernimmt das der Laden selbst - das Ambiente, der Verkäufer, die Umkleidekabine. Im Onlineshop müssen diese Signale explizit gesetzt werden.
Auf der Produktseite gehören dazu:
- Hinweis auf sichere Zahlarten (mit Icons der verfügbaren Methoden)
- Rückgaberecht klar benannt: "30 Tage Rückgabe"
- Gütesiegel (Trusted Shops, TÜV oder ähnliche) wenn vorhanden
- SSL-verschlüsselte Verbindung (sichtbar im Browser, aber ein kurzer Hinweis schadet nicht)
- Kontaktmöglichkeit in Reichweite - wer im Zweifel niemanden fragen kann, kauft nicht
Bei einem Kunden, der hochwertige Möbel verkaufte, haben wir auf der Produktseite einen kleinen Block mit "30 Tage Rückgaberecht - kostenloser Rücktransport" und dem Trusted-Shops-Siegel direkt unterhalb des CTA-Buttons eingefügt. Die Wirkung auf die Conversion war messbar. Das Produkt und der Preis hatten sich nicht verändert.
Vertrauenssignale wirken am stärksten in der Nähe des Kaufbuttons - genau dort, wo der Käufer den letzten inneren Widerstand überwindet.
Cross-Selling: Was noch dazu passt
Ein optionaler, aber wertvoller Baustein ist der Bereich für ergänzende oder ähnliche Produkte - oft als "Wird häufig zusammen gekauft" oder "Das könnte Ihnen auch gefallen" bezeichnet.
Dieser Bereich sollte erst nach den Kerninfos folgen, nie die Hauptseite dominieren. Gut platziertes Cross-Selling erhöht den durchschnittlichen Bestellwert ohne den Käufer zu überfordern. Schlecht platziertes Cross-Selling (zu viele Vorschläge, zu früh) lenkt vom Kauf ab.
Für SEO-Aspekte rund um Produktseiten und wie sie in der Gesamtstrategie eines Shops wirken, habe ich in meinem Artikel was-ist-ein-onlineshop-definition-grundlagen die Grundlagen beschrieben - und für den technischen Unterbau empfehle ich den Beitrag was-ist-woocommerce-einfach-erklaert.
Die Reihenfolge der Elemente: Was zuerst sichtbar sein muss
Nicht alle Elemente sind gleichgewichtig. Es gibt einen Kernbereich, der ohne Scrollen sichtbar sein muss ("above the fold"), und einen erweiterten Bereich, der nach unten folgt.
Produktseite: Anordnung der Elemente
| Bereich | Elemente | Priorität |
|---|---|---|
| Above the fold | Titel, Hauptbild, Preis, Varianten, CTA-Button | Pflicht |
| Above the fold | Verfügbarkeit, Versandhinweis, Kurzbeschreibung | Sehr hoch |
| Nach dem Fold | Ausführliche Beschreibung, Maßtabellen | Hoch |
| Nach dem Fold | Kundenbewertungen, Gütesiegel | Hoch |
| Nach dem Fold | Cross-Selling, ähnliche Produkte | Optional |
| Nach dem Fold | Technische Datenblätter, Downloads | Nach Bedarf |
Wer eine professionelle SEO-Optimierung für seinen Shop plant, sollte beachten, dass die Produktseite auch strukturierte Daten (Schema.org) enthalten sollte - das verbessert die Darstellung in Suchergebnissen erheblich. Die Einbindung ist technisch, lohnt sich aber auch für kleinere Shops.
Häufige Fehler, die Käufer kosten
Nach Jahren der Shopentwicklung sehe ich immer wieder dieselben Schwachstellen:
- Nur ein Produktbild (oder Bilder in zu niedriger Auflösung)
- Preise ohne Steuerhinweis oder Versandkosteninformation
- CTA-Button in Grau oder in Schriftgröße kleiner als der umgebende Text
- Produktbeschreibung, die für alle Varianten identisch ist
- Keine einzige Kundenbewertung nach einem Jahr Laufzeit
- Lieferzeiten nur im FAQ oder auf der Versandseite, nicht bei den Produkten
- Vertrauenssignale nur im Footer, nicht in der Nähe des Kaufbuttons
Jeder dieser Fehler kostet Verkäufe - nicht dramatisch in jedem Einzelfall, aber akkumuliert über Hunderte von Besuchen wöchentlich ist der Effekt erheblich. Eine gute Webseite und ein funktionierender Shop ergänzen sich, wenn die Grundlagen stimmen.
Wenn Sie unsicher sind, ob Ihre Produktseiten vollständig aufgebaut sind, sprechen Sie mich an - eine kurze Analyse zeigt in der Regel schnell, wo die größten Hebel liegen.
Eine Produktdetailseite ist die Unterseite im Onlineshop, die ein einzelnes Produkt vollständig vorstellt. Hier findet der Besucher alle Informationen, die er für eine Kaufentscheidung braucht: Bilder, Preis, Beschreibung, Varianten und den Button, um das Produkt in den Warenkorb zu legen. Sie ist die wichtigste Verkaufsseite im gesamten Shop. Eine Faustregel gibt es nicht - entscheidend ist, dass alle kaufrelevanten Fragen beantwortet werden. Bei einfachen Alltagsprodukten reichen oft drei bis fünf Sätze plus eine Merkmalsliste. Bei erklärungsbedürftigen oder teuren Produkten darf es deutlich mehr sein. Wichtig ist eine klare Struktur: Kurzzusammenfassung zuerst, Details weiter unten. Mindestens drei bis fünf Aufnahmen sind empfehlenswert: eine Hauptansicht vor neutralem Hintergrund, mehrere Detailansichten und wenn möglich eine Perspektive, die das Produkt im Einsatz oder im Größenvergleich zeigt. Je höher der Preis und je schwieriger das Produkt zu beschreiben ist, desto mehr Bilder rechtfertigen sich. Ja - zumindest ein Hinweis sollte direkt auf der Produktseite erscheinen. Käufer, die den Versandpreis erst im Checkout erfahren, brechen den Kauf überdurchschnittlich häufig ab. Ein einfacher Hinweis wie 'Versandkostenfrei ab X EUR' oder ein Link zur Versandseite direkt unterhalb des Preises reicht in der Praxis aus. Trust Signals sind Elemente, die dem Besucher zeigen, dass der Shop seriös ist und der Kauf sicher. Dazu gehören Gütesiegel (etwa Trusted Shops), sichere Zahlarten, Rückgabehinweise, Kundenbewertungen und eine deutlich sichtbare Kontaktmöglichkeit. Sie senken die Kaufhemmung, die beim Online-Shopping durch fehlenden persönlichen Kontakt entsteht. In die Aktionsbox gehören alle Elemente, die der Käufer sehen muss, bevor er entscheidet: Produkttitel, Hauptbild (oder Bildergalerie), Preis mit Steuerhinweis, Varianten-Auswahl (Größe, Farbe), Verfügbarkeit und der Warenkorb-Button. Alles andere kann unterhalb folgen. Nein - doppelte Beschreibungen schaden sowohl der SEO als auch der Nutzererfahrung. Suchmaschinen werten doppelte Inhalte ab, und Käufer bemerken schnell, wenn ein Text offensichtlich kopiert wurde. Jedes Produkt sollte eine eigene Beschreibung erhalten, die auf seine spezifischen Merkmale und Vorteile eingeht.Häufige Fragen
Was ist eine Produktdetailseite (PDP)?
Wie lang sollte eine Produktbeschreibung sein?
Wie viele Produktbilder brauche ich pro Artikel?
Muss der Versandpreis auf der Produktseite stehen?
Was sind Trust Signals auf einer Produktseite?
Was gehört in die Aktionsbox (above the fold)?
Kann ich für ähnliche Produkte dieselbe Beschreibung verwenden?
Brauchst du Hilfe bei deinem Projekt?
Ich baue WordPress-Webseiten und Shoper-Shops ab 600 €. Shoper Partner, 120+ Projekte.
- Antwort innerhalb von 24h
- Zertifizierter Shoper Partner
- 120+ abgeschlossene Projekte
- DSGVO-konform, volle Datensicherheit