Produktseite optimieren: Was oben stehen muss, wenn der Kunde am Handy kauft

In meinem Beitrag über die 15 Hebel für die Conversion Rate steht die Produktseite als Hebel 6, mit einem einzigen Absatz. Das hier ist die lange Fassung dazu. Die Beispiele kommen aus drei laufenden Projekten, die Zahlen aus frei lesbaren Artikeln des Baymard Institute.

Für den B2B-Shop eines Industrieherstellers haben wir vor dem Bau Kunden interviewt. Die Einkäufer wollten Maße, Referenznummer, Preis und Verfügbarkeit sehen, ohne zu scrollen. Ein Feinkosthändler wollte dagegen Zutaten und Allergene vollständig auf der Seite haben, aber erst unterhalb des Kaufbuttons.

Beide Wünsche führen eigentlich zur selben Frage, nämlich was oben stehen muss und was weiter unten warten darf. Weil die Antwort am Produkt hängt, gibt es hier eine Checkliste für B2C, eine für B2B und ein Beispiel, bei dem die Regel nicht passt.

1Was der Kunde am Handy sieht, bevor er scrollt

Baymard schreibt in der Übersicht zu seiner Produktseiten-Forschung, dass fast alle Nutzer vor einem Kauf über die Produktseite gehen und sich oft dort entscheiden. Das Institut hat dafür 344 Shops aus den USA und Europa verglichen und nur bei 49 % eine ordentliche oder gute Produktseite gefunden. Ich zitiere nur, was davon frei lesbar ist.

Am Handy ist der erste Bildschirm klein. Ist das Produktbild quadratisch oder hochkant angelegt, bleibt darunter nach meiner Erfahrung oft nur Platz für den Titel. Preis und Button rutschen dann aus dem Bild. Meine Arbeitshypothese für viele Sortimente ist deshalb, dass die Angaben für die Kaufentscheidung nach oben gehören und die Tiefe darunter.

Das passt, wenn Deine Kunden nach Fakten entscheiden, also nach Maßen, Preis, Verfügbarkeit oder Lieferzeit. Es reicht nicht, wenn das Produkt erst erklärt werden muss. Ein Beispiel dafür steht in Abschnitt 4.

Eine Pixelzahl für „oben“ nenne ich bewusst nicht, weil Handys ja unterschiedlich hoch sind und die Leisten des Browsers je nach Gerät unterschiedlich viel Platz wegnehmen. Verlässlicher ist der Test am eigenen Gerät. Öffne mal drei Deiner meistverkauften Produkte am Handy, am besten über einen Link aus einem Newsletter oder einer Anzeige, und schau, was Du siehst, bevor Du scrollst. Die Vorschau im Theme-Editor ersetzt das nicht, weil dort die Leisten des Browsers fehlen.

2Checkliste für den ersten Bildschirm im B2C-Shop

Die Liste ist für Produkte gedacht, bei denen der Kunde ungefähr weiß, was er sucht. Geh sie am Handy durch und hak ab, was Du ohne Scrollen siehst.

• Ein Produktbild, das den Bildschirm nicht allein füllt.
• Ein Titel, der sagt, was das Produkt ist, und möglichst kurz bleibt.
• Der Preis, bei Ware nach Gewicht, Volumen oder Länge mit dem Grundpreis direkt daneben.
• Der Hinweis auf Mehrwertsteuer und Versandkosten am Preis.
• Die Variantenauswahl, in der ausverkaufte Varianten erkennbar sind.
• Verfügbarkeit und Lieferzeit, am besten in einer Zeile.
• Der Kaufbutton, oder wenigstens sein oberer Rand.

Alles zusammen passt selten auf einen Bildschirm, dann musst Du entscheiden, was nach unten darf. Ich gebe Preis, Verfügbarkeit und Button dann den Vorrang vor einem größeren Bild. Gemessen habe ich das nicht, es ist eine Abwägung.

