· 2 min read · Conversion-Optimierung

Above the Fold

Above the Fold bezeichnet den Bereich, den Käufer ohne Scrollen sehen — er entscheidet oft darüber, ob Besucher in Ihrem Shop bleiben oder ihn verlassen.

Kasper Hermann Due Stück
Gründer & E-Commerce-SpezialistEntwicklung von Shopify-Apps mit Fokus auf SEO und Wachstum für Händler.

Was ist Above the Fold?

Above the Fold bezeichnet den Teil einer Seite, der im Browserfenster sichtbar ist, bevor der Benutzer scrollt. Der Begriff stammt von gedruckten Zeitungen, bei denen die obere Hälfte der Titelseite am Zeitungskiosk sichtbar war. Im Web gibt es keinen festen „Fold“ (Falz): Die Grenze hängt von der Bildschirmgröße, dem Gerät und dem Browserfenster des Besuchers ab, sodass das, was auf dem Desktop sichtbar ist, auf dem Mobiltelefon möglicherweise ein Scrollen erfordert.

Warum ist Above the Fold wichtig?

Hier haben Sie nur wenige Sekunden Zeit, um zu zeigen, was Sie verkaufen und was der nächste Schritt ist. Eye-Tracking-Studien der Nielsen Norman Group zeigen, dass Nutzer den Großteil ihrer Aufmerksamkeit oberhalb des Falzes (above the fold) verbringen, auch wenn sie scrollen. Ein klares Wertversprechen (Value Proposition) und ein sichtbarer CTA oberhalb des Falzes sind daher ein klassischer Hebel für die Conversion-Rate in einem Online-Shop.

Typische Anwendungsfälle

  • Homepage-Hero. Zeigen Sie Ihre Kernbotschaft, Ihr Angebot oder Ihre Kategorie sowohl auf dem Mobiltelefon als auch auf dem Desktop, ohne zu scrollen.
  • Produktseite. Stellen Sie sicher, dass Preis, „In den Warenkorb“ und das Produktbild sofort sichtbar sind.
  • Kampagnenseiten. Platzieren Sie das Angebot und den CTA oberhalb des Falzes, damit der Traffic von Werbeanzeigen nicht erst nach der Aktion suchen muss.
  • Core Web Vitals. Das größte Element oberhalb des Falzes ist oft das LCP-Element, sodass ein schweres Hero-Bild Ihr LCP verlangsamen kann.

Shopify-Perspektive

In Shopify wird der Above-the-Fold-Bereich über die Abschnitte (Sections) und Blöcke des Themes im Theme-Editor gesteuert. Ein häufiger Fehler ist das verzögerte Laden (Lazy Loading) des Hero-Bildes: Wenn es das LCP-Element ist, verzögert dies das Laden und beeinträchtigt die Core Web Vitals. Stellen Sie stattdessen loading="eager" (oder fetchpriority="high") für das Hero-Bild ein und halten Sie den obersten Abschnitt schlank. Testen Sie immer auf einem echten Smartphone — nicht nur auf dem Desktop —, da der Falz auf kleinen Bildschirmen viel höher liegt.

Pocium-Updates für Shopify-Händler

Neue Apps, praktische Shopify-Anleitungen und Produktaktualisierungen.