Shop-Startseite gestalten: Blueprint Abschnitt für Abschnitt

Shop-Startseite gestalten: Blueprint Abschnitt für Abschnitt mit Above the Fold, Reihenfolge der Bereiche, Launch-Checkliste und Tipps für die mobile Ansicht.

Häufige Fragen

Was gehört auf die Startseite eines Onlineshops?

Mindestens: ein Header mit Suche, Warenkorb und Kategorienavigation; ein Hero, der zeigt, was Sie verkaufen, und einen klaren nächsten Schritt anbietet; ein Einstieg in Ihre wichtigsten Kategorien; ein paar Bestseller oder Neuheiten; Vertrauenssignale wie Versand, Rückgabe und echte Bewertungen; sowie ein Footer mit Richtlinien und Kontaktdaten. Alles Weitere (redaktionelle Blöcke, Newsletter-Anmeldung, Social Proof) ist optional und sollte sich seinen Platz verdienen.

Was gehört bei einem Onlineshop above the fold?

Vier Dinge: eine Navigation mit Suche und Warenkorb, eine Überschrift, die benennt, was Sie verkaufen, ein primärer Call-to-Action, der zu den Produkten führt, und ein sichtbarer Grund, dem Shop zu vertrauen, etwa eine Zeile zu Versand oder Rückgabe. Starke Produktbilder im Hero helfen Besuchern, das Sortiment zu erfassen, ohne etwas lesen zu müssen.

Wie viele Produkte sollte ich auf der Startseite zeigen?

Eine allgemeingültige Zahl gibt es nicht. Zeigen Sie genug, um die Bandbreite abzubilden, meist eine Reihe oder ein Raster mit Bestsellern ohne Karussell plus Kategorie-Kacheln, und verlinken Sie dann auf die gesamte Kollektion. Wenn Sie nur eine Handvoll Produkte verkaufen, können Sie alle zeigen. Bei Tausenden Produkten sollte die Startseite die Leute zu den Kategorien führen, statt den ganzen Katalog darstellen zu wollen.

Sollte die Startseite eines Onlineshops einen Slider oder ein Karussell haben?

Ein einzelner, statischer Hero kommuniziert in der Regel klarer als ein rotierender. Automatisch wechselnde Slides verstecken Inhalte hinter einem Timer, sind schwerer barrierefrei umzusetzen und erhöhen oft die Seitengröße. Wenn Sie mehrere Dinge bewerben möchten, geben Sie jedem eine eigene Kachel unterhalb des Heros.

Wie lädt die Startseite meines Onlineshops schneller?

Komprimieren Sie Bilder und passen Sie sie korrekt an, nutzen Sie moderne Formate wie WebP oder AVIF, laden Sie das Hero-Bild mit Priorität und alles darunter per Lazy Loading, begrenzen Sie Drittanbieter-Skripte (Chat-Widgets, Popups, Tracking) und reservieren Sie Platz für Bilder, damit das Layout beim Laden nicht springt. Google PageSpeed Insights und der Core-Web-Vitals-Bericht der Search Console zeigen, was auf Ihrer Seite tatsächlich langsam ist.

Ist die Startseite oder die Produktseite wichtiger?

Produkt- und Kategorieseiten sind der Ort, an dem die meisten Kaufentscheidungen fallen, aber die Startseite ist oft der erste Eindruck für direkte, markenbezogene und wiederkehrende Besucher. Ihre Aufgabe ist die Weiterleitung: Jeden Besucher schnell zur passenden Kategorie oder zum passenden Produkt bringen. Prüfen Sie in Ihrer eigenen Analytics, wie viele Sitzungen auf der Startseite beginnen, bevor Sie entscheiden, wo Sie investieren.

Kurze Antwort: Eine gute Startseite für einen Onlineshop hat eine Aufgabe: jeden Besucher schnell zu den passenden Produkten bringen. Setzen Sie in dieser Reihenfolge auf einen klaren Header (Suche, Warenkorb, Kategorien), einen Hero, der sagt, was Sie verkaufen, mit einem primären Button, Kategorie-Kacheln, eine kurze Reihe Bestseller, Vertrauenssignale (Versand, Rückgabe, Bewertungen) und einen nützlichen Footer. Alles above the fold sollte die Frage beantworten: „Was ist das für ein Shop, und wo klicke ich hin?“