Im laufenden Relaunch eines Feinkosthändlers haben wir Ende September im Design-Feedback festgelegt, wie diese Stelle aussehen soll. Die Bilder werden auf die Höhe des Bildschirms begrenzt, so bleibt am Handy Platz für das, was darunter steht. Die Leiste mit Ankündigungen über dem Shop entfällt. Hinweise wie „nur Abholung“ stehen stattdessen beim jeweiligen Produkt neben dem Warenkorb-Button. Das ist der Stand der Planung, denn der neue Shop ist noch nicht live. Zahlen zur Wirkung habe ich deshalb keine.

Für den Platz am Button gibt es auch Befunde von Baymard. In den Tests des Instituts haben bis zu 27 % der Nutzer den Hinweis auf kostenlosen Versand übersehen oder lange gesucht, wenn er nur im Banner über der Seite stand. Baymard empfiehlt deshalb, solche Hinweise in die Nähe des Kaufbereichs zu setzen. In einer zweiten Auswertung haben 64 % der Testpersonen schon auf der Produktseite nach Versandinformationen gesucht, bevor sie etwas in den Warenkorb legten. Beide Artikel sind von 2017, der erste wurde mit Vergleichsdaten von 2025 ergänzt. Ein Satz mit Deinen Versandkosten direkt am Preis beantwortet die Frage an der Stelle, an der sie auftaucht.

3Im B2B-Shop stehen andere Angaben oben

Im B2B-Shop kann der erste Bildschirm ganz anders aussehen. Aus den Interviews für den B2B-Shop des Industrieherstellers habe ich mitgenommen, dass diese Kunden vier Angaben sofort sehen wollten, nämlich Maße, Referenznummer, Preis und Verfügbarkeit. Das ist erstmal die Erfahrung aus einem Projekt. Sie deckt sich aber mit dem, was Baymard allgemein über Produktbeschreibungen schreibt. Fehlen Maße oder Angaben zur Kompatibilität, verlassen Nutzer das Produkt schnell oder treffen falsche Annahmen.

Für einen B2B-Shop mit technischen Produkten würde ich deshalb mit dieser Liste anfangen.

• Artikelnummer oder Referenznummer, gut lesbar und als Text kopierbar.
• Maße und die wichtigsten technischen Werte als kurze Liste.
• Der Preis, der für diesen Kunden gilt, mit der Angabe, ob er netto ist.
• Bestand oder Lieferzeit.
• Mindestmenge und Verpackungseinheit, falls es sie gibt.
• Mengenfeld und Button.

In Shopify kommt die Artikelnummer aus dem Feld SKU der Variante. Aktuelle Versionen von Dawn haben dafür einen eigenen Block in den Produktinformationen. Maße und technische Werte legst Du als Metafelder an und verbindest sie im Theme-Editor über eine dynamische Quelle mit einem Block der Produktseite. In Themes der Generation Online Store 2.0 geht das ohne Code, ältere Themes brauchen dafür eine Anpassung.

Bei Mindestmengen schreibt Shopify in der Hilfe zu Mengenregeln selbst, dass Dein Theme das Minimum auf der Produktseite zeigen sollte. Prüf das am Handy, bevor Du Mengenregeln einführst. Welche B2B-Funktionen inzwischen in den Tarifen ohne Plus stecken, steht im Beitrag zur Migration.

4Tabs, Akkordeon oder offener Text

Was nicht oben steht, braucht trotzdem einen Platz. Üblich sind horizontale Tabs, eingeklappte Abschnitte untereinander, also ein Akkordeon, oder offener Text zum Durchscrollen.

Zu den Tabs gibt es einen frei lesbaren Artikel von Baymard, zuletzt im Juli 2026 aktualisiert. Danach nutzen 29 % der untersuchten Shops horizontale Tabs für die Hauptabschnitte der Produktseite. In den Tests haben Nutzer Inhalte in den Tabs wiederholt übersehen. Am Handy kommt dazu, dass die Tabs seitlich aus dem Bild laufen oder man nach dem Lesen wieder nach oben muss. Baymard empfiehlt für das Handy eingeklappte Abschnitte untereinander und für den Desktop offene Abschnitte.

