Horizon Hero Banner: Größen und Einstellungen direkt aus dem Code

Horizon ist das Theme, das Shopify neuen Shops mitgibt, und seine Hero-Section ist das Erste, was die meisten Händler anfassen. Der Theme-Editor zeigt Ihnen ein Height-Dropdown mit sechs Auswahlmöglichkeiten und einen Bildplatz. Er sagt Ihnen nicht, dass drei dieser Optionen ihre Maßeinheit je nach Bildschirmbreite wechseln – oder dass „Large“ hier etwas völlig anderes bedeutet als „Large“ in Dawn.

Wie wir zu diesen Zahlen gekommen sind. Am 1. September 2026 haben wir das öffentliche Repository Shopify/horizon bei Commit 8b42ace (2026-08-31) gelesen – Horizon veröffentlicht keine Releases und keine Tags, der Commit ist also die Version. Das Settings-Schema und die srcset-Staffeln haben wir aus sections/hero.liquid mit 1496 Zeilen entnommen, die Höhenvariablen aus snippets/theme-styles-variables.liquid und die Section-Regeln aus assets/base.css. Die Block-Beschreibungen haben wir über die gemeinsam genutzte blocks/-Bibliothek des Themes aufgelöst, weil das Hero-Schema sie nur benennt. Jede Zahl wurde per Skript aus diesen Dateien extrahiert.

Die Höhen wechseln die Einheit, wenn der Bildschirm wächst

Das ist der Teil, der die Leute überrascht. Horizon hat nicht eine Höhe pro Option – es hat drei, über zwei Breakpoints, und die Einheit wechselt:

Unterhalb von 40em sind die Höhen fest in rem angegeben. Darüber werden sie zu svh, der Einheit für die kleine Viewport-Höhe – also einem Prozentsatz des sichtbaren Bildschirms. Auf einem Smartphone ist ein Large-Hero damit fest 560px hoch, und auf einem breiten Desktop 80% von dem, was das Fenster des Besuchers gerade hergibt.

Zwei weitere Höhen umgehen die Tabelle vollständig. full-screen setzt 100svh. custom blendet einen Slider ein, section_height_custom, der von 0 bis 100% läuft, mit einem Standardwert von 50 – und dieser Wert wird ebenfalls direkt als svh ausgegeben, nicht als Pixel.

Warum „Large“ nicht dasselbe ist wie „Large“ in Dawn

Beide Themes bieten einen Large-Hero. Vergleichbar sind sie nicht, und zwar aus zwei voneinander unabhängigen Gründen.

Die rem-Basis unterscheidet sich. Wir haben jede einzelne Datei des Themes durchsucht: Horizon überschreibt die Root-Schriftgröße nie, also entspricht 1rem dem Browser-Standard von 16px. Dawn setzt font-size: calc(var(--font-body-scale) * 62.5%), wodurch 1rem 10px sind. Dieselben 35rem würden in Horizon 560px und in Dawn 350px bedeuten.

Die Einheit unterscheidet sich oberhalb des Breakpoints. Large ist in Dawn auf dem Desktop fest 720px, auf jedem Bildschirm gleich. Large in Horizon sind 80svh, wächst also mit dem Display: etwa 720px bei einem 900px hohen Fenster und etwa 1152px bei einem 1440px hohen.

Wenn Sie ein Design zwischen den beiden Themes portieren, ist das die eine Einstellung, die es am wahrscheinlichsten zerlegt.

Die genauen Bildgrößen

Horizon baut ein srcset aus zwei hart codierten Staffeln, in den Zeilen 103 und 105 der Section:

Laden Sie 3840px Breite hoch, wenn der Hero über die ganze Seite reichen soll. Die schmalere Staffel endet bei 1600px, weil jedes Bild dort immer nur einen Teil der Breite einnimmt.

Beachten Sie die unterste Stufe: Horizon beginnt bei 832px, Dawn bei 375px. Horizon liefert einfach keine Smartphone-Variante eines Hero-Bildes über die volle Breite aus – gut zu wissen, wenn Ihr Traffic überwiegend mobil ist und über langsame Verbindungen kommt.

Die Blöcke stehen nicht in dieser Datei

Dawn beschreibt seine Blöcke innerhalb des Section-Schemas. Horizon benennt sie und hält die Beschreibungen in einer gemeinsam genutzten Bibliothek, sodass sections/hero.liquid allein gelesen nichts darüber sagt, was ein Block kann. Aufgelöst tragen die 8 Typen zusammen 104 Einstellungen:

@theme ist ein Platzhalter: Er akzeptiert jeden Theme-Block, weshalb er keine eigenen Einstellungen hat. group ist der schwere Fall mit 36 Einstellungen, weil es ein Layout-Container ist, der die meisten Ausrichtungs- und Abstandsregler der Section selbst eine Ebene tiefer wiederholt.

Zur Größenordnung: Das Image-Banner von Dawn bietet 3 Block-Typen mit insgesamt 12 Einstellungen. Der Hero von Horizon bietet 8 mit 104. Das ist der eigentliche Unterschied zwischen den beiden Themes – und er ist nirgends im Theme-Editor sichtbar.

Alle Einstellungen der Section

36 Einstellungen, so wie sie im Editor erscheinen:

Erwähnenswert:

Vier separate Ausrichtungseinstellungen. horizontal_alignment und vertical_alignment greifen, wenn Inhalte in einer Reihe fließen; horizontal_alignment_flex_direction_column und vertical_alignment_flex_direction_column greifen, wenn sie gestapelt werden. Ändern Sie die eine, behält die andere ihren alten Wert – das ist der üblichere Grund, warum ein Hero auf dem Desktop richtig und auf dem Smartphone falsch aussieht.

reflection_opacity – ein Slider von 0 bis 100%, Standardwert 75, gekoppelt an blurred_reflection. Dawn hat kein Gegenstück dazu.

Vier Bildplätze und vier Videoplätze. Der Hero nimmt Media doppelt auf – für Desktop und einen separaten Mobile-Satz hinter custom_mobile_media, das standardmäßig auf false steht.

Das selbst nachprüfen

Öffnen Sie sections/hero.liquid und lesen Sie den {% schema %}-Block am Ende für die Einstellungen. Die Höhen stehen in den Zeilen 143 bis 157 von snippets/theme-styles-variables.liquid. Die Block-Beschreibungen liegen in blocks/ – eine Datei pro Typ, benannt genau wie in der Spalte type oben.

Horizon hat keine Releases, es gibt also keine Versionsnummer zum Zitieren. Diese Seite nennt stattdessen den Commit, aus dem gelesen wurde; wenn sich das Theme ändert, ändern sich diese Zahlen mit.