Der Blueprint auf einen Blick

Nutzen Sie ihn als Ausgangsreihenfolge. Streichen Sie Abschnitte, die Sie nicht mit echten Inhalten füllen können; ein leerer „Kundenstimmen“-Block schadet mehr als gar keiner.

#	Abschnitt	Aufgabe	Umfang
1	Ankündigungsleiste	Eine aktuelle Botschaft: Versandgrenze, Ende der Aktion, Bestellschluss für die Lieferung	Eine Zeile
2	Header und Navigation	Suche, Warenkorb, Konto, wichtigste Kategorien	5-7 Links auf oberster Ebene
3	Hero	Sagen, was Sie verkaufen, und einen nächsten Schritt anbieten	Eine Überschrift, ein Button
4	Vertrauensleiste	Versand, Rückgabe, Zahlung, Support	3-4 kurze Punkte
5	Kategorie-Kacheln	Käufer nach ihrem Wunsch leiten	4-8 Kacheln
6	Bestseller / Neuheiten	Beweisen, dass das Sortiment echt ist	Eine Reihe oder ein Raster
7	Nutzen- oder Story-Block	Warum Sie und nicht ein anderer Shop	Ein kurzer Block
8	Social Proof	Echte Bewertungen, Presse, Kundenfotos	Nur wenn echt
9	Newsletter-Anmeldung	Besucher erreichen, die noch nicht kaufen wollen	Ein Feld
10	Footer	Richtlinien, Kontakt, weiterführende Links	Übersichtliche Spalten

Was gehört above the fold?

„Above the fold“ ist alles, was ein Besucher sieht, bevor er scrollt, und das hängt vom Gerät ab. Gestalten Sie Laptop und Smartphone getrennt, statt sich an einer einzelnen Linie im Mockup zu orientieren. Egal auf welchem Gerät: Diese vier Dinge sollten ohne Scrollen sichtbar sein:

Navigation mit Suche und Warenkorb. Käufer, die wissen, was sie wollen, nutzen zuerst die Suche. Verstecken Sie sie auf dem Desktop nicht hinter einem Icon.
Eine Überschrift, die das Produkt benennt. „Handgemachte Keramiktassen, versandt aus Portland“ schlägt „Willkommen in unserem Shop“. Nennen Sie die Kategorie in einfachen Worten.
Ein primärer Call-to-Action. „Tassen shoppen“ oder „Neuheiten entdecken“. Ein zweiter, dezenterer Link ist in Ordnung; drei gleichwertige Buttons nicht.
Ein Grund, Ihnen zu vertrauen. Eine Gratisversand-Grenze, eine Rückgabefrist oder eine Bewertungszahl, die Sie belegen können. Verwenden Sie nur Aussagen, die Sie beweisen können.

Nutzen Sie im Hero ein echtes Produkt- oder Lifestyle-Foto, kein Stockbild, das zu jedem beliebigen Shop passen könnte. Das Bild ist der schnellste Weg für Besucher, zu bestätigen, dass sie richtig sind.

Abschnitt für Abschnitt

Header und Navigation

Beschränken Sie die Kategorien der obersten Ebene auf das, wonach ein Erstbesucher suchen würde, und verwenden Sie die Wörter, die er benutzt. Setzen Sie die Suche in ein sichtbares Feld, halten Sie den Warenkorbzähler aktuell und verlinken Sie das Logo auf die Startseite. Bei einem großen Sortiment kann ein Mega-Menü funktionieren, testen Sie aber, ob es mit Trackpad und Tastatur gut bedienbar ist. Mehr zum Rest des Shops finden Sie in unseren Best Practices für das Webdesign von Onlineshops.

Hero

Der Hero sollte eine Botschaft haben. Wenn Sie eine saisonale Aktion fahren, machen Sie sie für die Dauer zum Hero und kehren danach zu Ihrer zeitlosen Botschaft zurück. Vermeiden Sie automatisch wechselnde Slides: Sie verstecken Inhalte hinter einem Timer und sind schwerer barrierefrei umzusetzen. Wenn Sie mehrere Kampagnen haben, geben Sie jeder eine eigene Kachel weiter unten auf der Seite.

