Produktseite auf dem Smartphone: 10 Details, die die Conversion beeinflussen

Die Produktseite auf dem Smartphone ist der Ort, an dem Kundinnen und Kunden entscheiden: „Kaufe ich oder nicht?“ Laut dem Produktseiten-Benchmark des Baymard Institute erreichen 48 % der Desktop-Versionen führender E-Commerce-Websites in den USA und Europa auf der Produktseite eine „akzeptable“ oder „gute“ Leistung; bei mobilen Websites sinkt dieser Anteil auf 38 %. Die Studie umfasst große, ausländische Websites, die gefundenen Probleme kommen aber bekannt vor: versteckte Größenauswahl, unklare Versand- und Rückgabeinformationen, Fotos ohne Größenvergleich.

In diesem Beitrag gehen wir zehn Details der Reihe nach durch. Zu jedem finden Sie, was die Forschung sagt, wie die SEPETYA-Produktseite darauf eingeht und was Sie tun sollten. Der Ehrlichkeit halber nennen wir auch ein, zwei Dinge, die die SEPETYA-Produktseite nicht leistet.

1. Größe und Farbe als Schaltflächen anzeigen

Bei vielen Produktarten ist die Größe die häufigste Auswahl vor dem Kauf. In einer Dropdown-Liste sind die Optionen verborgen, sodass Kundinnen und Kunden erst nach dem Öffnen sehen, dass ihre Größe nicht vorrätig ist. Nach Baymards Messung verwenden 57 % der Websites keine Schaltflächen für die Größenauswahl.

Im SEPETYA-Produktformular wird die Darstellung jeder Option auf „Schaltflächen“, „Dropdown-Liste“ oder „Farbmuster“ eingestellt; Standard sind Schaltflächen. Ein Farbmuster lässt sich per Farbcode oder kleinem Bild anlegen. Nicht vorrätige Werte erscheinen mit gestricheltem Rand und blasser Farbe und werden von Screenreadern als „nicht vorrätig“ vorgelesen; ungültige Kombinationen sind nicht wählbar. Der gewählte Wert steht neben dem Optionsnamen, und die Seitenadresse enthält die gewählte Variante: Teilt jemand den Link, sieht das Gegenüber dieselbe Variante.

Ihre Aufgabe: Stellen Sie Größen- und Maßoptionen auf „Schaltflächen“ und Farben auf „Farbmuster“ ein. Verwenden Sie die Dropdown-Liste nur für sehr lange Wertelisten.

2. Die Galerie für das Smartphone einrichten

Auf dem Smartphone wischen Kundinnen und Kunden mit dem Finger durch Fotos und vergrößern sie. In der SEPETYA-Galerie werden Bilder durch Wischen durchgeblättert und per Tippen oder Tastatur vergrößert; auf dem Desktop wählen Sie das Layout mit Miniaturen oder als Raster in der Theme-Einstellung „Galerie-Layout“. Wählt jemand eine Variante, rücken deren Bilder an den Anfang der Galerie. Der Galeriebereich hat ein festes Seitenverhältnis; beim Wechsel vom Foto zum Video springt die Seite nicht.

Aus jedem hochgeladenen Bild werden WebP- und AVIF-Versionen in Breiten zwischen 160 und 2560 Pixel erzeugt; der Browser wählt die passende für den Bildschirm. Da das Smartphone eine kleine Datei erhält, öffnet sich die Seite schneller; Sie laden nur ein ausreichend großes, scharfes Foto hoch.

Videos funktionieren auf zwei Arten. Hochgeladene Videos öffnen sich im eigenen Player des Browsers; sie starten nicht von selbst, solange Sie die Einstellung „Produktvideos stumm automatisch abspielen“ nicht aktivieren, und selbst dann nicht bei Besuchern, die reduzierte Bewegung gewählt haben. YouTube- und Vimeo-Videos werden erst beim Anklicken geladen; vor dem Abspielen geht keine Anfrage an einen Drittanbieter-Server. Baymard empfiehlt, zumindest für Bestseller sowie komplexe oder teure Produkte ein Produktvideo bereitzustellen.

3. Größenverhältnisse und Model zeigen

Da Kundinnen und Kunden das Produkt nicht in der Hand halten können, versuchen sie, seine Größe aus den Fotos abzulesen. In Baymards Tests versuchten 42 % der Nutzer, die Größe des Produkts aus den Produktbildern zu erschließen; 37 % der Websites bieten kein Bild, das die Größenverhältnisse zeigt, und 23 % zeigen getragene Produkte (Kleidung, Taschen, Schmuck, Uhren, Kosmetik) nicht an einem Model.

Ihre Aufgabe: Fügen Sie jedem Produkt mindestens ein Foto hinzu, das die Größenverhältnisse zeigt: in der Hand gehalten, an einem Model oder neben einem bekannten Gegenstand. Fügen Sie bei getragenen Produkten ein Modelfoto hinzu. Schreiben Sie die Maße zusätzlich in die Produktmerkmale; mit der Theme-Einstellung „Hervorgehobene Merkmale“ erscheinen sie in einer kurzen Liste über der Beschreibung.

4. Den Preis klar anzeigen

