Im ersten Bildschirm entscheidet ein Besucher, ob er bleibt. Nutzer verbringen 57% ihrer Betrachtungszeit above the fold (NN/g, 2018), und sie bilden sich in etwa 50 Millisekunden einen ersten Eindruck von der optischen Wirkung einer Seite (Lindgaard et al., 2006). Der Hero-Bereich ist nicht der Anfang der Seite; er ist der Großteil der Entscheidung. Die meisten Shopify-Stores füllen ihn mit Stimmung und vergraben die Botschaft.

Das ist die Anleitung für einen Hero, der das Scrollen verdient: die vier Aufgaben, die er erfüllen muss, und was wegzulassen ist. Sie sitzt im Shopify-PDP-Architektur-Leitfaden und passt zur tieferen PDP-Optimierungs-Checkliste.

Ich führe Skuology und baue Upsellr. Das kommt aus über 80 Shopify-Projekten und mehr als 100 Mio. $ kombiniertem eCommerce-Umsatz.

Wichtigste Erkenntnisse

  • Der erste Bildschirm trägt die Entscheidung: 57% der Aufmerksamkeit liegt above the fold (NN/g, 2018) und ein Eindruck entsteht in ~50ms (Lindgaard, 2006).
  • Ein Hero hat vier Aufgaben: sagen, was es ist, für wen, warum es hier besser ist und was zu tun ist.
  • Die Überschrift ist für Klarheit, nicht Cleverness; das F-Muster stellt obere Zeile und linken Rand nach vorn (NN/g).
  • Ein Hero, ein Bild, ein CTA. Karussells und konkurrierende Buttons teilen die Aufmerksamkeit, die du nicht verlieren darfst.
  • Auf Mobil ist der Hero ein Bildschirm: Nutzen, Bild, Preis, CTA, in dieser Reihenfolge.

Die vier Aufgaben eines Heros

Ein Hero, der verkauft, beantwortet im ersten Blick vier Fragen: Was ist das, für wen ist es, warum ist es hier besser und was tue ich als Nächstes. Fehlt eine davon, muss der Besucher arbeiten, um die Seite zu verstehen, und da sich ein Eindruck in Millisekunden bildet, machen sich die meisten die Mühe nicht. Der Hero ist keine Dekoration; er ist die Antwort auf "soll ich weiterlesen".

Die meisten Stores machen das falsch, indem sie den Hero auf Atmosphäre statt Klarheit optimieren. Ein schönes Lifestyle-Bild mit einer poetischen Drei-Wort-Überschrift sieht aus wie eine Marke und kommuniziert nichts. Der Käufer, der im ersten Bildschirm nicht erkennt, was du verkaufst, geht, und die 57% der Aufmerksamkeit, die above the fold leben, gehen für Verwirrung drauf.

Behandle den Hero also als eine zu erledigende Aufgabe, nicht als Leinwand. Jedes der vier Elemente unten gehört zu einer dieser vier Fragen, und jedes verdient seinen Platz nur, indem es klar antwortet.

Die Überschrift: was es ist und für wen

Die Aufgabe der Überschrift ist Wiedererkennung, schnell. Sag in einfachen Worten, was das Produkt ist und für wen, sodass ein Erstbesucher es sofort versteht. "Merino-Funktionswäsche für Läufer bei Kälte" schlägt "Für die Elemente gemacht", weil es dem Käufer sagt, was er vor sich hat und ob es für ihn ist. Clever ist hier der Feind; klar gewinnt.

Platzierung zählt so viel wie Formulierung. Nutzer scannen in einem F-Muster, also bekommen die obere Zeile und der linke Rand überproportionale Aufmerksamkeit (NN/g, 2017). Stell die Bedeutung an den Anfang der Überschrift, nicht hinter einen Anlauf. Die ersten Worte tragen die Wiedererkennung; alles danach wird weniger gelesen.

Der Test ist derselbe, den ich für jeden ersten Bildschirm nutze: Könnte ein Fremder allein aus der Überschrift einem Freund sagen, was du verkaufst? Wenn nicht, ist sie zu vage, um zu konvertieren.

Das Hero-Bild: zeig das Produkt oder das Ergebnis