Kategorie-Kacheln

Das ist der Arbeitspferd-Abschnitt. Jede Kachel braucht ein klares Foto und eine einfache Beschriftung („Damen-Laufschuhe“, nicht „Stride Collection“). Ordnen Sie sie danach, was Sie am liebsten verkaufen oder was Besucher am häufigsten suchen, nicht alphabetisch.

Bestseller und Neuheiten

Zeigen Sie echte Produkte mit echten Preisen, kein generisches Raster. Jede Karte braucht Bild, Name, Preis und Link; ergänzen Sie Bewertungen nur, wenn Sie echte haben. Halten Sie die Seitenverhältnisse der Bilder einheitlich, damit das Raster aufgeräumt wirkt. Beenden Sie die Reihe mit einem Link „Alle ansehen“ zur Kollektionsseite.

Vertrauen und Social Proof

Käufer zögern wegen Versandkosten, Rückgabe und der Frage, ob der Shop seriös ist. Beantworten Sie das auf der Startseite in kurzen, konkreten Zeilen: Lieferzeiten, Rückgabefrist, akzeptierte Zahlungsarten und ein Kontaktweg. Zeigen Sie bei Bewertungen echte, mit Namen oder Verifizierungslabel, soweit Ihre Plattform das unterstützt. Erfinden Sie niemals Kundenstimmen oder Bewertungen; das ist unethisch und verstößt vielerorts gegen Verbraucherschutzvorschriften.

Footer

Im Footer suchen sorgfältige Käufer nach den Richtlinien. Nehmen Sie Versand, Rückgabe, Datenschutz, AGB, Kontakt und, falls vorhanden, einen Link zur Größentabelle oder zu den FAQ auf. Layouts behandeln wir in Beispiele für Website-Footer-Design.

Hinweise für die mobile Ansicht

Viele Shops erhalten einen großen Teil ihrer Besuche auf dem Smartphone; prüfen Sie den Anteil in Ihrer eigenen Analytics. Gestalten Sie die mobile Startseite als eigenes Layout, nicht als gequetschte Desktop-Seite.

Halten Sie den Hero kurz. Überschrift, Bild und Button sollten auf einem typischen Smartphone-Bildschirm sichtbar sein, ohne am Header vorbei zu scrollen.
Wählen Sie großzügige Tippflächen. Buttons, Filter und Menüpunkte brauchen genug Größe und Abstand für Daumen. Testen Sie auf einem echten Gerät.
Klappen Sie die Navigation sinnvoll ein. Ein Menü-Icon ist in Ordnung, aber halten Sie Suche und Warenkorb in der Header-Leiste sichtbar.
Setzen Sie horizontales Scrollen sparsam ein. Eine seitlich scrollende Produktreihe ist akzeptabel, wenn sie sichtbar weitere Inhalte andeutet; ein untereinander gestapeltes Raster ist sicherer.
Vermeiden Sie Vollbild-Popups beim Aufruf. Sie blockieren die Seite und können Nutzbarkeit wie Sichtbarkeit in der Suche beeinträchtigen. Verzögern Sie sie oder ersetzen Sie sie durch einen eingebetteten Anmeldeblock.
Denken Sie an die Tastatur. Stellen Sie sicher, dass das Feld für die Newsletter-Anmeldung nicht verdeckt wird, wenn sich die Bildschirmtastatur öffnet.

Grundlagen zu Geschwindigkeit und Barrierefreiheit

Eine schöne Startseite, die langsam lädt, verliert Besucher, bevor sie sie sehen. Die größten Hebel sind fast immer Bilder und Drittanbieter-Skripte.