Auf der Produktseite stehen neben dem aktuellen Preis bei einem Rabatt der frühere Preis und der Rabattprozentsatz, bei einer Aktion der Aktionspreis und ein Badge. Verkaufen Sie nach Gewicht, Volumen oder Stückzahl, wird mit der Einheiteneinstellung im Produktformular auch der Grundpreis angezeigt; im Theme muss „Grundpreis anzeigen“ aktiv sein. Baymard berichtet, dass 81 % der Websites bei Produkten, die in unterschiedlichen Mengen verkauft werden, keinen Grundpreis zeigen; dabei müssen Kundinnen und Kunden rechnen, um eine 500-Gramm-Packung mit einer 1-Kilogramm-Packung zu vergleichen.

Den früheren Preis bei der Ankündigung eines Rabatts korrekt einzugeben, liegt in Ihrer Verantwortung. Einzelheiten zur Regel finden Sie in unserem Beitrag Ehrliche Dringlichkeit und echte Bestandshinweise.

5. Die mitlaufende Warenkorbleiste nutzen

Auf dem Smartphone ist die Produktseite lang: Galerie, Optionen, Beschreibung. Scrollt jemand nach unten, verschwindet die Schaltfläche „In den Warenkorb“ vom Bildschirm. SEPETYA zeigt in diesem Fall auf Bildschirmen bis 989 Pixel Breite (Smartphone und Tablet) eine unten fixierte Leiste: Produktname, aktueller Preis und die Schaltfläche „In den Warenkorb“. Die Leiste erscheint, sobald die eigentlichen Schaltflächen aus dem Bild verschwinden; sind die Optionen noch nicht gewählt, lautet die Schaltfläche „Optionen ansehen“ und führt zurück zum Kaufbereich.

Baymard empfiehlt, um eine mitlaufende „In den Warenkorb“-Schaltfläche ausreichend Abstand zu lassen und sie nicht über die volle Breite zu ziehen; die Schaltfläche in der SEPETYA-Leiste ist nicht vollbreit. Für diese Leiste müssen Sie nichts einstellen.

6. Bearbeitungszeit und Versandinformationen auf der Produktseite angeben

Laut Baymard geben 67 % der Websites auf der Produktseite keine Schätzung der gesamten Bestellkosten an. Erscheinen die Versandkosten auf der Produktseite gar nicht, können sie im Checkout überraschen, und nach Baymards Beobachtung brechen manche Kundinnen und Kunden die Bestellung deshalb ab.

SEPETYA berechnet und zeigt auf der Produktseite keine Versandkosten. Angezeigt wird, wenn der Bestand von einem Standort versendet wird, die Einstellung „Bearbeitungszeit“ dieses Standorts (etwa „Voraussichtliche Bearbeitungszeit: 2–4 Tage“); sie wird unter Bestand und Standorte › Standorte eingegeben, ist sie leer, erscheint nichts. Wie viel bis zur Schwelle für kostenlosen Versand fehlt, zeigt ein Fortschrittsbalken im Warenkorb. Um auf der Produktseite Versandinformationen zu geben, können Sie im Theme-Editor der Produktvorlage eine „Vorteilsleiste“ hinzufügen und einen eigenen Text wie „Kostenloser Versand ab X TL“ schreiben. Da Sie diesen Text von Hand schreiben, sorgen Sie selbst dafür, dass er nicht im Widerspruch zu Ihren Versandeinstellungen steht; bei der Festlegung der Versandkosten hilft unser Leitfaden Wie legen Sie die Versandkosten fest?

7. Rückgabeinformationen direkt auf der Seite platzieren

In Baymards quantitativer Studie suchen 60 % der Teilnehmenden die Rückgabeinformationen auf der Produktseite; 44 % der Websites zeigen oder verlinken die Rückgaberichtlinie nicht aus dem Hauptinhalt des Produkts. Auf dem Smartphone erfordert der Weg zur Rückgabeseite im Footer langes Scrollen; wird die Frage auf der Produktseite beantwortet, müssen Kundinnen und Kunden die Seite nicht verlassen.

SEPETYA zeigt auf der Produktseite neben Beschreibung und Merkmalen einen Tab (oder Akkordeon-Abschnitt) „Rückgabe und Umtausch“. Er enthält die Rückgabebedingungen, die Sie unter Kundeneinstellungen › Rückgaben geschrieben haben, die Frist für Rückgabeanfragen aus dem Konto („N Tage ab Zustellung“) und einen Link zur vollständigen Rückgaberichtlinie. Der Tab erscheint, wenn Sie Rückgabeinformationen hinterlegt haben oder eine Rückgabeseite existiert. Der Text ist Ihr eigener Inhalt; SEPETYA trifft keine Aussage über seine rechtliche Gültigkeit.

Ihre Aufgabe: Schreiben Sie die Rückgabebedingungen kurz und verständlich: wie viele Tage, in welchem Fall, wer die Versandkosten trägt. Zum Rahmen der Rückgaberechte lesen Sie unseren Beitrag Widerrufsrecht und Rückgaberichtlinie.

8. Ratenzahlungsoptionen ungefragt anzeigen

