Webdesign, E-Commerce

Mehr Produkte verkaufen – Tipps für eine optimale Produktseite

6 wichtige Tipps, die du einfach umsetzen kannst, um die Produktseite deiner E-Commerce Webseite zu optimieren.

Eine E-Commerce Webseite zeigt eine Kaffeemaschine.

Egal, ob du mit deinem neuen Online-Shop starten oder deinen bestehenden Shop weiter optimieren möchtest. Durch gestalterische Designelemente und einen durchdachten Aufbau einer Produktseite kannst du den Verkauf deiner Produkte ankurbeln.

Im folgenden habe ich dir effektive Tipps anhand von Beispielen aufgeführt, die du für deine Produktseite Schritt für Schritt anwenden kannst. 

Verwende hochwertige Produktbilder

E-Commerce Webseite  ProperCloth.
www.propercloth.com

Das wichtigste Designelement deiner Produktseite sind hochwertige Produktfotos. Kunden möchten vor allem sehen, was sie kaufen. In der Regel ist das Bild eines Produktes der entscheidende Faktor, um eine Kaufentscheidung zu treffen. Mit realitätsnahen Fotos kannst du Kunden eine bestmögliche Vorstellung deines Produktes bieten. 

Produktbilder sollten daher möglichst prominent und weit oben auf der Produktseite platziert werden. So müssen Kunden nicht scrollen, um das Produkt zu sehen. Diesen Bereich einer Webseite nennt man auch „Above the fold“.

Weitere hilfreiche Tipps, auf die du bei deinen Produktbildern achten solltest: 

  • Nutze nur hochwertige Produkfotos am besten von einem professionellen Fotoshooting
  • Zeigen deine Produkte aus verschiedenen Blickwinkeln
  • Zeige verschiedene Varianten deines Produktes (Beispiel: Bei Auswahl anderer Farbe ändert sich entsprechend das Produktfoto)
  • Zeige deine Produkte im Einsatz (Beispiel: Ein Model trägt ein T-Shirt)

Verwende klare Preise

E-Commerce Webseite AESOP Wines.
www.aesopwines.com

Neben den Produktbildern ist der Preis bei E-Commerce Webseiten eines der wichtigsten Elemente. Wenn sich Kunden für ein Produkt interessieren, wollen sie natürlich auch wissen, was dieses kostet. Ohne einen eindeutigen Preis sehen zu können, werden Websitebesucher keinen Kauf tätigen.

Daher sollte der Preis visuell ebenfalls weit oben auf der Produktseite platziert werden. Lass deine Kunden nicht lange suchen! Eine gute Position für den Preis ist direkt unter dem Produkttitel und in der Nähe der Call-to-Action Buttons.

Weitere Tipps um den Preis prominent zu gestalten:

  • Verwende eine Schriftfarbe mit genug Kontrast zum Hintergrund
  • Verwende eine grössere Schriftgrösse als deine „Standard Schriftgrösse“
  • Nutze Rabattanzeigen: Der ursprüngliche Preis ist durchgestrichen und ein neuer günstigerer Preis wird daneben angezeigt

Verwende informative Produktbeschreibungen

E-Commerce Webseite cubitts.
www.cubitts.com

Produktbeschreibungen helfen dem Kunden das Produkt genauer zu verstehen und liefern wichtige Details. Daher sollte die Beschreibung informativ sein und die relevantesten Fakten in wenigen Sätzen auf den Punkt bringen. 

Prägnante Produktbeschreibungen unterstützen Produktfotos in ihrer Funktion. In dem Text kannst du wichtige Vorteile des Produktes beschreiben und den Kunden so von einem Kauf überzeugen. Die Beschreibung sollte ähnlich wie der Titel und der Preis weit oben auf der Produktseite platziert  werden.

Längere detailliertere Beschreibungen können auf den ersten Blick ausgeblendet oder weiter unten auf der Seite platziert werden. Weitere Informationen zum Material, Herstellung, Pflege oder Anwendung werden oft mit Accordion-Elementen platzsparend auf und zu geklappt.

Verwende auffordernde Calls-to-Action

E-Commerce Webseite Red Rooster Coffee.
www.redroostercoffee.com

Der Call-to-Action (CTA) ist ebenfalls eines der wichtigsten Elemente auf einer Produktseite. In der Regel ist es eine Art Button oder Link, welches den Nutzer zu einer Handlung auffordert. Im Fall eines Online-Shops soll damit also ein Produkt in den Warenkorb gelegt oder direkt gekauft werden.

Wegen seiner Bedeutung ist der CTA oft weit oben oder unterhalb der grundlegenden Produktinformationen platziert. So müssen Besucher nicht lange danach suchen. 