Komprimieren Sie Bilder und nutzen Sie moderne Formate wie WebP oder AVIF.
Geben Sie Bildern explizite Breite und Höhe, damit sich das Layout beim Laden nicht verschiebt.
Laden Sie das Hero-Bild zuerst; laden Sie Bilder darunter per Lazy Loading.
Prüfen Sie jedes Drittanbieter-Skript (Chat, Popups, Tracker) und entfernen Sie, was Sie nicht nutzen.
Schreiben Sie sinnvolle Alt-Texte für Produkt- und Kategoriebilder.
Prüfen Sie, ob Text ausreichend Kontrast zum Hintergrund hat und ob jedes interaktive Element per Tastatur funktioniert.

Nutzen Sie Google PageSpeed Insights mit Ihrer Live-URL, um zu sehen, welche Dateien Ihre Seite konkret ausbremsen.

Checkliste für die Startseite

Kopieren Sie sie in Ihre Launch-Notizen:

[ ] Header hat sichtbare Suche, Warenkorb und 5-7 klare Kategorie-Links
[ ] Hero-Überschrift nennt in einfachen Worten, was wir verkaufen
[ ] Ein primärer Button; er führt zu Produkten, nicht zu einer „Über uns“-Seite
[ ] Hero-Bild zeigt ein echtes Produkt oder echte Nutzung
[ ] Versand und Rückgabe oberhalb oder knapp unterhalb des Folds zusammengefasst
[ ] Kategorie-Kacheln nutzen die Sprache der Kunden und decken die Hauptsortimente ab
[ ] Bestseller zeigen echte Preise und verlinken auf Produktseiten
[ ] Bewertungen und Presse nur, wenn echt
[ ] Newsletter-Anmeldung hat nur ein Feld und einen klaren Vorteil
[ ] Footer enthält Richtlinien, Kontaktdaten und Zahlungsarten
[ ] Kein automatisch rotierendes Karussell, das wichtige Inhalte verdeckt
[ ] Mobiles Layout auf einem echten Smartphone geprüft
[ ] Bilder komprimiert, skaliert und mit Alt-Text versehen
[ ] Seitentitel und Meta-Beschreibung speziell für die Startseite geschrieben

Häufige Fehler

Alles zeigen wollen. Die Startseite ist ein Wegweiser, kein Katalog.
Schwammiger Hero-Text. Wenn ein Fremder nicht in fünf Sekunden erkennt, was Sie verkaufen, schreiben Sie die Überschrift neu.
Fünf Dinge gleich stark bewerben. Wenn alles hervorgehoben ist, fällt nichts auf.
Falsche Dringlichkeit. Countdown-Timer, die bei jedem Besuch zurückgesetzt werden, zerstören Vertrauen.
Wiederkehrende Besucher ignorieren. Erwägen Sie einen Block „Weiter einkaufen“ oder „Zuletzt angesehen“, wenn Ihre Plattform das unterstützt.

Für allgemeinere Startseiten-Prinzipien jenseits von E-Commerce gehen unsere Anleitungen so gestalten Sie eine Homepage und Website-Startseite gestalten weiter, und wenn Sie noch eine Plattform suchen, lesen Sie die besten Website-Baukästen für E-Commerce.

In die Praxis umsetzen

Schreiben Sie zuerst die Inhalte, bevor Sie gestalten: Ihre Überschrift, Ihre Kategorienamen, Ihre Zeilen zu Versand und Rückgabe und Ihre sechs besten Produkte. Ordnen Sie sie dann in der oben genannten Reihenfolge an. Wenn Sie beim Layout einen Vorsprung wollen: Mit dem kostenlosen Tarif von We.Inc können Sie bis zu drei Websites aus fertigen Vorlagen veröffentlichen; der KI-Builder, der aus einem Prompt eine Website entwirft, startet im Starter-Tarif für $20 im Monat. Sie können sich hier registrieren. Egal welches Tool Sie nutzen: Prüfen Sie vor dem Launch jeden Abschnitt anhand der Checkliste.

Kostenlos starten · Keine Kreditkarte nötig

Umair Ali Sadaqat

Gründer von We.Inc

Umair ist der Gründer von We.Inc. Er schreibt über die Erstellung von Websites mit KI, Agenturen und den Geschäftsbetrieb eines Webstudios.

Bereit, etwas Großartiges zu bauen?

Schließe dich 15,000+ Unternehmen an, die mit We.Inc starten, wachsen und automatisieren, alles auf einer Plattform.