Produktseite optimieren: Checkliste gegen Kaufabbrüche

Produktseiten-Checkliste nach Baymard- und WebAIM-Studien: Preis, Versand und Rückgabe, Bilder, Bewertungen, Warenkorb mobil, Pop-ups, Suche, Tastatur.

FixReports Redaktion11 Min. Lesezeit

Kunden brechen auf einer Produktseite am häufigsten ab, wenn sie die Gesamtkosten nicht erkennen, die Versand- und Rückgabebedingungen nicht finden, das Produkt anhand von Fotos und Bewertungen nicht beurteilen können oder den Kaufen-Button nicht leicht erreichen und bedienen können, besonders auf dem Smartphone. Auch Pop-ups, die die Seite verdecken, schwer auffindbare Seiten mit den Shop-Richtlinien, eine Shopsuche, die einfache Fragen nicht beantwortet, und Bedienelemente, die nicht per Tastatur funktionieren, verhindern Käufe. Die folgenden Zahlen stammen aus Branchenstudien des Baymard Institute und von WebAIM, die auf großen Stichproben von Websites und Käufern beruhen; sie beschreiben verbreitete Muster und sind keine Prognosen für einen einzelnen Shop.

Das Wichtigste in Kürze

  • In Baymards Umfrage von 2026 unter 1.083 Erwachsenen in den USA, die in den letzten drei Monaten online eingekauft hatten, gaben 40 % an, einen Kauf im Checkout abgebrochen zu haben, weil Zusatzkosten wie Versand, Steuern und Gebühren zu hoch waren (Baymard Institute (öffnet in einem neuen Tab)).
  • Baymards Benchmark für Produktseiten ergab, dass 67 % der führenden E-Commerce-Websites in der Nähe des Kaufbereichs keine Schätzung der Gesamtkosten angeben und 44 % die Rückgaberichtlinie im Hauptinhalt der Produktseite weder anzeigen noch verlinken (Baymard Institute (öffnet in einem neuen Tab), aktualisiert am 18. März 2026).
  • Im selben Benchmark hatten 62 % der mobilen Websites eine „mittelmäßige“ oder schlechtere UX auf Produktseiten.
  • WebAIM stellte im Februar 2026 auf 95,9 % der Startseiten der Top-1-Million-Websites WCAG-Fehler fest (WebAIM (öffnet in einem neuen Tab)).
  • In einer Baymard-Untersuchung von 2021 unter 33 der umsatzstärksten E-Commerce-Websites hatten 45 % Funktionen, die sich nicht per Tastatur bedienen ließen (Baymard Institute (öffnet in einem neuen Tab)).

Warum brechen Kunden einen Kauf ab?

Die häufigste Antwort lautet, dass sie sich nur umgesehen haben; danach folgen Zusatzkosten, langsame Lieferung, mangelndes Vertrauen beim Umgang mit Kreditkartendaten und der Zwang, ein Kundenkonto anzulegen.

Baymards Seite zum Warenkorbabbruch beziffert die durchschnittliche dokumentierte Abbruchrate auf 70,22 %, berechnet aus 50 Studien (Seite zuletzt aktualisiert am 22. September 2025). Das Diagramm mit den Gründen, als Daten von 2026 gekennzeichnet, beruht auf einer Umfrage unter 1.083 Erwachsenen in den USA, die in den vorangegangenen drei Monaten online eingekauft hatten. Mehrfachnennungen waren möglich (Baymard Institute (öffnet in einem neuen Tab), Stand Oktober 2026):

Grund für den Abbruch eines Onlinekaufs im CheckoutAnteil der Befragten
Ich habe mich nur umgesehen / war noch nicht kaufbereit42 %
Zusatzkosten zu hoch (Versand, Steuern, Gebühren)40 %
Die Lieferung war zu langsam20 %
Ich habe der Website meine Kreditkartendaten nicht anvertraut19 %
Die Website wollte, dass ich ein Kundenkonto anlege18 %
Zu langer oder komplizierter Checkout17 %
Die Website hatte Fehler oder ist abgestürzt17 %
Die Rückgabebedingungen waren nicht zufriedenstellend13 %
Ich konnte die Gesamtkosten der Bestellung nicht vorab sehen oder berechnen12 %
Die Kreditkarte wurde abgelehnt10 %
Es gab nicht genügend Zahlungsarten9 %

