Sollten Sie einen Slider auf der Startseite verwenden?

Große wechselnde Bilder ganz oben auf der Startseite, also ein Slider (Karussell), gehören zu den bekanntesten Elementen von Online-Shops. Viele Shop-Betreiber fügen ihn standardmäßig hinzu: „Ich zeige alles, dann findet jeder etwas.“ Das Problem: Die meisten Besucher sehen die meisten Slides nie.

In diesem Beitrag zeigen wir, was die Forschung sagt, was Sie statt eines Sliders verwenden können und welche Regeln wichtig sind, wenn Sie einen Slider einsetzen. Die kurze Antwort: Ein Slider ist nicht verboten, sollte aber auch nicht die Standardwahl sein.

Was sagt die Forschung?

Das Baymard Institute, das sich mit der Usability im E-Commerce beschäftigt, hat Startseiten-Slider in groß angelegten Nutzertests untersucht und die Ergebnisse 2019 veröffentlicht. Die wichtigsten Erkenntnisse:

• 33 % der Desktop-Versionen der größten E-Commerce-Websites in den USA und Europa hatten einen Startseiten-Slider.
• Bei 46 % der Websites mit Startseiten-Slider wies die Umsetzung des Sliders Usability-Probleme auf.
• Testpersonen wechselten auf eine andere Seite oder scrollten nach unten, bevor die Slides einmal durchgelaufen waren. Die meisten Besucher sehen also nicht alle Slides; das erste Slide wird weit häufiger gesehen als die übrigen.
• Weil Slider wie Werbung wirken, lesen manche Besucher sie gar nicht (Banner-Blindheit). Baymard sagt, dass eine wichtige Funktion nicht ausschließlich über einen Slider erreichbar sein sollte.
• Denselben Inhalt als feste Abschnitte auf der Startseite zu zeigen, funktionierte in Baymards Tests genauso gut wie ein Slider und ist viel leichter korrekt umzusetzen.

Slider, Einzelbild oder Kacheln?

In den SEPETYA-Themes gibt es für den oberen Bereich der Startseite vier wesentliche fertige Abschnitte. Welchen Sie wählen, hängt davon ab, was Sie mitteilen möchten.

Ihre Situation	Passender Abschnitt	Warum
Sie haben eine einzige starke Botschaft (neue Saison, eine große Aktion)	Hauptbild (Hero)	Die Botschaft ist sofort sichtbar, es gibt keine wechselnden Inhalte.
Sie haben zwei bis fünf gleich wichtige Ankündigungen	Aktionskacheln	Alle sind gleichzeitig sichtbar; Besucher gehen zu dem, was sie interessiert.
Sie haben viele Kategorien	Schaufenster-Einstieg (mit Kategoriemenü)	Links eine Kategorieliste, in der Mitte ein Aktions-Slider, rechts zwei kleine Aktionskarten; der Weg zu den Kategorien hängt nicht vom Slider ab.
Sie müssen an derselben Stelle mehrere Ankündigungen nacheinander zeigen	Slideshow	Sie können höchstens sechs Slides einfügen; verwenden Sie sie nach den Regeln unten.

In kleinen und mittleren Shops reichen meist die ersten beiden: ein Hauptbild und darunter Aktionskacheln oder hervorgehobene Kategorien. Ein Slider ist sinnvoll, wenn Sie wirklich mehrere Ankündigungen an derselben Stelle unterbringen müssen. Die Themes interpretieren diese Abschnitte unterschiedlich; zur Theme-Wahl nach Branche lesen Sie unseren Beitrag Wie wählen Sie das passende Theme für Ihre Branche?

Video im Hauptbild verwenden

Im Abschnitt Hauptbild (Hero) können Sie statt eines Bildes auch ein Hintergrundvideo per MP4-Link einfügen. Das Video wird stumm und in Schleife abgespielt; Besuchern, die im Betriebssystem reduzierte Bewegung eingestellt haben, wird das Bild angezeigt. Halten Sie das Video kurz und leicht: Baymard berichtet, dass Besucher bei bildlastigen Inhalten, die länger als eine Sekunde laden, schnell ungeduldig werden.

Wie richten Sie Aktionskacheln ein?

