Die Startseite ist keine Galerie und keine Broschüre. Sie ist ein Wegweiser. Ihre einzige Aufgabe ist, den richtigen Besucher so schnell wie möglich zum richtigen Produkt zu bringen. Jede Designentscheidung auf der Startseite sollte diesem Ziel dienen.
Dieser Artikel zeigt, wie du die Startseite eines Onlineshops gestaltest, die funktioniert. Was hineingehört, was draussen bleibt, welche Fehler Conversions töten und wie du das Layout auf dem Smartphone denkst, wo die meisten deiner Käufer stöbern.
Wenn du das ganze Bild sehen willst, welche Seiten dein Shop braucht, starte mit Welche Seiten jeder Onlineshop braucht.
Wofür ist die Startseite eigentlich da?
Die Startseite bedient Besucher, die sich noch nicht entschieden haben. Sie wissen etwas über deine Marke oder haben dich über Suche oder Social Media gefunden, aber sie haben sich noch nicht zum Kauf entschlossen. Die Startseite ist der Moment, in dem sie herausfinden, ob sie weitergehen.
Sie muss drei Fragen sofort beantworten. Was verkauft dieser Shop? Ist er für jemanden wie mich? Was soll ich als Nächstes tun? Ist eine dieser Antworten unklar, gehen Besucher. Nicht, weil deine Produkte schlecht sind, sondern weil die Startseite ihnen keinen Grund zum Bleiben gegeben hat.
So gestaltest du den Hero-Bereich
Der Hero-Bereich ist das Erste, was ein Besucher sieht. Er liegt im sofort sichtbaren Bereich, bevor man scrollt, und trägt den Grossteil des ersten Eindrucks.
Ein starker Hero-Bereich hat vier Elemente. Eine Überschrift, die in schlichter Sprache nennt, was du verkaufst. Eine kurze unterstützende Zeile, die Kontext ergänzt, oft ein wichtiger Nutzen oder Unterschied. Ein Bild, das das Produkt oder das Ergebnis zeigt, das es schafft. Und ein einzelner Call-to-Action-Button, der dem Besucher genau sagt, wohin er gehen soll.
Die Überschrift ist das wichtigste Stück. Halte sie konkret. "Handgemachte Ledertaschen für den Alltag" funktioniert. "Wo Handwerk auf Funktion trifft" nicht. Käufer überfliegen schnell. Muss man deine Überschrift deuten, hast du sie schon verloren.
Der CTA-Button sollte ein Ziel nennen, kein Gefühl. "Taschen ansehen" oder "Neuheiten entdecken" funktioniert. "Mehr entdecken" oder "Jetzt erkunden" nicht. Gib dem Besucher eine Richtung, keinen Vorschlag.
Dein Hero-Bild sollte das Produkt klar zeigen. Lifestyle-Bilder funktionieren gut, wenn das Produkt Kontext braucht, um Sinn zu ergeben, etwa bei Kleidung oder Haushaltswaren. Reine Produktbilder funktionieren besser, wenn Klarheit wichtiger ist als Wunschbild, etwa bei Werkzeug oder Elektronik. Nutze hochwertige Bilder. Ein unscharfer oder schlecht beleuchteter Hero-Bereich untergräbt alles andere.
Was du unter dem Hero-Bereich zeigst
Sobald ein Besucher am Hero-Bereich vorbeiscrollt, sucht er konkretere Gründe zu bleiben. Dieser Abschnitt der Startseite sollte Produkte oder Kategorien zeigen, die zu dem passen, was deine Käufer am wahrscheinlichsten wollen.
Versuche nicht, alles zu zeigen. Wähle deine Bestseller, deine Produkte mit der höchsten Marge oder die Kategorie, in der die meisten deiner Käufer landen. Drei bis sechs hervorgehobene Produkte sind ein vernünftiger Bereich. Mehr wirkt bald überladen und führt zu Entscheidungslähmung.
Kategorieblöcke funktionieren gut bei Shops mit breitem Sortiment. Statt einzelner Produkte zeige die drei oder vier wichtigsten Kategorien mit je einem klaren Bild und einer Beschriftung. Lass Käufer selbst den richtigen Bereich des Shops wählen.
Der hervorgehobene Bereich sollte auch dynamisch sein. Wechsle saisonale Produkte, Angebote oder Neuheiten ein. Eine Startseite, die sich nie ändert, gibt wiederkehrenden Besuchern keinen Grund zu scrollen.
So nutzt du Social Proof auf der Startseite
Käufer vertrauen anderen Käufern mehr als Shops. Social Proof auf der Startseite baut Glaubwürdigkeit auf, bevor ein Besucher eine Produktseite erreicht.
Die wirksamsten Formen von Social Proof auf der Startseite sind kurze Kundenbewertungen oder Sternebewertungen, eine Zahl der Kunden oder versendeten Bestellungen, Presseerwähnungen oder Medienlogos und Vertrauenssiegel von Dritten wie Symbole für sichere Zahlung oder anerkannte Zertifizierungszeichen.
Halte es knapp. Ein oder zwei starke Kundenstimmen wirken besser als eine Wand aus Fünf-Sterne-Bewertungen. Ein einzelnes Presselogo eines bekannten Mediums bewirkt mehr als eine Liste aus zehn unbekannten Namen. Wähle den Beleg, der für den Käufer am meisten bedeutet, der beim ersten Kauf bei dir am skeptischsten ist.
Solltest du einen Abschnitt mit der Markengeschichte einbauen?
Ein kurzer Abschnitt mit der Markengeschichte auf der Startseite ist optional, hilft aber in bestimmten Fällen. Er funktioniert am besten, wenn die Geschichte des Gründers ein Grund ist, warum ein Käufer diese Marke gegenüber einem grösseren Anbieter wählen würde. Handgemachte Waren, ethische Beschaffung, Marken mit Community-Gedanken und von Gründern geführte Produkte profitieren alle von einem kurzen menschlichen Moment auf der Startseite.
Wenn du einen einbaust, halte ihn kurz. Zwei oder drei Sätze und ein Link zur vollständigen Über-uns-Seite genügen. Platziere ihn weder im sofort sichtbaren Bereich noch über den hervorgehobenen Produkten. Die Geschichte bringt Wärme, aber Produkte treiben Entscheidungen.
Bei Shops, in denen das Produkt für sich steht, lass den Abschnitt aus. Eine Seite, die Massenware verkauft, braucht keine Entstehungsgeschichte. Nutze den Platz stattdessen für mehr Produkte.
Was die Startseite nicht braucht
Unordnung auf der Startseite schadet so sehr wie ein fehlender Abschnitt. Jedes Element, das keine Aufgabe erfüllt, nimmt Aufmerksamkeit von etwas weg, das es tut.
Häufige Fehler auf Startseiten sind zu viele Calls-to-Action auf derselben Ebene, automatisch startende Videos oder Animationen, die die Seite verlangsamen, grosse Textblöcke, die niemand liest, ein Navigationsmenü mit mehr als sechs oder sieben Punkten und Pop-ups, die erscheinen, bevor der Besucher Zeit hatte, etwas zu sehen.
Jede zusätzliche Wahl, die du einem Besucher aufzwingst, kostet ein bisschen Reibung. Die Startseite sollte klar wirken, nicht voll. Kannst du dich zwischen zwei Elementen nicht entscheiden, entferne das, das nicht direkt damit zu tun hat, einen Besucher zu einem Produkt zu bringen.
Mobiles Design der Startseite
Mehr als die Hälfte des gesamten E-Commerce-Traffics kommt von Mobilgeräten. Das Design deiner Startseite sollte mobil zuerst gebaut sein, nicht nachträglich vom Desktop angepasst.
Mobil sollte die Hero-Überschrift so kurz sein, dass man sie in zwei Zeilen liest. Der CTA-Button sollte gross genug zum leichten Antippen sein. Produktbilder sollten sich sauber in einer Spalte stapeln. Die Navigation sollte sich zu einem Menü zusammenklappen, das den Bildschirm nicht dominiert.
Teste jede Änderung an der Startseite auf einem Smartphone, bevor du sie veröffentlichst. Was auf einem Desktop-Monitor sauber aussieht, kann auf einem kleinen Bildschirm zu einem verwirrenden Scrollen werden. Das Käufererlebnis mobil ist deine wichtigste Gestaltungsvorgabe, kein nachträglicher Gedanke.
Auch Klarheit beim Versand zählt mobil. Käufer auf Smartphones stehen oft kurz vor einer Kaufentscheidung. Ein sichtbares Banner mit Schwellenwerten für kostenlosen Versand oder voraussichtlicher Lieferung auf der Startseite kann aus einer Stöber-Sitzung eine Kauf-Sitzung machen. Mehr zum Einrichten des Versands für deinen Shop findest du unter So richtest du den Versand für deinen Onlineshop ein.
Wie WEMASY die Gestaltung der Startseite unterstützt
Das E-Commerce-System von WEMASY enthält Werkzeuge für das Layout der Startseite, die für Onlineshops gebaut sind. Hero-Bereiche, Raster mit hervorgehobenen Produkten, Kategorieblöcke und Abschnitte für Social Proof sind ohne eigenen Code verfügbar. Dasselbe System übernimmt das mobile Layout automatisch.
Auf der Seite WEMASY-Preise siehst du, welche Werkzeuge für Startseite und Shop in welcher Stufe verfügbar sind.
Häufig gestellte Fragen
Wie viele CTAs sollte eine Startseite haben?
Einen primären CTA im sofort sichtbaren Bereich, danach weiter unten auf der Seite sekundäre CTAs, die zu bestimmten Abschnitten gehören. Der primäre CTA sollte die wichtigste Aktion sein, die ein Erstbesucher ausführen soll, meist "Jetzt shoppen" oder ein Link zu einer bestimmten Kategorie. Konkurrierende primäre CTAs mit gleichem visuellem Gewicht verwässern die Aufmerksamkeit und senken die Klicks auf alle. Mit dem Website-Builder von WEMASY richtest du das direkt in deinem Shop ein.
Sollte ich Preise auf der Startseite zeigen?
Nicht unbedingt auf der Startseite selbst, aber Preise auf den hervorgehobenen Produktkarten sind hilfreich. Käufer überfliegen Preisspannen, um zu prüfen, ob ein Shop in ihr Budget passt. Preise bis zur Produktseite zu verbergen, erzeugt Reibung und kann ausweichend wirken. Sind deine Produkte hochpreisig, setzt ein Startpreis die Erwartungen positiv, statt eine Überraschung zu erzeugen.
Wie oft sollte ich die Startseite aktualisieren?
Aktualisiere hervorgehobene Produkte und saisonale Abschnitte, wenn du Neuheiten hast, eine Aktion läuft oder sich saisonal ändert, wonach Käufer suchen. Der Hero-Bereich kann länger stabil bleiben, aber erneuere ihn, wenn sich dein Hauptangebot oder deine Positionierung ändert. Eine Startseite, die ein ganzes Jahr gleich aussieht, signalisiert einen Shop, der nicht aktiv ist.
Beeinflusst die Ladegeschwindigkeit der Startseite den Umsatz?
Ja. Eine Startseite, die mobil länger als drei Sekunden lädt, verliert einen erheblichen Teil der Besucher, bevor sie etwas sehen. Grosse, nicht komprimierte Bilder sind die häufigste Ursache. Komprimiere Bilder vor dem Hochladen, verzichte auf automatisch startende Videos im Hero-Bereich und begrenze Skripte von Drittanbietern. Das Tempo ist eine Gestaltungsentscheidung der Startseite, nicht nur eine technische.
Sollte die Startseite auf jede Produktkategorie verlinken?
Nicht unbedingt. Verlinke die Kategorien, die die meisten deiner Käufer wollen. Ein Navigationsmenü kann die vollständige Liste der Kategorien tragen. Der Hauptteil der Startseite sollte die Kategorien zeigen, die die meisten Conversions bringen oder die du priorisieren willst. Alles zu verlinken erzeugt visuelles Rauschen und verwässert die Seiten, auf die es am meisten ankommt.
Wo gehören Vertrauenssiegel auf der Startseite hin?
In die Nähe des Hero-Bereichs, nahe am CTA, oder in eine eigene Vertrauensleiste zwischen Hero-Bereich und hervorgehobenen Produkten. Käufer suchen am ehesten in dem Moment nach Vertrauenssignalen, in dem sie überlegen, einen CTA anzuklicken. Siegel nur im Footer zu platzieren, erreicht nur Käufer, die schon ganz nach unten gescrollt sind, und das ist für die meisten Erstbesucher zu spät.