Die Aufgabe des Bildes ist, zu zeigen, was die Überschrift benennt. Eine klare Aufnahme des Produkts, oder des Ergebnisses, das es liefert, leistet mehr als jede Stimmungsfotografie. Der Käufer will das Ding sehen, das er kaufen könnte, also stell es nach vorn. Atmosphäre kann später kommen; das Hero-Bild verdient seinen Platz, indem es informativ ist, nicht nur ansprechend.

Schneide zuerst für Mobil zu. Der Großteil deines Traffics ist auf dem Handy, wo der Hero ein einzelner kleiner Bildschirm ist, also zeigt ein für ein breites Desktop-Banner komponiertes Bild auf Mobil oft nichts Nützliches. Komponiere so, dass das Produkt in Handygröße lesbar ist, und dasselbe Bild funktioniert überall.

Die tieferen Regeln für Produktbilder stehen im PDP-Optimierungs-Leitfaden. Im Hero ist der Punkt eng: zeigen, nicht andeuten.

Die Nutzenzeile: der eine Grund, hier zu kaufen

Die Nutzenzeile ist das Warum. Gib in einem Satz den einzelnen wichtigsten Grund, dieses Produkt in diesem Store zu kaufen. Keine Liste von Features, keine drei Vorteile, einen. Der Käufer, der den ersten Bildschirm überfliegt, kann einen klaren Grund behalten; ein Absatz voller Verkaufsargumente liest sich als Rauschen und wird übersprungen.

Konkret schlägt generisch jedes Mal. "Kostenloser Versand, in zwei Tagen geliefert" oder "Auf Bestellung gefertigt, zehn Jahre Garantie" sagt dem Käufer etwas Echtes. "Premium-Qualität, die du lieben wirst" sagt ihm nichts und signalisiert Füllung. Die Nutzenzeile ist, wo du den Klick verdienst, also mach sie konkret genug, um geglaubt zu werden.

Wenn du einen echten Unterschied hast, hierhin gehört er. Der Store mit einem echten Grund, hier zu kaufen, schlicht im Hero gesagt, konvertiert den Besucher, der sonst gehen würde, um zu vergleichen.

Der primäre CTA: eine klare Aktion

Der Hero braucht genau einen primären Call to Action, sichtbar ohne Scrollen, benannt nach der Aktion, die er auslöst. "In den Warenkorb", "Kollektion ansehen", "Bestellung starten". Ein Button, eine Aufgabe. Konkurrierende CTAs im Hero (jetzt kaufen und mehr erfahren und Video ansehen und anmelden) teilen die Entscheidung und senken die Chance, dass der Käufer überhaupt eine ergreift.

Lass ihn aussehen wie die Aktion, die er ist. Der primäre CTA sollte das visuell auffälligste interaktive Element im ersten Bildschirm sein, im Marken-Pink, groß genug, um auf Mobil ohne Zielen zu tippen. Alles andere im Hero unterstützt ihn; nichts konkurriert mit ihm.

Das ist der Moment, in dem der Hero an den Rest der Seite oder den Warenkorb übergibt. Sind die vier Elemente richtig, wird der CTA gedrückt; ist die Botschaft vergraben, ist es egal, wie gut der Button aussieht.

Was aus dem Hero zu streichen ist

Die meisten Heros leisten zu wenig wegen dessen, was drin ist, nicht was fehlt. Streiche das rotierende Karussell: Slider teilen die Aufmerksamkeit, verschieben deine beste Botschaft auf einem Timer aus dem Bild und werden nach dem ersten Frame selten beachtet. Streiche den zweiten und dritten CTA. Streiche die dichte Navigation und die dreifach gestapelten Ankündigungsleisten, die den eigentlichen Hero unter den Fold schieben.

Der Hero ist der wertvollste Bildschirm der Seite, also sollte er die wenigsten, klarsten Dinge halten. Jedes Element, das du hinzufügst, konkurriert um die 57% der Aufmerksamkeit, die dort leben. Subtrahiere, bis nur die vier Aufgaben bleiben, und jede bekommt den Platz, den sie braucht.

Zurückhaltung ist die Technik. Der Store, der im ersten Bildschirm eine klare Sache sagt, schlägt den, der fünf unscharfe Dinge sagt, jedes Mal.

