Stand: 29.10.2026
Eine Shopify-Produktseite verkauft, wenn sie die Kauffragen dort beantwortet, wo sie entstehen: Was ist das, passt es zu mir, was kostet es inklusive Versand, wann kommt es an, kann ich es zurückschicken und vertrauen andere dem Shop? Wenn du deine Shopify-Produktseite optimieren willst, geht diese Checkliste mit dir acht Bereiche durch, nennt wichtige Preisangaben für Deutschland und hilft bei der Reihenfolge.
Das Wichtigste in Kürze
- Miss zuerst, ob Besucher vor dem Warenkorb aussteigen oder erst im Checkout.
- Ziel für den ersten Screen am Handy: Produkt, Nutzen und Preis sofort erkennbar, der Button nah.
- Versandkosten, Lieferzeit und Rückgabe stehen direkt am Kaufbutton.
- Jede App auf der Produktseite kann Ladezeit kosten. Behalte nur, was beim Verkaufen hilft.
Erst messen: Wo verliert deine Produktseite Käufer?
Prüfe zuerst, wo Besucher aussteigen. Die Aufschlüsselung der Conversion-Rate in Shopify Analytics („Conversion rate breakdown“) zeigt vier Stufen: alle Sitzungen, Sitzungen mit Warenkorb, Sitzungen mit erreichtem Checkout und abgeschlossene Checkouts.
- Wenige Sitzungen mit Warenkorb: Das Problem liegt meist auf der Produktseite oder beim Traffic, der dort landet.
- Viele Warenkörbe, wenige Checkouts: Schau dir Warenkorb, Versandkosten und Zahlungsarten an.
- Mobil deutlich schwächer als Desktop: Fang beim ersten Screen und bei der Ladezeit am Handy an.
Vergleiche gleich lange Zeiträume und trenne nach Traffic-Quelle.
Die Checkliste: 8 Bereiche deiner Produktseite
1. Der erste Screen am Handy
Öffne deine Produktseite auf dem Handy, so wie jemand, der gerade auf eine Anzeige getippt hat. Gestaltungsziel, keine feste Regel: Ohne Scrollen ist klar, was das Produkt ist und für wen, welchen Nutzen es bringt und was es kostet, und der Weg zum Button ist kurz. Auf kleinen Displays, bei nötiger Variantenwahl oder großen Produktbildern liegt der Button oft knapp darunter, ohne dass die Seite deshalb schlecht ist. Problematisch wird es, wenn Besucher suchen müssen.
Stimmungsbild, Ankündigungsbalken und Pop-up füllen zusammen schnell den ganzen Screen und schieben die Kaufinfos nach unten. Laut Benchmark des Baymard Institute erreichen nur 38 % der führenden Shops in den USA und Europa mobil eine „ordentliche“ oder „gute“ Produktseiten-UX, am Desktop sind es 48 % (Stand März 2026).
2. Anzeige und Produktseite versprechen dasselbe
Wer auf eine Anzeige mit „schläft kühler“ klickt, sucht dieses Versprechen oben auf der Seite. Prüfe für deine stärksten Anzeigen:
- Steht die Kernaussage der Anzeige in der Überschrift oder direkt darunter?
- Zeigt das erste Bild dieselbe Variante, Farbe oder Situation wie das Creative?
- Führt die Anzeige auf die passende Produktseite statt auf Startseite oder Kollektion?
3. Bilder und Videos, die Fragen beantworten
In Baymards Nutzertests versuchten 42 % der Testpersonen, die Größe eines Produkts aus den Bildern abzulesen. Plane deshalb diese Bildtypen ein:
- ein Bild mit Größenvergleich, etwa in der Hand oder am Körper,
- bei tragbaren Produkten ein Bild an einer Person, mit Körpergröße und getragener Größe,
- Detailaufnahmen von Material, Verschluss und Verarbeitung,
- ein kurzes Video oder Bild in der echten Anwendung.
4. Varianten, Größen und Produktdetails
Größe und Farbe zu wählen, sollte keine Denkaufgabe sein. Baymard zählt 57 % der untersuchten Shops, die für die Größenwahl keine Buttons nutzen. Buttons zeigen alle Optionen auf einen Blick, auch ausverkaufte Größen.
Die Größentabelle gehört direkt neben die Größenauswahl. In Shopify pflegst du sie am besten als Produkt-Metafeld und verbindest sie im Theme-Editor mit der Produktvorlage, sofern dein Theme dynamische Quellen unterstützt.
5. Preis, Versand, Lieferzeit und Rückgabe am Button
Baymard zählt 67 % der untersuchten Shops, die in der Nähe des Kaufbereichs keine Schätzung der Gesamtkosten zeigen, und warnt, dass überraschende Versandkosten zu Abbrüchen führen. In einer quantitativen Befragung von Baymard mit 1.032 Teilnehmenden gaben die meisten (60 %) an, Rückgabebedingungen auf der Produktseite zu suchen.
Verkaufst du in Deutschland an Verbraucher, gelten Angaben aus der Preisangabenverordnung (PAngV), unter anderem:
- der Gesamtpreis (§ 3),
- bei grundpreispflichtigen Waren der Grundpreis (§ 4, mit Ausnahmen),
- der Hinweis auf enthaltene Umsatzsteuer und ob Versandkosten anfallen, samt Höhe, soweit vorab berechenbar (§ 6),
- wenn du eine Preisermäßigung für eine Ware bekannt gibst, etwa per Streichpreis, grundsätzlich der niedrigste Gesamtpreis der letzten 30 Tage vor der Ermäßigung (§ 11; gesetzliche Ausnahmen beachten, etwa für individuelle Preisermäßigungen).
Das sind deutsche Regeln; Österreich und die Schweiz haben eigene Vorschriften. Lass die Angaben im Zweifel rechtlich prüfen. Für die Conversion zählt, dass Versandkosten, Lieferzeit und Rückgabe in einem kurzen Block direkt unter dem Button stehen.
Prüfe am Handy, ob Shopifys beschleunigte Checkout-Buttons wie Shop Pay, Apple Pay oder PayPal den Hauptbutton verdrängen.
6. Bewertungen und Vertrauen
Fünf Sterne ohne Text überzeugen wenig. Hilfreicher sind Bewertungen mit Fotos und konkreten Sätzen zu Passform, Qualität oder Lieferung.
- Sterne und Anzahl kurz am Preis, ausführliche Bewertungen weiter unten.
- Kritische Bewertungen bleiben sichtbar, mit einer sachlichen Antwort von dir.
- Prüfe, ob deine Bewertungs-App noch gepflegt wird; Shopifys eigene App „Product Reviews“ etwa ist nicht mehr verfügbar.
7. Ladezeit und Apps
Laut Shopify kann jede zusätzliche Funktion die Web-Performance beeinflussen, etwa Apps mit Widget, Pop-up oder Script. Google nennt für gute Core Web Vitals diese Schwellenwerte, gemessen am 75. Perzentil der Seitenaufrufe echter Besucher:
| Kennzahl | Was sie misst | Gut |
|---|---|---|
| LCP (Largest Contentful Paint) | wann das größte sichtbare Element geladen ist | bis 2,5 Sekunden |
| INP (Interaction to Next Paint) | wie schnell die Seite auf Tippen und Klicken reagiert | bis 200 Millisekunden |
| CLS (Cumulative Layout Shift) | wie stark Inhalte beim Laden verrutschen | bis 0,1 |
PageSpeed Insights zeigt zwei Arten von Daten. Die Felddaten echter Chrome-Nutzer fassen die vergangenen 28 Tage zusammen, reagieren also erst nach und nach auf eine Änderung und fehlen bei kleinen Shops unter Umständen ganz. Der Labortest lädt die Seite simuliert, ohne zu tippen oder zu klicken. Er zeigt deshalb keinen INP, dafür unter anderem LCP, CLS und die Total Blocking Time, also wie lange der Hauptthread blockiert ist. Sie ist ein Hinweis, kein Ersatz für INP.
So gehst du vor:
- Liste alle Apps auf, die auf der Produktseite etwas laden, und frag bei jeder, ob sie beim Kauf hilft.
- Verkleinere große Bilder und lade Bilder unterhalb des ersten Screens erst beim Scrollen.
- Vergleiche vor und nach jeder Änderung mehrere mobile Labortests unter gleichen Bedingungen: LCP, CLS, Total Blocking Time.
- Teste Variantenwahl und „In den Warenkorb“ von Hand. Das Leistungs-Panel der Chrome-Entwicklertools zeigt dabei Live-Werte einschließlich INP.
- Prüfe die INP-Felddaten in den Wochen danach, falls vorhanden.
8. Barrierefreiheit und strukturierte Daten
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) für viele Onlineshops, die an Verbraucher verkaufen. Ein Onlineshop zählt dabei als Dienstleistung im elektronischen Geschäftsverkehr. Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen: weniger als zehn Beschäftigte und höchstens 2 Mio. Euro Jahresumsatz oder Jahresbilanzsumme. Ob dein Shop betroffen ist, klärst du mit einer Rechtsberatung. Alt-Texte, Kontrast, klar beschriftete Buttons und Tastaturbedienung helfen ohnehin allen.
Für die Google-Suche zählen strukturierte Daten mit Preis und Verfügbarkeit. Themes aus dem Shopify Theme Store müssen laut Shopify Googles Rich Snippets für Produkte enthalten. Prüfe nach Theme- oder App-Wechseln mit Googles Test für Rich-Suchergebnisse, ob alles korrekt ausgelesen wird.
Checkliste zum Abhaken
| Bereich | Prüffrage |
|---|---|
| Messen | Weißt du, ob Besucher vor dem Warenkorb oder im Checkout aussteigen, getrennt nach Gerät? |
| Erster Screen | Erkennt man am Handy sofort Produkt, Nutzen und Preis, und ist der Weg zum Button kurz? |
| Anzeige | Steht das Versprechen deiner Anzeige oben auf der Seite? |
| Bilder | Gibt es ein Bild mit Größenvergleich und eines in der Anwendung? |
| Varianten | Wählen Besucher die Größe per Button, mit der Größentabelle direkt daneben? |
| Kosten | Stehen Versandkosten, Lieferzeit und Rückgabe direkt unter dem Button? |
| PAngV | Stimmen Gesamtpreis, Grundpreis (falls grundpreispflichtig), Umsatzsteuer- und Versandhinweis und bei angekündigten Preisermäßigungen der 30-Tage-Preis? |
| Bewertungen | Gibt es Bewertungen mit Text und Fotos, und wird die App gepflegt? |
| Apps und Ladezeit | Hilft jede App beim Verkaufen, sind LCP und CLS im Labortest gut, reagieren Variantenwahl und Warenkorb sofort? |
| Technik | Haben Bilder Alt-Texte, und liest Googles Test Preis und Verfügbarkeit korrekt aus? |
In welcher Reihenfolge du optimierst
Bewerte jeden offenen Punkt mit drei Fragen:
- Wie viele Besucher sehen die Änderung? Der erste Screen betrifft alle, ein Detail weiter unten nur wenige.
- Wie gut ist das Problem belegt? Analytics-Zahlen, wiederkehrende Kundenfragen und Rücksendegründe schlagen das Bauchgefühl.
- Wie groß ist der Aufwand? Einen Versandhinweis verschiebst du in Minuten, neue Produktfotos brauchen ein Shooting.
Für einen sauberen A/B-Test brauchst du genug Bestellungen. Fehlt der Traffic, ändere einen Punkt nach dem anderen, notiere das Datum und vergleiche ähnliche Zeiträume ohne große Budget- oder Saisonsprünge.
Produktseite und Anzeigen gehören zusammen
Wenn du Traffic über Meta, TikTok oder Google kaufst, ist die Produktseite ein Teil der Kampagne. Eine Seite, die Fragen offen lässt, macht jeden Kauf aus Anzeigen teurer, und die Werbeplattformen bekommen weniger Kaufsignale.
Prüfe deshalb parallel: Kommen deine Käufe sauber im Werbekonto an? Und ab welchem ROAS verdienst du nach allen Kosten Geld? Beides erklären wir in eigenen Artikeln: Conversions API in Shopify einrichten und prüfen und Break-even-ROAS berechnen.
Kostenloser Produktseiten-Check
Welche Punkte dieser Checkliste sind bei dir offen? Schick uns über das Kontaktformular den Link zu deiner wichtigsten Produktseite. Wir gehen sie am Handy und am Desktop von außen durch und schicken dir kostenlos eine kurze Einschätzung, welche Punkte wir zuerst angehen würden. Bei EXRE bauen wir Shopify-Shops und Landingpages und betreuen die Anzeigen auf Meta, TikTok und Google, die dorthin führen.
Häufige Fragen
Was gehört auf eine gute Shopify-Produktseite?
Eine gute Produktseite macht am Handy möglichst schon im ersten Screen klar, was das Produkt ist, welchen Nutzen es hat und was es kostet, und führt ohne Umweg zum Kaufbutton. Dazu kommen Bilder mit Größenvergleich, Größenwahl per Button mit Größentabelle, Versandkosten, Lieferzeit und Rückgabe am Button sowie Bewertungen mit Text. In Deutschland kommen die Angaben der Preisangabenverordnung dazu.
Wie erhöhe ich die Conversion-Rate meiner Shopify-Produktseite?
Prüfe zuerst in Shopify Analytics, ob Besucher vor dem Warenkorb oder erst im Checkout aussteigen. Liegt das Problem vor dem Warenkorb, arbeite die Produktseite ab, etwa so: erster Screen am Handy, Kosten und Lieferzeit am Button, Größenhilfe, Bilder, Bewertungen und Ladezeit.
Wie viele Apps sind auf der Produktseite zu viel?
Eine feste Zahl gibt es nicht. Entscheidend ist, was jede App lädt und ob sie beim Kauf hilft. Deaktiviere testweise einzelne Apps und vergleiche mehrere Labortests in PageSpeed Insights unter gleichen Bedingungen: LCP, CLS und Total Blocking Time. Variantenwahl und Warenkorb testest du zusätzlich von Hand. INP aus echten Nutzerdaten fasst PageSpeed Insights über 28 Tage zusammen, bei kleinen Shops fehlt er eventuell.
Wo füge ich in Shopify eine Größentabelle ein?
Lege die Größentabelle als Produkt-Metafeld an und verbinde das Feld im Theme-Editor mit der Produktvorlage, wenn dein Theme dynamische Quellen unterstützt. Platziere sie direkt neben der Größenauswahl, zum Beispiel als Link mit Pop-up.
Brauche ich für jedes Produkt eine eigene Produktvorlage?
Nein. Eine eigene Vorlage lohnt sich für Produktgruppen mit anderen Kauffragen, etwa Bekleidung mit Größentabelle, Sets oder technisches Zubehör. Du erstellst sie im Theme-Editor und weist sie im Shopify-Admin den passenden Produkten zu.
Quellen
Quellen gelesen am 25.10.2026; Baymard (Befragung), PageSpeed Insights, INP und §§ 4, 6, 11 PAngV erneut am 29.10.2026.
- Baymard Institute: Product Page UX 2026 (aktualisiert 18.03.2026). https://baymard.com/research-articles/current-state-ecommerce-product-page-ux
- Baymard Institute: Apparel Size Information. https://baymard.com/research-articles/apparel-size-information
- Shopify Help Center: Behavior reports. https://help.shopify.com/en/manual/reports-and-analytics/shopify-reports/report-types/default-reports/behaviour-reports
- Shopify Help Center: Templates. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates
- Shopify Help Center: Metafields. https://help.shopify.com/en/manual/custom-data/metafields
- Shopify Help Center: Accelerated checkout buttons. https://help.shopify.com/en/manual/online-store/dynamic-checkout
- Shopify Help Center: Web performance. https://help.shopify.com/en/manual/online-store/web-performance
- Shopify.dev: Theme Store requirements. https://shopify.dev/docs/storefronts/themes/store/requirements
- Shopify App Store: Product Reviews. https://apps.shopify.com/product-reviews
- web.dev: Web Vitals. https://web.dev/articles/vitals
- web.dev: Interaction to Next Paint (INP). https://web.dev/articles/inp
- web.dev: Manually diagnose slow interactions in the lab. https://web.dev/articles/manually-diagnose-slow-interactions-in-the-lab
- Google for Developers: About PageSpeed Insights. https://developers.google.com/speed/docs/insights/v5/about
- Google Search Central: Strukturierte Daten für Produkte. https://developers.google.com/search/docs/appearance/structured-data/product
- Preisangabenverordnung (PAngV), §§ 3, 4, 6, 11. https://www.gesetze-im-internet.de/pangv_2022/
- Barrierefreiheitsstärkungsgesetz (BFSG), §§ 1, 2, 3. https://www.gesetze-im-internet.de/bfsg/
- Bundesfachstelle Barrierefreiheit: Online-Shops. https://www.bundesfachstelle-barrierefreiheit.de/DE/Barrierefreiheitsstaerkungsgesetz/E-Commerce/online-shops_node.html