Das sind Ergebnisse einer US-Umfrage zum Checkout, keine Messungen Ihres Shops. Mehrere dieser Gründe entstehen schon früher, auf der Produktseite, wo Kunden zum ersten Mal den Preis, die Lieferbedingungen und die Rückgabebedingungen sehen. Welche davon für Sie relevant sind, zeigen nur Ihre eigenen Analysedaten.

Ist der vollständige Preis auf der Produktseite klar?

Der aktuelle Preis, ein eventueller ursprünglicher Preis, die Angabe, was enthalten ist und was nicht, sowie eine Schätzung der Versandkosten gehören direkt neben den Kaufen-Button.

Baymards Produktseiten-Benchmark von 2026 ergab, dass 67 % der Websites in der Nähe des Kaufbereichs keine Schätzung der „Gesamtkosten der Bestellung“ bieten und 81 % keinen Grundpreis (Preis pro Einheit) für Produkte zeigen, die in unterschiedlichen Mengen oder Größen verkauft werden (Baymard Institute (öffnet in einem neuen Tab)). Prüfen Sie, ob die Seite Folgendes zeigt:

  • Den aktuellen Preis und bei reduzierten Artikeln den ursprünglichen Preis.
  • Einen Grundpreis für Produkte, die in mehreren Größen verkauft werden.
  • Ob Steuern oder Zölle enthalten sind.
  • Die Versandkosten oder den Bestellwert, ab dem der Versand kostenlos ist.

Shopify: Im Dawn-Theme ergänzt der Preisblock einen Hinweis, dass Steuern enthalten sind („Taxes included.“), und einen Link mit dem Hinweis, dass der Versand im Checkout berechnet wird („Shipping calculated at checkout.“), wenn die entsprechenden Einstellungen und eine Versandrichtlinie vorhanden sind (Dawn-Quellcode (öffnet in einem neuen Tab)). Das ist korrekt, aber keine Schätzung. Ergänzen Sie deshalb Ihre tatsächlichen Versandkosten oder die Schwelle für kostenlosen Versand in einem Textblock.

WooCommerce: Die Optionen „Aktiviere den Versandrechner auf der Warenkorb-Seite“ und „Versandkosten erst anzeigen wenn eine Adresse eingegeben wurde“ unter WooCommerce > Einstellungen > Versand (WooCommerce > Settings > Shipping) betreffen Warenkorb und Checkout, nicht die Produktseite (WooCommerce-Quellcode (öffnet in einem neuen Tab)). Geben Sie die Versandkosten im Produkt-Template oder in der kurzen Produktbeschreibung an.

Finden Kunden Informationen zu Versand und Rückgabe, bevor sie etwas in den Warenkorb legen?

Platzieren Sie eine kurze Zusammenfassung von Lieferzeit, Versandkosten und Rückgabefrist in der Nähe des Kaufen-Buttons, mit einem Link zur vollständigen Richtlinie.

In Baymards Umfrage zum Abwägungs- und Kaufverhalten (Consideration & Purchase Behavior) mit 1.032 Befragten gaben 60 % an, auf der Produktseite nach Informationen zur Rückgabe zu suchen, doch 44 % der untersuchten Websites zeigen diese im Hauptinhalt der Produktseite weder an noch verlinken sie dort (Baymard Institute (öffnet in einem neuen Tab)). In der oben genannten Umfrage zu Kaufabbrüchen von 2026 nannten 20 % eine langsame Lieferung und 13 % unbefriedigende Rückgabebedingungen.

<details class="product-policy">
  <summary>Shipping and returns</summary>
  <p>Ships in 1 to 2 business days. Free shipping on orders over $75.</p>
  <p>Free returns within 30 days. <a href="{{ shop.refund_policy.url }}">Read the return policy</a></p>
</details>

Shopify: Hinterlegen Sie Ihre Richtlinien unter Einstellungen > Richtlinien (Settings > Policies) (Shopify Help Center (öffnet in einem neuen Tab)). In Dawn kann ein Block Einklappbare Reihe (Collapsible row) auf der Produktseite Text oder den Inhalt einer Seite anzeigen (Dawn-Quellcode (öffnet in einem neuen Tab)), sodass eine einzige Seite zu Versand und Rückgabe auf jedem Produkt erscheinen kann.