1. Fügen Sie der Startseite im Theme-Editor den Abschnitt „Aktionskacheln“ hinzu.
2. Wählen Sie das Layout: zwei gleiche Kacheln, drei gleiche Kacheln, eine große und zwei kleine oder eine große und vier kleine.
3. Geben Sie für jede Kachel Bild, Überschrift, kurzen Text, Beschriftung der Schaltfläche und Link ein. Stellen Sie die Position des Textes in der Kachel (oben, Mitte, unten) und den Abdunklungsgrad ein.
4. Setzen Sie die wichtigste Ankündigung in die große Kachel und transportieren Sie pro Kachel nur eine Botschaft.

Ein Abschnitt kann höchstens fünf Kacheln haben. Wenn es auf dem Smartphone anders aussehen soll, können Sie für jede Kachel ein eigenes Smartphone-Bild hochladen.

Wenn Sie einen Slider verwenden: Was erledigt SEPETYA für Sie?

Baymard nennt zehn Anforderungen an Startseiten-Slider. Die folgende Tabelle zeigt, welche davon die Slider von SEPETYA von sich aus erfüllen und welche Sie übernehmen müssen.

Anforderung	In SEPETYA
Das erste Slide sorgfältig auswählen	Die Reihenfolge legen Sie fest. Das erste Slide wird am häufigsten gesehen; setzen Sie dort die Botschaft für die breiteste Zielgruppe ein.
Wichtige Inhalte nicht nur über den Slider erreichbar machen	Ihre Verantwortung: Jeder Link im Slider muss auch über das Menü oder einen anderen Abschnitt der Startseite erreichbar sein.
Deutlich sichtbare manuelle Steuerung	Es gibt Pfeile für vor und zurück sowie einen Punkt pro Slide. Läuft der automatische Wechsel, kommt eine sichtbare Pause-Schaltfläche hinzu.
Angemessene Wechseldauer: 5–7 Sekunden, bei textreichen Slides bis zu 10 Sekunden	Standard sind 6 Sekunden; einstellbar zwischen 4 und 10 Sekunden.
Anhalten beim Überfahren mit der Maus	Der Wechsel stoppt, solange die Maus über dem Slider ist oder der Tastaturfokus im Slider liegt.
Automatischen Wechsel nach einer Interaktion beenden	Bei Nutzung von Pfeil, Punkt oder Wischen stoppt der automatische Wechsel. Besucher können ihn über die Abspielen-Schaltfläche wieder starten.
Kein automatischer Wechsel auf Mobilgeräten	Der automatische Wechsel läuft nur auf Geräten mit Maus; auf Touch-Geräten werden die Slides mit dem Finger gewischt.
Mobile Gesten unterstützen	Slides werden durch seitliches Wischen durchgeblättert.
Lesbarer Slide-Text	Überschrift, Text und Schaltflächen sind eigene Felder und nicht ins Bild eingebettet. Sie können ein eigenes Smartphone-Bild hochladen und den Abdunklungsgrad einstellen.
Schnelles Laden	Das Bild des ersten Slides wird vorrangig geladen, die anderen bei Bedarf. Bilder werden als AVIF und WebP in verschiedenen Breiten ausgeliefert.

Dieses Verhalten ist unabhängig davon, wie das Theme den Slider darstellt: Themes können Slides schieben oder weich überblenden und Punkte, Balken oder einen Zähler zeigen, die Regeln für Pause und Anhalten bleiben aber gleich. Zusätzlich startet der automatische Wechsel bei Besuchern, die im Betriebssystem reduzierte Bewegung eingestellt haben, gar nicht erst.

Diese Regeln sind nicht nur gute Praxis. Die Barrierefreiheitsrichtlinie WCAG 2.2 verlangt, dass Nutzer bewegte oder sich selbst aktualisierende Inhalte, die automatisch starten und zusammen mit anderen Inhalten dargestellt werden, pausieren, stoppen oder ausblenden können (Erfolgskriterium 2.2.2, Stufe A). Ein automatisch wechselnder Slider kann darunter fallen; eine sichtbare Pause-Schaltfläche erfüllt diesen Bedarf.

Beispielaufbau: drei Slides

Die folgende Tabelle ist nur ein Beispiel; passen Sie sie an Ihren Katalog an. Die Logik: Das erste Slide spricht die breiteste Zielgruppe an, die folgenden engere Interessen, und das Ziel jedes Slides ist eine Seite, die auch über das Menü erreichbar ist.

Reihenfolge	Botschaft	Ziel der Schaltfläche
1	Kollektion der neuen Saison	Kategorie „Neuheiten“
2	Rabatt auf ausgewählte Produkte (gemäß Regel zum früheren Preis)	Liste der reduzierten Produkte
3	Geschenkideen	Kategorie „Geschenke“