Der Call-to-Action sollte zu einer eindeutigen Handlung auffordern, wie zum Beispiel: „In den Warenkorb“, „Jetzt kaufen“ oder „Zum Checkout“. Verwende daher eine klare Benamung des CTAs. Der Kunde muss eindeutig erkennen, welche Aktion er mit dem Klick auf die Schaltfläche ausführt.

Der CTA sollte auf jeden Fall auch als solcher erkennbar sein. Nimm dir deshalb die Zeit, um den Button oder Link richtig zu gestalten. Verwende für das Design eine auffallende oder kontrastreiche Farbe, damit der Call-to-Action direkt ins Auge springt. Auf Smartphones sollte die Schaltfläche gross genug sein, um mit dem Finger angeklickt zu werden. 

Verwende Social-Proof und Produktfeatures

E-Commerce Webseite goaro.com
www.goaro.com

Der Social-Proof ist eines der wichtigsten Elemente auf E-Commerce Seiten, um Kunden zu überzeugen, einen Kauf zu tätigen. Social-Proof basiert auf einem psychologischen Effekt. Menschen neigen eher dazu, etwas zu tun, wenn es vorher schon jemand anders getan hat oder eine Mehrheit vormacht. 

Ein Beispiel: Wenn wir ein gut besuchtes Restaurant sehen, denken wir automatisch, dass das Essen hier gut sein muss, ohne vorher ein Blick in die Speisekarte zu werfen. Das gleiche Prinzip lässt sich auch auf Online-Shops anwenden. In den meisten Fällen sind es Kundenrezessionen mit Sterne-Bewertungen. So können Besucher sehen, wie gut ein Produkt bei anderen Kunden ankommt und fassen automatisch schneller Vertrauen. 

Andere Social-Proof Elemente können bekannte Marken-Logos, Meinungen von Experten oder vertrauenswürdige Siegel sein.  

Verwende hilfreiche Produktempfehlungen

E-Commerce Webseite Houseplant.
www.houseplant.com

Produktempfehlungen sind ein effektives Werkzeug, um den Besucher länger auf deiner Webseite zu halten. Wenn Kunden einen Artikel in den Warenkorb gelegt haben, gehen sie oft direkt zur Kasse oder verlassen die Seite wieder. Mit einer gezielten Produktempfehlung zu ähnlichen anderen Artikeln lassen sich Kunden vielleicht sogar zum Kauf von weiteren Produkten verleiten. 

Beispiel: Wer kennt das nicht? Eigentlich wolltest du nur eine bestimmtes YouTube Video ansehen. Doch auf der rechten Spalte werden lauter weitere spannende Themen angezeigt. Kurz mal nicht aufgepasst, und man hat eine weitere Stunde damit verbracht, andere Videos anzuschauen. 

Produktempfehlungen sind kein Muss. Sie können aber eine hilfreiche Nutzererfahrung sein und das Einkaufserlebnis der Kunden verbessern. Die Empfehlungen sind meinst am unteren Ende einer Produktseite platziert.  

Verwende einen konsistenten Design-Style

E-Commerce Webseite Apple.
www.apple.com

Der Design-Style deines Online-Shops hat nicht direkt etwas mit den Produkten zu tun. Allerdings hat das Design deiner Webseite einen Einfluss auf die Kaufentscheidung der Kunden. Die besten Produkte bringen dir nichts, wenn diese schlecht auf der Webseite präsentiert werden. 

Beispiel: Das Design von Apple Webseiten wirkt minimal, gleichzeitig hochwertig und überzeugt mit aussergewöhnlichen Animationen. Die Webseite spiegelt das hochwertige Aussehen der Apple-Produkte und der Marke wieder. Durch diesen konsistenten und überzeugenden Einsatz des Design-Styles wird bei Website-Besuchern schneller vertrauen aufgebaut.

Hier sind ein paar Tipps für einen konsistenten Design-Style, die du einfach anwenden kannst: 

  • Farbpalette: Verwende einheitliche Farben
  • Schriftart: Verwende eine einheitliche Schriftart (maximal 2 verschiedene)
  • Schriftgrössen: Verwende übergreifende Grössen (H1, H2, H3, etc.)
  • Button-Style: Verwende einen einheitlichen Style für deine Buttons und Links 
  • Abstände: Achte auf einheitliche Abstände und genug Weissraum
  • Bildgrössen: Nutze einheitliche Bildgrössen für bestimmte Bildtypen
  • Icon-Style: Achte auf einen einheitlichen Style und Grössen von Icons

Du benötigst individuelle Hilfe bei der Optimierung deines Online-Shops? Kontaktiere mich gerne und ich berate dich kostenlos.

Weitere Hilfreiche Artikel:

6 Tipps für den optimalen Aufbau deiner Landingpage

Portrait von Lukas Rudrof, Webflow Designer aus Nürnberg.

Lukas Rudrof

November 22, 2022

Du hast Fragen oder benötigst Hilfe bei deinem Projekt?