WooCommerce: WooCommerce legt eine Seite „Richtlinie für Erstattungen und Rückgaben“ (Refund and Returns Policy) als Entwurf an (WooCommerce-Quellcode (öffnet in einem neuen Tab)). Sie bleibt unveröffentlicht, bis Sie sie bearbeiten und veröffentlichen.

Beantworten die Produktbilder die Fragen der Kunden?

Die Bilder sollten das Produkt aus mehreren Blickwinkeln, im Größenvergleich und im Einsatz zeigen, denn viele Kunden beurteilen Größe und Passform eher anhand der Fotos als anhand der technischen Daten.

Baymards Tests ergaben, dass 42 % der Nutzer versuchen, die Größe eines Produkts anhand der Bilder einzuschätzen, während 37 % der untersuchten Websites kein Bild „im Maßstab“ bieten, das das Produkt neben einer Person oder einem vertrauten Gegenstand zeigt. 23 % bieten kein Bild mit einem Model, was vor allem bei Bekleidung, Accessoires und Kosmetik wichtig ist (Baymard Institute (öffnet in einem neuen Tab)).

Prüfen Sie außerdem, ob die Galerie bei der Wahl einer Farbe zum passenden Bild wechselt, ob der Zoom auf Smartphones funktioniert und ob jedes Bild einen Alternativtext hat, der beschreibt, was die jeweilige Ansicht zeigt, etwa „Leinenhemd, Rückansicht“.

Sind Bewertungen leicht zu finden und glaubwürdig?

Zeigen Sie die Durchschnittsbewertung und die Anzahl der Bewertungen in der Nähe des Produkttitels, verlinken Sie sie mit allen Bewertungen und antworten Sie auf negative Bewertungen.

Baymard stellte fest, dass 89 % der untersuchten Websites nicht auf negative Bewertungen antworten und 63 % es Kunden nicht ermöglichen, über die Bewertungen hinweg von den Fotos eines Bewerters zu denen des nächsten zu wechseln (Baymard Institute (öffnet in einem neuen Tab)). Bewertungs-Widgets, die spät laden, können zudem die Seite nach unten verschieben; reservieren Sie deshalb ihren Platz.

Shopify: Der Block Produktbewertung (Product rating) in Dawn zeigt Sterne aus einer Bewertungs-App an, und das Theme weist darauf hin, dass dafür eine App erforderlich ist (Dawn-Quellcode (öffnet in einem neuen Tab)).

WooCommerce: Unter WooCommerce > Einstellungen > Produkte (WooCommerce > Settings > Products) gehören zu den Optionen für Bewertungen „Produktrezensionen aktivieren“, „Kennzeichnung ‚Verifizierter Käufer‘ bei Kundenrezensionen anzeigen“, „Rezensionen können nur von ‚Verifizierten Käufern‘ hinterlassen werden“ und „Sterne-Bewertung bei Rezensionen aktivieren“ (WooCommerce-Quellcode (öffnet in einem neuen Tab)).

Ist der Warenkorb-Button auf dem Smartphone leicht zu erreichen und anzutippen?

Auf dem Smartphone sollten Kunden den Preis sehen, eine Variante wählen und auf „In den Warenkorb“ tippen können, ohne suchen zu müssen, und die Bedienelemente sollten groß genug sein, um sie sicher zu treffen.

In Baymards Benchmark von 2026 hatten 52 % der Desktop-Websites und 62 % der mobilen Websites eine „mittelmäßige“ oder schlechtere UX auf Produktseiten, und 57 % der Websites nutzten für die Größenauswahl keine Buttons, sodass die Größen in Dropdown-Menüs versteckt blieben (Baymard Institute (öffnet in einem neuen Tab)).

Öffnen Sie eine Produktseite auf einem echten Smartphone und prüfen Sie:

  • Erster Bildschirm. In einem untereinander angeordneten Smartphone-Layout steht die Galerie oft an erster Stelle, sodass ein hohes Bild Titel, Preis und Button unter den ersten Bildschirm schieben kann.
  • Fixierte Kaufleisten. Wenn Sie eine verwenden, darf sie fokussierte Elemente nicht verdecken. Die Zusammenfassung des W3C zum WCAG-2.2-Kriterium 2.4.11 (Stufe AA) nennt als Beispiel eine fixierte Fußleiste, die fokussierte Elemente verdeckt (W3C (öffnet in einem neuen Tab)).
  • Tap-Ziele. WCAG 2.5.8 (Stufe AA) legt ein Minimum von 24 × 24 CSS-Pixeln fest, mit Ausnahmen (W3C (öffnet in einem neuen Tab)); Shopifys Leitfaden für Themes empfiehlt auf Mobilgeräten mindestens 48 × 48 Pixel (Shopify (öffnet in einem neuen Tab)).
  • Horizontales Scrollen. WCAG 1.4.10 Reflow verlangt, dass Inhalte bei einer Breite von 320 CSS-Pixeln funktionieren, ohne in zwei Richtungen scrollen zu müssen (W3C (öffnet in einem neuen Tab)). Breite Größentabellen und Vergleichstabellen sind häufige Ursachen.

