Berichte und Recherche zu Shopify und E-Commerce
Dawn v16.0.0 fordert beim Browser 9 Bildbreiten von 375 bis 3840px an — und eine andere Staffelung bis hinauf zu 7680px, wenn Sie zwei Bilder verwenden. Das hier sind alle Einstellungen im Abschnitt „Image banner“, alle Standardwerte und die exakten Höhen in Pixeln, ausgelesen aus dem Code des Themes selbst.
Shopifys eigene Dokumentation zum Abschnitt „Image banner“ endet bei „Fügen Sie ein Bild und etwas Text hinzu“. Sie sagt Ihnen nicht, welche Größe dieses Bild haben sollte, wie hoch das Banner am Ende wird oder was jedes Dropdown tatsächlich verändert. Diese Seite tut das, denn all das steht im Quellcode von Dawn — und dort haben wir es ausgelesen.
Woher diese Zahlen stammen. Am 1. September 2026 haben wir vier Dateien aus dem öffentlichen Repository Shopify/dawn beim Release v16.0.0 (2026-08-10) gelesen: den Abschnitt sections/image-banner.liquid, 507 Zeilen, für das Settings-Schema und die srcset-Staffelungen; assets/section-image-banner.css für die Höhenregeln; layout/theme.liquid für die Root-Schriftgröße, die rem in Pixel umrechnet; und config/settings_schema.json für den Bereich der Fließtextgröße. Jede Zahl auf dieser Seite wurde per Skript aus diesen Dateien extrahiert, nicht von Hand abgetippt. Wenn eine Zahl hier auftaucht, taucht sie auch im Theme auf.
Das ist der Teil, den niemand veröffentlicht — und es ist der Teil, der darüber entscheidet, ob Ihr Banner auf einem Retina-Laptop scharf aussieht.
Dawn liefert nicht ein Bild aus. Es baut ein srcset und lässt den Browser wählen. Die Staffelung der Breiten steht fest im Abschnitt verdrahtet, und es gibt zwei davon:
| Wann | Bereich | Stufen | Angeforderte Breiten |
|---|---|---|---|
| Ein Bild | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Zwei Bilder | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
Die zweite Staffelung greift, sobald Sie sowohl den Platz image als auch image_2 füllen. Jedes Bild belegt dann die halbe Breite, also fordert Dawn größere Quelldateien an, um dieselbe Dichte auf dem Bildschirm zu halten — die oberste Sprosse steigt von 3840px auf 7680px.
Was Sie hochladen sollten. Richten Sie sich nach der obersten Sprosse der Staffelung, die Sie tatsächlich nutzen: 3840px Breite für ein Banner mit einem Bild, 7680px Breite für eines mit zwei Bildern. Alles Größere wird vom Bild-CDN von Shopify verworfen. Alles Kleinere führt dazu, dass der größte srcset-Eintrag stillschweigend auf Ihr Original zurückfällt — und genau so landen Banner unscharf auf Displays mit hoher Pixeldichte.
Das Dropdown Height hat 4 Optionen: adapt, small, medium, large. Drei davon sind feste Mindesthöhen, die im CSS gesetzt sind, und sie unterscheiden sich zwischen Mobil und Desktop (der Breakpoint liegt bei 750px):
| Einstellung | Mobil (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
Die vierte Option, adapt, lässt die feste Höhe komplett fallen und gibt dem Banner das Seitenverhältnis Ihres ersten Bildes. Das ist die richtige Wahl, wenn Ihr Motiv ein Element enthält, das nicht beschnitten werden darf.
Diese Pixelwerte sind nicht fix. Dawn setzt seine Root-Schriftgröße in layout/theme.liquid als calc(var(--font-body-scale) * 62.5%), und --font-body-scale kommt direkt aus der themeeigenen Einstellung Fließtextgröße, die standardmäßig bei 100% liegt und in Schritten von 5% bis auf 130% hochgezogen werden kann.
Bei den voreingestellten 100% entspricht ein rem 10px — daher stammt die Tabelle oben. Erhöhen Sie den Fließtext auf 130%, wächst jedes Banner im selben Verhältnis: Ein Large-Banner geht auf dem Desktop von 720px auf 936px Höhe. Händler ändern die Textgrößen-Einstellung der Lesbarkeit wegen und wundern sich dann, warum der Hero plötzlich den ganzen Bildschirm frisst. Das ist der Grund.
12 Einstellungen, genau so, wie sie im Theme-Editor erscheinen:
| ID im Code | Label im Editor | Typ | Standard | Bereich / Optionen |
|---|---|---|---|---|
image | Bild 1 | image_picker | — | — |
image_2 | Bild 2 | image_picker | — | — |
image_overlay_opacity | Deckkraft der Überlagerung | range | 0 | 0–100, Schritt 10 |
image_height | Höhe | select | medium | 4 Optionen |
image_behavior | Animation | select | none | 4 Optionen |
desktop_content_position | Position | select | middle-center | 9 Optionen |
desktop_content_alignment | Ausrichtung | select | center | 3 Optionen |
show_text_box | Container | checkbox | true | — |
color_scheme | Farbschema | color_scheme | scheme-1 | — |
stack_images_on_mobile | Bilder stapeln | checkbox | true | — |
mobile_content_alignment | Ausrichtung | select | center | 3 Optionen |
show_text_below | Container | checkbox | true | — |
Einige davon sollte man kennen:
image_overlay_opacity — ein Schieberegler von 0 bis 100 in Schritten von 10, Standard 0. Es ist die mit Abstand schnellste Lösung für unlesbaren Text über einem unruhigen Foto, und sie wird ausgeschaltet ausgeliefert.
image_behavior — 4 Optionen: none, ambient, fixed, zoom-in. Standard none. Drei der vier animieren beim Scrollen, was Arbeit im Main Thread kostet — und zwar genau an dem Element, mit dessen Rendering der Browser ohnehin schon beschäftigt ist.
desktop_content_position — 9 Positionen, ein vollständiges 3×3-Raster, Standard middle-center. Getrennt von desktop_content_alignment, das steuert, wie der Text innerhalb dieses Kastens ausgerichtet wird.
show_text_below und show_text_box stehen beide standardmäßig auf true. Das erste schiebt den Text auf Mobilgeräten unter das Bild statt darüber; das zweite zeichnet auf dem Desktop den gefüllten Container hinter dem Text.
Der Abschnitt nimmt 3 Blocktypen auf, mit 1 voreingestellten Anordnung:
| Typ | Name | Einstellungen |
|---|---|---|
heading | Überschrift | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
Der Block buttons bringt 8 Einstellungen mit, weil er zwei vollständige Buttons enthält: Label, Link und eine Checkbox für den sekundären Stil, jeweils pro Button. Beide Stil-Checkboxen sind standardmäßig aus, beide Buttons werden also als primär gerendert — und deshalb gehen so viele Dawn-Banner mit zwei identisch aussehenden Handlungsaufforderungen live.
Alles hier ist einen Klick entfernt. Öffnen Sie sections/image-banner.liquid und scrollen Sie zum Block {% schema %} ganz unten: Dieses JSON ist die Liste der Einstellungen, Standardwerte inklusive. Die Höhen stehen in assets/section-image-banner.css. Die Breitenstaffelungen sind assign widths-Anweisungen weiter oben im Abschnitt, in den Zeilen 34 und 40.
Wenn Shopify ein neues Dawn-Release veröffentlicht, können sich diese Zahlen verschieben. Genau deshalb nennt diese Seite die Version, aus der sie ausgelesen wurde.
3840px Breite für ein Banner mit einem Bild. Dawn baut ein srcset aus 9 Breiten von 375px bis 3840px, alles Breitere wird also verworfen, und bei allem Schmaleren fällt der größte Eintrag auf Ihre Originaldatei zurück. Wenn Sie beide Bildplätze nutzen, laden Sie stattdessen 7680px hoch — dort endet die Staffelung für zwei Bilder.
Auf dem Desktop lauten die drei festen Optionen 420px, 560px und 720px. Unterhalb des Breakpoints von 750px werden daraus 280px, 340px und 390px. Die vierte Option, „An erstes Bild anpassen“, hat keine feste Höhe und folgt dem Seitenverhältnis Ihres Bildes.
Die Bannerhöhen sind in rem definiert, und Dawns Root-Schriftgröße lautet calc(var(--font-body-scale) * 62.5%). Diese Variable ist die Einstellung für die Fließtextgröße des Themes, standardmäßig 100%, einstellbar bis 130%. Eine größere Textgröße skaliert jede rem-basierte Höhe mit — Banner eingeschlossen.
12 Einstellungen am Abschnitt selbst in Dawn v16.0.0, plus 3 Blocktypen (Überschrift, Text und Buttons), die zusammen weitere 12 Einstellungen mitbringen.
Sie verdunkelt das Bild hinter Ihrem Text. Es handelt sich um einen Schieberegler von 0 bis 100 in Schritten von 10, und er wird mit 0 ausgeliefert, also aus. Es ist die schnellste Lösung, wenn eine Überschrift über einem unruhigen Foto nicht lesbar ist.