Wenn Sie Ratenzahlung anbieten, beantwortet die Anzeige auf der Produktseite die Frage, bevor jemand zum Warenkorb geht. SEPETYA bietet auf der Produktseite einen ausklappbaren Abschnitt „Ratenzahlungsoptionen“. Beim Öffnen werden je nach den Kartenprogrammen, die der Zahlungsanbieter für diesen Preis liefert, Zahl der Raten, Ratenbetrag und Gesamtsumme angezeigt; Summen mit Zinsaufschlag sind mit einem Sternchen markiert, und ein Hinweis darunter erklärt, dass der genaue Betrag im Checkout passend zur Karte angezeigt wird. Die Liste wird erst beim Öffnen geladen, damit der Anbieter nicht bei jedem Seitenaufruf abgefragt wird.

Der Abschnitt erscheint, wenn eine Kartenzahlungs-Erweiterung aktiv ist, die Raten abfragen kann (iyzico, PayTR); in den Einstellungen der Zahlungsseite unter Zahlungseinstellungen lässt er sich mit dem Schalter „Ratentabelle auf der Produktseite anzeigen“ ausschalten. Zu den Regeln für Ratenzahlung und Zinsaufschlag lesen Sie unseren Leitfaden Ratenzahlung und Zinsaufschlag.

9. Bewertungen zeigen und beantworten

Hat ein Produkt freigegebene Bewertungen, erscheinen unter dem Titel Durchschnittsbewertung und Anzahl der Bewertungen; ein Tippen führt zu den Bewertungen. 89 % der von Baymard untersuchten Websites antworten nicht auf negative Bewertungen; die Teilnehmenden werteten Antworten jedoch als Zeichen dafür, dass dem Unternehmen seine Kundschaft wichtig ist.

In SEPETYA beantworten Sie Bewertungen im Panel; die Antwort erscheint auf der Produktseite mit dem Label „Antwort des Shops:“ unter der Bewertung. Wie Bewertungen gesammelt, veröffentlicht und beantwortet werden, erklären wir in unserem Leitfaden zu Produktbewertungen.

10. Bei der Favoriten-Schaltfläche die Kontopflicht kennen

In Baymards Studie nutzen 21 % der Befragten „Speichern“-Funktionen, und eine Registrierungspflicht schreckt manche Nutzer ab. In SEPETYA sind Favoriten an das Kundenkonto gebunden: Tippt ein Besucher ohne Konto auf das Herz, wird er zur Anmeldeseite geleitet und kehrt danach zur selben Produktseite zurück. Für Besucher ohne Konto funktionieren Favoriten also nicht sofort.

Ihre Aufgabe: Halten Sie das Registrierungsformular in den Kundeneinstellungen kurz und nennen Sie den Nutzen eines Kontos klar (Bestellverfolgung, schneller Checkout, Favoriten). Ist im Checkout „Schnelle Registrierung beim Bezahlen“ aktiv, kann ein Gast im letzten Schritt der Bestellung ein Passwort festlegen und sein Konto anlegen.

Wo anfangen?

Sie müssen nicht alle zehn Punkte am selben Tag erledigen. Beginnen Sie mit dem, was in wenigen Minuten geht: die Darstellung der Optionen korrigieren, Rückgabebedingungen schreiben, Mindestbestandsschwelle und Bearbeitungszeit eingeben. Gehen Sie dann zu den Fotos über: Größen- und Modelfotos der fünf meistverkauften Produkte, danach Videos. Zum Schluss die aufwendigeren Aufgaben: Einheitenangaben und Merkmalstabellen für den gesamten Katalog.

Öffnen Sie nach jeder Änderung die Produktseite auf Ihrem eigenen Smartphone; wählen Sie wie eine Kundin oder ein Kunde eine Größe, wischen Sie durch die Galerie und legen Sie das Produkt in den Warenkorb. Wo Sie auf Ihrem Smartphone Mühe haben, hat Ihre Kundschaft sie auch.

Checkliste für die Produktseite auf dem Smartphone

• Größen- und Maßoptionen sind als „Schaltflächen“, Farben als „Farbmuster“ eingestellt.
• Jedes Produkt hat ein Foto, das die Größenverhältnisse zeigt; getragene Produkte haben zusätzlich ein Modelfoto.
• Wichtige Produkte haben ein Video mit Titelbild.
• Bei Produkten mit Grundpreis sind Einheit und Einheitenmenge festgelegt.
• Bestandsschwelle und Bearbeitungszeit spiegeln die tatsächliche Lage wider.
• Die Rückgabebedingungen sind kurz und verständlich geschrieben; auf der Produktseite erscheint der Bereich „Rückgabe und Umtausch“.
• Die Ratentabelle öffnet sich, und die Beträge stimmen mit dem Checkout überein.
• Die Produktseite wurde auf einem echten Smartphone getestet: Optionen, Galerie, mitlaufende Leiste und Favoriten-Schaltfläche.

Eine Produktseite auf dem eigenen Smartphone zu öffnen und wie eine Kundin oder ein Kunde durchzugehen, ist oft der schnellste Test. Zum Ausprobieren können Sie kostenlos starten.