Stehen Pop-ups dem Kauf im Weg?

Pop-ups, die die Produktseite beim Aufruf verdecken, verbergen genau die Informationen, wegen derer Kunden gekommen sind. Setzen Sie deshalb lieber auf kleine Banner und begrenzen Sie Aufforderungen zur Anmeldung.

Die Leitlinien von Google Search Central beschreiben aufdringliche Interstitials und Dialoge als Elemente, die die Sicht auf den Inhalt versperren, und empfehlen kleine Banner statt ganzseitiger Overlays (Google Search Central (öffnet in einem neuen Tab)). Shopify weist darauf hin, dass Pop-up-Inhalte auch Layoutverschiebungen verursachen können (Shopify Help Center (öffnet in einem neuen Tab)). Jeder Dialog, den Sie beibehalten, muss sich per Tastatur schließen lassen; WCAG 2.1.2 No Keyboard Trap (Stufe A) verlangt, dass der Fokus eine Komponente allein mit der Tastatur verlassen kann (W3C (öffnet in einem neuen Tab)).

Finden Kunden Ihre Seiten zu Vertrauen und Richtlinien?

Verlinken Sie die Seiten zu Erstattung, Versand, Datenschutz, AGB und Kontakt in der Fußzeile jeder Seite.

In Baymards Umfrage von 2026 gaben 19 % der Befragten an, einen Kauf abgebrochen zu haben, weil sie der Website ihre Kartendaten nicht anvertrauen wollten. Klare Richtlinien und Kontaktdaten sind grundlegende Signale dafür, dass ein Shop seriös ist.

Shopify: Sobald Sie unter Einstellungen > Richtlinien (Settings > Policies) Richtlinien hinzugefügt haben, verlinkt Shopify sie automatisch in der Fußzeile des Checkouts. Um sie im Shop anzuzeigen, fügen Sie sie unter Content > Menüs (Content > Menus) einem Menü hinzu (Shopify Help Center (öffnet in einem neuen Tab)) oder aktivieren Sie in Dawn die Fußzeilen-Einstellung Links zu Richtlinien (Policy links).

WooCommerce: Veröffentlichen Sie die Entwurfsseite zu Erstattungen und fügen Sie dann Ihre Richtlinien- und Kontaktseiten zur Fußzeile hinzu.

Findet die Shopsuche Produkte und Antworten?

Die Suche sollte für Produktnamen, Tippfehler und Synonyme die richtigen Produkte liefern und auch Fragen wie „Rückgabe“ oder „Versand“ beantworten.

Baymards Such-Benchmark von 2026 mit mehr als 170 Websites und Apps bewertete 46 % der Desktop-, 58 % der mobilen und 64 % der App-Erlebnisse als „mittelmäßig“ oder schlechter und stellte auf 66 % der Websites Probleme mit Suchanfragen fest, die sich nicht auf Produkte beziehen, etwa wenn eine Suche nach der Rückgaberichtlinie Produkte liefert (Baymard Institute (öffnet in einem neuen Tab), aktualisiert am 29. April 2026).

Testen Sie Ihren Shop mit dem Namen eines Bestsellers, einer falsch geschriebenen Variante davon, einem Kategoriebegriff und „Rückgabe“. Bei Shopify liefert die Shopsuche Produkte, Blogbeiträge und Seiten, wobei die Vorschlagssuche (Predictive Search) und die Tippfehlertoleranz standardmäßig aktiviert sind, und die App Search & Discovery ergänzt Filter und Produkt-Boosts (Shopify Help Center (öffnet in einem neuen Tab)). Eine normale Seite, die Versand und Rückgabe zusammenfasst, kann deshalb bei diesen Suchen erscheinen.

Kann man nur mit der Tastatur einkaufen?