Checkliste für die Vorbereitung von Slides

• Halten Sie die Zahl der Slides gering. Da die meisten Besucher nicht alle Slides sehen, ist die Chance gering, dass spätere Slides gesehen werden; drei oder vier Slides genügen den meisten Shops.
• Setzen Sie auf das erste Slide die Botschaft für die breiteste Zielgruppe: allgemeine Aktion, neue Produkte oder Saison.
• Pro Slide eine Botschaft und eine Hauptschaltfläche; halten Sie die Überschrift kurz.
• Betten Sie Überschrift und Text nicht ins Bild ein, sondern schreiben Sie sie in die Slide-Felder. So bleibt der Text lesbar, übersetzbar und auch auf dem Smartphone scharf.
• Laden Sie ein eigenes Smartphone-Bild hoch. Wenn Sie nur ein Bild verwenden, halten Sie Produkt oder Motiv nahe der Mitte; auf kleinen Bildschirmen werden die Ränder beschnitten.
• Stellen Sie die Abdunklung so ein, dass der Text selbst an der hellsten Stelle des Bildes lesbar ist.
• Laden Sie das Desktop-Slidebild mindestens 1920 Pixel breit hoch. SEPETYA erzeugt aus Ihrem Bild Versionen zwischen 160 und 2560 Pixel Breite, und der Browser wählt die passende aus.
• Prüfen Sie, dass jedes Ziel im Slider auch über das Menü oder einen anderen Abschnitt der Startseite erreichbar ist.
• Testen Sie die Slides auf dem Desktop, auf dem Smartphone und mit der Tastatur (Tab-Taste).

Bleiben Sie in den Slide-Texten ehrlich

Überschriften und Texte im Slider sind Werbung. Aussagen wie „30 Prozent Rabatt“ oder „Nur noch 3 Tage“ müssen der Wahrheit entsprechen:

• Rabatt und früherer Preis: Nach Artikel 14 der türkischen Verordnung über Handelswerbung und unlautere Geschäftspraktiken (Ticari Reklam ve Haksız Ticari Uygulamalar Yönetmeliği) ist ab 1. August 2026 bei Werbung für den Verkauf von Waren der Preis vor dem Rabatt der niedrigste Preis, der in den zehn Tagen vor Beginn des Rabatts angewendet wurde. Einzelheiten erklären wir in unserem Beitrag Ehrliche Dringlichkeit und echte Bestandshinweise.
• Countdowns und Enddaten: Setzen Sie keinen Countdown ein, der nicht an das echte Ende einer Aktion gebunden ist. Gefälschte Countdowns und vorgetäuschte Knappheit sind Beispiele für Dark Patterns (siehe unseren Beitrag zu Dark Patterns).
• Preishinweis: Wenn Sie ein Produkt mit einem Slide verknüpfen (Feld „Produkt, dessen Preis angezeigt wird“), zeigen manche Themes den Hinweis „ab … TL“ mit dem aktuellen Preis des Produkts. Nutzen Sie dieses Feld, statt den Preis von Hand zu schreiben, dann weicht der Preis im Slider nicht vom Preis auf der Produktseite ab.
• Kurze Merkmale: Schreiben Sie in kurze Merkmalslabels wie „Wasserdicht, 2 Jahre Garantie“ nur Angaben, die stimmen und die Sie belegen können.

Beobachten Sie Ihren eigenen Shop, bevor Sie entscheiden

Die Erkenntnisse von Baymard geben eine Richtung vor, aber die Besucher Ihres Shops können sich anders verhalten. Wenn Sie den oberen Bereich der Startseite ändern, vergleichen Sie einige Wochen lang die Übergänge von der Startseite zu Produkt- und Kategorieseiten sowie den Umsatz mit dem vorherigen Zeitraum. Versuchen Sie, gleichzeitig nichts anderes zu ändern (Preis, Aktion, Werbebudget); sonst können Sie die Ursache des Ergebnisses nicht zuordnen.

Eine schlichte Startseite, auf der Besucher schnell zu Kategorie und Produkt gelangen, bringt oft mehr als der Schmuck eines Sliders. Slider und Aktionskacheln können Sie im Theme-Editor in Ihrem eigenen Shop ausprobieren: kostenlos testen.

Dieser Beitrag ist keine Rechts- oder Steuerberatung.