In Shopify musst Du dafür meist nichts bauen. Dawn hat in den Produktinformationen einen Block für einklappbare Zeilen („Collapsible row“). Viele Themes aus dem Theme Store haben etwas Vergleichbares, schau also erstmal im Theme-Editor nach, bevor Du eine App suchst. Den Inhalt je Produkt ziehst Du aus einem Metafeld, sonst steht in jedem Akkordeon derselbe Text.

Wann der Text offen stehen sollte

Im Relaunch des Feinkosthändlers passt die Regel aus Abschnitt 1 nicht. Dort steht der Produkttext offen auf der Seite und nicht in einem Akkordeon, weil diese Produkte erklärt werden müssen. Die Akkordeons darunter unterscheiden sich je Produkttyp, also für Einzelprodukte, Bundles, Käseboxen und Events. Icons entfallen, die enthaltenen Sorten werden direkt aufgelistet. Die Geschichten der Produzenten liegen zentral in einem Metaobjekt und werden von dort in die Produktseiten gezogen.

Zutaten und Allergene wollte der Händler vollständig auf der Seite haben, aber unterhalb des Kaufbuttons. Bei Lebensmitteln ist das auch eine Rechtsfrage, denn die Pflichtangaben müssen vor dem Kauf gut sichtbar und lesbar sein. Die IT-Recht Kanzlei berichtet von einer Abmahnung, bei der eine Angabe nur im vergrößerten Produktbild zu lesen war. Ob ein zugeklapptes Akkordeon genügt, sagt der Artikel nicht. Klär das mit Deinem Anbieter für Rechtstexte, bevor Du Pflichtangaben einklappst.

5Lieferzeit, Preisangaben und Hinweise am Kaufbutton

Ein Teil dessen, was oben steht, ist rechtlich vorgegeben. Ich bin kein Anwalt, die folgenden Punkte ersetzen deshalb keine Rechtsberatung.

Lieferzeit

Nach Art. 246a EGBGB musst Du Verbraucher vor der Bestellung über den Termin informieren, bis zu dem Du lieferst. Die IT-Recht Kanzlei empfiehlt, die Angabe direkt auf die Produktseite zu setzen, und nennt Formulierungen wie „ca. 2-4 Werktage“ als zulässig. Zusätze wie „in der Regel“ oder „voraussichtlich“ führt sie als unzulässig auf. Der Artikel ist von 2020, prüf also den aktuellen Stand.

Eine Standardfunktion von Shopify, die hierzulande eine Lieferzeit am Produkt anzeigt, habe ich nicht gefunden. Shop Promise zeigt zwar Lieferdaten auf der Produktseite, gilt laut Hilfe aber nur für Inlandsbestellungen in den USA. Ein Weg ohne App ist ein Metafeld für die Lieferzeit, das Du über eine dynamische Quelle neben den Button setzt. Haben alle Produkte dieselbe Lieferzeit, reicht ein fester Text im Theme. Apps wie NS Estimated Delivery Date berechnen ein Lieferdatum. Getestet habe ich sie nicht, naheliegend sind sie eher bei mehreren Lagern oder einem Annahmeschluss am Tag.

Grundpreis und Steuerhinweis

Verkaufst Du nach Gewicht, Volumen oder Länge, gehört der Grundpreis zum Preis. Der BGH hat 2022 entschieden, dass er so nah am Gesamtpreis stehen muss, dass man beide auf einen Blick wahrnimmt. Der Händlerbund weist darauf hin, dass das überall gilt, wo ein Preis steht, also auch in der Kategorieansicht und in den Suchergebnissen. Shopify zeigt den Grundpreis laut Hilfe in Themes der Generation Online Store 2.0 automatisch auf Produktseite, Kollektionsseite, im Warenkorb und im Checkout, sobald Du ihn am Produkt hinterlegt hast.

Beim Hinweis auf Mehrwertsteuer und Versandkosten ist der Spielraum größer. Der BGH hat 2007 entschieden, dass der Hinweis auch auf einer nachgeordneten Seite stehen darf, auf die ein eindeutiger Link führt. Er muss aber da sein, bevor die Ware im Warenkorb liegt.