Jeder Schritt von der Variantenauswahl bis zum Checkout sollte allein mit der Tastatur funktionieren, mit einer sichtbaren Fokusanzeige.

WCAG 2.2 verlangt, dass alle Funktionen per Tastatur bedienbar sind (2.1.1, Stufe A), dass es keine Tastaturfallen gibt (2.1.2, Stufe A), dass eine Fokusanzeige sichtbar ist (2.4.7, Stufe AA) und dass fokussierte Elemente nicht vollständig von anderen Inhalten verdeckt werden (2.4.11, Stufe AA) (W3C (öffnet in einem neuen Tab)). Diese Grundlagen fehlen oft. Baymards Untersuchung von 2021 unter 33 der umsatzstärksten Websites ergab, dass 45 % Funktionen hatten, die sich nicht per Tastatur bedienen ließen, und 48 % die Fokusanzeige nicht durchgehend sichtbar hielten (Baymard Institute (öffnet in einem neuen Tab)). WebAIMs Scan vom Februar 2026 ergab im Schnitt 56,1 erkannte Fehler pro Startseite und 71,0 bei Websites der Kategorie Shopping (WebAIM (öffnet in einem neuen Tab)).

Ein Test in fünf Minuten:

  1. Laden Sie eine Produktseite und drücken Sie die Tabulatortaste, ohne die Maus zu berühren.
  2. Prüfen Sie, ob Sie jederzeit sehen, wo sich der Fokus befindet.
  3. Wählen Sie Größe und Farbe und ändern Sie die Menge.
  4. Drücken Sie „In den Warenkorb“ und prüfen Sie, ob der Fokus in den Warenkorb-Drawer wechselt und ob sich dieser per Tastatur schließen lässt.
  5. Gelangen Sie bis zum Checkout-Button.
/* A visible focus style for keyboard users */
:focus-visible {
  outline: 3px solid #1a5fb4;
  outline-offset: 2px;
}

Ein kostenloser Scan prüft viele dieser Punkte in etwa einer Minute. Der Conversion-Report macht aus Seitenprüfungen, etwa zur Sichtbarkeit des Preises, zum Hinzufügen zum Warenkorb auf dem Smartphone, zu Versand- und Rückgabeinformationen, Pop-ups, Richtlinien-Links in der Fußzeile, zur Suche, zum Kaufpfad per Tastatur und zum horizontalen Scrollen, priorisierte Empfehlungen. Er beruht auf Seitenprüfungen, nicht auf Ihren Verkaufsdaten, und gibt keine Umsatzgarantie.

Häufig gestellte Fragen

Was ist der häufigste Grund, warum Kunden einen Kauf abbrechen?

In Baymards Umfrage von 2026 unter 1.083 Erwachsenen in den USA lautete die häufigste Antwort „nur umgesehen“ (42 %). Unter den übrigen Gründen lagen Zusatzkosten wie Versand, Steuern und Gebühren mit 40 % vorn, vor langsamer Lieferung mit 20 %.

Steigt meine Conversion-Rate, wenn ich diese Probleme behebe?

Das kann niemand versprechen. Die Studien beschreiben Hürden, die in großen Stichproben von Websites und Käufern häufig vorkommen; ob ihre Beseitigung Ihre Ergebnisse verändert, hängt von Ihren Produkten, Preisen und Ihrem Traffic ab. Messen Sie deshalb vor und nach jeder Änderung.

Wo sollten Informationen zu Versand und Rückgabe auf einer Produktseite stehen?

In der Nähe von Preis und Kaufen-Button, als kurze Zusammenfassung mit einem Link zur vollständigen Richtlinie. In Baymards Studien gaben 60 % der Befragten an, auf der Produktseite nach Informationen zur Rückgabe zu suchen.

Muss der Warenkorb-Button auf Smartphones ohne Scrollen sichtbar sein?

Keine Regel schreibt das vor, aber Kunden sollten den Preis sehen und den Button schnell erreichen. Eine fixierte Kaufleiste ist eine Möglichkeit, solange sie keine fokussierten Elemente oder andere Inhalte verdeckt.

Gehört Barrierefreiheit zur Conversion?

Ja, ganz praktisch: Wer die Variantenauswahl oder den Warenkorb-Button nicht mit Tastatur oder Screenreader bedienen kann, kann nicht kaufen. WCAG 2.2 Stufe AA deckt diese Grundlagen ab.

Quellen

Alle Ratgeber