Mobil: der Hero ist ein Bildschirm

Auf Mobil ist der Hero ein einzelner Bildschirm ohne Platz zum Verschwenden, und Engagement sinkt Jahr für Jahr weiter (Contentsquare, 2026). Ordne den mobilen Hero also nach dem, was die Entscheidung treibt: zuerst Nutzen oder Überschrift, dann das Produktbild, dann der Preis, dann der primäre CTA. Trust-Signale und Detail gehen darunter, wo der Käufer nur scrollt, wenn der Hero es verdient hat.

Diese Reihenfolge ist nicht willkürlich; es ist die Sequenz, die ein Käufer zum Entscheiden braucht. Was ist es, kann ich es sehen, was kostet es, wie bekomme ich es. Passe den Hero an diese Sequenz an und der kleine Bildschirm hört auf, eine Einschränkung zu sein. Das volle mobile Bild steht im Leitfaden zur mobilen Conversion Rate.

Der Shopify Hero-Bereich: FAQ

Was gehört in einen Shopify Hero-Bereich?

Vier Dinge: eine schlichte Überschrift, die sagt, was das Produkt ist und für wen, ein Hero-Bild, das das Produkt oder sein Ergebnis zeigt, eine Nutzenzeile mit dem einen Grund, hier zu kaufen, und ein einzelner primärer Call to Action. Alles andere kann unter den Fold; der Hero existiert, um das Scrollen zu verdienen.

Wie wichtig ist der erste Bildschirm in einem Shopify-Store?

Entscheidend. Nutzer verbringen 57% ihrer Betrachtungszeit above the fold (NN/g, 2018), und sie bilden sich in etwa 50 Millisekunden einen ersten Eindruck von der optischen Wirkung (Lindgaard, 2006). Wenn der erste Bildschirm nicht sagt, was das Produkt ist und warum es zählt, gehen die meisten Besucher, bevor sie irgendetwas anderes sehen.

Sollte der Shopify-Hero einen Slider oder ein Karussell haben?

Nein. Rotierende Slider teilen die Aufmerksamkeit, schieben deine beste Botschaft aus dem Bild und werden nach dem ersten Slide selten angeklickt. Der Hero hat eine Aufgabe: das einzelne Wichtigste zu kommunizieren. Ein statischer Hero mit einer Überschrift, einem Bild und einem CTA schlägt ein Karussell, das fünf Dinge auf einmal sagen will.

Was macht eine gute Hero-Überschrift auf Shopify aus?

Klarheit vor Cleverness. Sag in einfachen Worten, was das Produkt ist und für wen, sodass ein Erstbesucher es sofort versteht. Das F-Muster bedeutet, dass die obere Zeile und der linke Rand die meiste Aufmerksamkeit bekommen (NN/g), also stell die Bedeutung nach vorn. Eine Überschrift, die über jedem Store stehen könnte, ist zu vage, um zu konvertieren.

Wie sollte der Hero auf Mobil geordnet sein?

Mobil zeigt einen Bildschirm, also ordne nach dem, was die Entscheidung treibt: zuerst Nutzen oder Überschrift, dann das Produktbild, der Preis und der primäre CTA. Vertrauen und Detail kommen darunter. Da Engagement und Scrollen Jahr für Jahr sinken (Contentsquare, 2026), muss der mobile Hero den Verkauf fast allein tragen.

Was du als Nächstes tun solltest

Kein garantierter Uplift. Wie stark ein stärkerer Hero deine Zahlen bewegt, hängt von deinem Produkt, deinem Traffic und davon ab, wie vergraben die Botschaft heute ist. Was ich versprechen kann: Der erste Bildschirm trägt mehr von der Entscheidung als jeder andere, und die meisten Stores verschwenden ihn an Atmosphäre.

Das Baseline Framework baut den ersten Bildschirm um die vier Aufgaben neu auf, in der Reihenfolge, in der ein Käufer entscheidet. Wenn du wissen willst, was dein Hero nicht sagt, buche ein kostenloses 30-minütiges Gespräch und ich gehe deinen ersten Bildschirm durch und was er dich kostet.