Ein Fachhändler, dessen Shop ich gerade zu Shopify umziehe, wollte den Hinweis im Produktraster weglassen, weil große Shops das auch tun. Das Urteil von 2007 lässt für das Weglassen im Raster Raum, solange der Hinweis auf der Produktseite steht. Der Grundpreis muss aber auch im Raster stehen. Ich erzähle das als Beispiel für den Zielkonflikt zwischen einem ruhigen Raster und vollständigen Angaben, eine Empfehlung ist es nicht.

Abholung und Gewährleistungslabel

Bietest Du Abholung an, kann Shopify die Verfügbarkeit im Laden direkt am Produkt zeigen. Die Funktion heißt Pickup Availability. Dawn und Horizon führen die Abholung im Geschäft in ihren Funktionslisten im Theme Store, sie muss nur für den Standort aktiviert sein. Seit dem 27. September gibt es außerdem das Gewährleistungslabel. Wo es in Shopify hin muss, steht im Beitrag dazu.

6Badges, Express-Buttons und der mitlaufende Kaufbutton

Badges

Badges sind die kleinen Etiketten wie „Neu“ oder „Sale“ am Bild oder am Preis. Im Design-Feedback des Fachhändlers gab es dazu klare Wünsche, die ich hier als Beispiel nenne. Status-Badges wie Neu, Ausverkauft oder Vorbestellbar sollen auf der Produktseite gar nicht erscheinen. Angaben wie Einzelstück oder Rarität stehen als Text unter Inhalt und Menge. Die Kartensymbole unter dem Warenkorb-Button werden in die Farbwelt des Shops eingefärbt.

Wie ich selbst mit Badges umgehe, ist Erfahrung, eine Zahl habe ich dazu nicht. Ein Badge in der Farbe des Kaufbuttons konkurriert ja mit dem Button, deshalb gebe ich ihm eine ruhigere Farbe. Die Texte sollten in der Sprache des Shops stehen, bei Badges aus Apps musst Du das meist in der App selbst einstellen.

Express-Buttons

Shop Pay, PayPal oder Apple Pay direkt auf der Produktseite sind in Shopify Standard. Du kannst die Buttons ein- oder ausblenden, an den Marken-Buttons selbst aber nichts gestalten. Wer so kauft, überspringt den Warenkorb und kann laut Hilfe nur eine Variante eines Produkts auf einmal kaufen.

Beim Feinkosthändler verschwinden die Buttons von der Produktseite und bleiben im Checkout. Dafür spricht, dass der Express-Kauf den Warenkorb überspringt und damit alles, was dort an Hinweisen und Ergänzungen steht. In meinem Beitrag zur Conversion Rate nenne ich die Express-Buttons auf der Produktseite als Möglichkeit. Beides kann stimmen. Ob sie bei Dir nützen oder stören, lässt sich mit einem A/B-Test klären, wenn Dein Traffic dafür reicht.

Mitlaufender Kaufbutton

Bleibt der Text offen und die Seite lang, kann ein Kaufbutton helfen, der beim Scrollen am unteren Rand stehen bleibt. In den Funktionslisten von Dawn und Horizon im Theme Store habe ich ihn nicht gefunden (Stand 5. Oktober 2026). Manche gekauften Themes haben ihn aber schon eingebaut, schau also zuerst in die Einstellungen Deiner Produktseite. Sonst gibt es Apps wie STKY, laut App Store kostenlos bis 25 Klicks im Monat und danach ab 6,99 US-Dollar monatlich. Jede App lädt zusätzliches Skript. Außerdem kann ein mitlaufender Button am Handy das Cookie-Banner oder ein Chat-Symbol überdecken, prüf das also am eigenen Gerät, bevor Du die App behältst.

Für die Bestandsanzeige hat Dawn den Block „Inventory status“ mit einer einstellbaren Schwelle für niedrigen Bestand. Wann statt Bordmitteln ein angepasstes oder eigenes Theme nötig wird, habe ich an anderer Stelle beschrieben.