Onderzoek en research over Shopify en e-commerce
Dawn v16.0.0 vraagt de browser om 9 afbeeldingsbreedtes van 375 tot 3840px, en een andere reeks tot 7680px wanneer je twee afbeeldingen gebruikt. Dit is elke instelling in de Image banner-sectie, elke standaardwaarde en de exacte hoogtes in pixels, afgelezen uit de code van het thema zelf.
Shopify’s eigen documentatie over de Image banner-sectie houdt op bij “voeg een afbeelding en wat tekst toe”. Er staat niet in welk formaat die afbeelding moet hebben, hoe hoog de banner uiteindelijk wordt, of wat elke dropdown daadwerkelijk verandert. Deze pagina wel, want het staat allemaal opgeschreven in de broncode van Dawn en daar hebben we het gelezen.
Hoe we aan deze cijfers komen. Op 1 september 2026 lazen we vier bestanden uit de publieke Shopify/dawn-repository bij release v16.0.0 (2026-08-10): de sectie sections/image-banner.liquid, 507 regels, voor het settings-schema en de srcset-reeksen; assets/section-image-banner.css voor de hoogteregels; layout/theme.liquid voor de root font-size die rem naar pixels omrekent; en config/settings_schema.json voor het bereik van de bodytekstgrootte. Elk cijfer op deze pagina is met een script uit die bestanden gehaald, niet met de hand overgetypt. Als een getal hier staat, staat het in het thema.
Dit is het deel dat niemand publiceert, en het is het deel dat bepaalt of je banner er scherp uitziet op een retina-laptop.
Dawn levert niet één afbeelding uit. Het bouwt een srcset en laat de browser kiezen. De reeks breedtes staat hardcoded in de sectie, en er zijn er twee:
| Wanneer | Bereik | Stappen | Opgevraagde breedtes |
|---|---|---|---|
| Eén afbeelding | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Twee afbeeldingen | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
De tweede reeks treedt in werking wanneer je zowel het veld image als image_2 invult. Elke afbeelding beslaat dan de helft van de breedte, dus vraagt Dawn om grotere bronbestanden om dezelfde dichtheid op het scherm te houden — de bovenste trede gaat van 3840px naar 7680px.
Wat je moet uploaden. Stem af op de bovenste trede van de reeks die je daadwerkelijk gebruikt: 3840px breed voor een banner met één afbeelding, 7680px breed voor een banner met twee. Alles wat groter is, wordt door de image-CDN van Shopify weggegooid. Alles wat kleiner is, zorgt ervoor dat de grootste srcset-entry stilletjes terugvalt op je origineel, en zo worden banners wazig op high-density schermen.
De dropdown Height heeft 4 opties: adapt, small, medium, large. Drie daarvan zijn vaste minimumhoogtes die in CSS zijn ingesteld, en ze verschillen tussen mobiel en desktop (het breakpoint ligt op 750px):
| Instelling | Mobiel (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
De vierde optie, adapt, laat de vaste hoogte volledig los en geeft de banner de beeldverhouding van je eerste afbeelding. Dat is degene die je kiest wanneer je artwork een onderwerp bevat dat niet bijgesneden mag worden.
Die pixelwaarden zijn niet vast. Dawn stelt zijn root font size in layout/theme.liquid in als calc(var(--font-body-scale) * 62.5%), en --font-body-scale komt rechtstreeks uit de eigen instelling bodytekstgrootte van het thema, die standaard op 100% staat en in stappen van 5% tot 130% kan worden opgevoerd.
Bij de standaard 100% is één rem 10px, en daar komt de tabel hierboven vandaan. Zet de bodytekst op 130% en elke banner groeit in dezelfde verhouding mee: een Large-banner gaat van 720px naar 936px hoog op desktop. Merchants passen de tekstgrootte aan voor de leesbaarheid en vragen zich daarna af waarom de hero ineens het hele scherm opslokt. Dit is waarom.
12 instellingen, precies zoals ze in de theme editor verschijnen:
| ID in code | Label in editor | Type | Standaard | Bereik / opties |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100, stap 10 |
image_height | Height | select | medium | 4 opties |
image_behavior | Animation | select | none | 4 opties |
desktop_content_position | Position | select | middle-center | 9 opties |
desktop_content_alignment | Alignment | select | center | 3 opties |
show_text_box | Container | checkbox | true | — |
color_scheme | Color scheme | color_scheme | scheme-1 | — |
stack_images_on_mobile | Stack images | checkbox | true | — |
mobile_content_alignment | Alignment | select | center | 3 opties |
show_text_below | Container | checkbox | true | — |
Een paar die het waard zijn om te kennen:
image_overlay_opacity — een schuifregelaar van 0 tot 100 in stappen van 10, standaard 0. Het is veruit de snelste oplossing voor onleesbare tekst boven een drukke foto, en hij staat standaard uit.
image_behavior — 4 opties: none, ambient, fixed, zoom-in. Standaard none. Drie van de vier animeren bij het scrollen, wat main thread-werk kost op precies het element dat de browser al aan het tekenen is.
desktop_content_position — 9 posities, een volledig 3×3-raster, standaard middle-center. Los van desktop_content_alignment, dat bepaalt hoe de tekst binnen dat vak wordt uitgelijnd.
show_text_below en show_text_box staan allebei standaard op true. De eerste zet de tekst op mobiel onder de afbeelding in plaats van erboven; de tweede tekent de gevulde container achter de tekst op desktop.
De sectie neemt 3 bloktypes, met 1 vooraf ingestelde opstelling:
| Type | Naam | Instellingen |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
Het buttons-blok telt 8 instellingen omdat het twee complete knoppen bevat: label, link en een checkbox voor secundaire stijl, voor elk. Beide stijl-checkboxen staan standaard uit, wat betekent dat beide knoppen als primair worden weergegeven — daarom komen zoveel Dawn-banners met twee identiek ogende calls to action.
Alles hier is één klik verwijderd. Open sections/image-banner.liquid en scroll naar het {% schema %}-blok onderaan: die JSON is de lijst met instellingen, standaardwaarden en al. De hoogtes staan in assets/section-image-banner.css. De breedtereeksen zijn assign widths-statements bovenaan de sectie, op regel 34 en 40.
Als Shopify een nieuwe Dawn-release uitbrengt, kunnen die cijfers verschuiven. Deze pagina vermeldt precies daarom de versie waaruit ze zijn afgelezen.
3840px breed voor een banner met één afbeelding. Dawn bouwt een srcset van 9 breedtes van 375px tot 3840px, dus alles wat breder is wordt weggegooid en bij alles wat smaller is valt de grootste entry terug op je originele bestand. Gebruik je beide afbeeldingsvelden, upload dan 7680px — daar eindigt de reeks voor twee afbeeldingen.
Op desktop zijn de drie vaste opties 420px, 560px en 720px. Onder het breakpoint van 750px worden dat 280px, 340px en 390px. De vierde optie, Adapt to first image, heeft geen vaste hoogte en volgt de beeldverhouding van je afbeelding.
De bannerhoogtes zijn gedefinieerd in rem, en de root font size van Dawn is calc(var(--font-body-scale) * 62.5%). Die variabele is de instelling voor de bodytekstgrootte van het thema, standaard 100%, instelbaar tot 130%. De tekstgrootte verhogen schaalt elke op rem gebaseerde hoogte mee, banners inbegrepen.
12 instellingen op de sectie zelf in Dawn v16.0.0, plus 3 bloktypes (heading, text en buttons) die samen nog eens 12 instellingen meebrengen.
Het maakt de afbeelding achter je tekst donkerder. Het is een schuifregelaar van 0 tot 100 in stappen van 10, en hij staat standaard op 0, dus uit. Het is de snelste oplossing wanneer een koptekst onleesbaar is boven een drukke foto.