Onderzoek en research over Shopify en e-commerce
De hero van Horizon heeft 36 sectie-instellingen en 8 bloktypes die er nog 104 bij dragen, en de dropdown Hoogte schakelt van rem naar svh zodra het scherm groter wordt. Gelezen uit de broncode van het thema op commit 8b42ace.
Horizon is het thema dat Shopify meelevert aan nieuwe winkels, en de Hero-sectie is het eerste waar de meeste merchants aan zitten. De theme editor laat je een dropdown Hoogte zien met zes keuzes en een plek voor een afbeelding. Wat er niet bij staat, is dat drie van die keuzes hun meeteenheid veranderen afhankelijk van de schermbreedte, of dat “Large” hier iets volstrekt anders betekent dan “Large” in Dawn.
Hoe we aan deze cijfers komen. Op 1 september 2026 hebben we de publieke repository Shopify/horizon gelezen op commit 8b42ace (2026-08-31) — Horizon levert geen releases en geen tags, dus de commit is de versie. Het settings-schema en de srcset-reeksen komen uit sections/hero.liquid, 1496 regels; de hoogtevariabelen uit snippets/theme-styles-variables.liquid; en de sectieregels uit assets/base.css. De blokbeschrijvingen zijn opgezocht in de gedeelde blocks/-bibliotheek van het thema, omdat het hero-schema ze alleen bij naam noemt. Elk cijfer is met een script uit die bestanden gehaald.
Dit is het deel dat mensen verrast. Horizon heeft niet één hoogte per optie — het heeft er drie, over twee breakpoints, en de eenheid verandert:
| Instelling | Mobiel | ≥40em | ≥60em |
|---|---|---|---|
| Small | 15rem = 240px | 40svh | 50svh |
| Medium | 25rem = 400px | 55svh | 65svh |
| Large | 35rem = 560px | 70svh | 80svh |
Onder 40em staan de hoogtes vast in rem. Daarboven worden ze svh, de small viewport height-eenheid — een percentage van het zichtbare scherm. Op een telefoon is een Large hero dus een vaste 560px hoog, en op een breed bureaublad 80% van wat het venster van de bezoeker ook maar is.
Twee andere hoogtes slaan de tabel volledig over. full-screen zet 100svh. custom biedt een slider, section_height_custom, van 0 tot 100% met standaard 50 — en die waarde wordt ook rechtstreeks weggeschreven als svh, niet als pixels.
Beide thema’s bieden een Large hero. Ze zijn niet vergelijkbaar, om twee losse redenen.
De rem-basis verschilt. We hebben elk bestand van het thema doorzocht: Horizon overschrijft de root font size nooit, dus 1rem is de browserstandaard, 16px. Dawn zet font-size: calc(var(--font-body-scale) * 62.5%), waardoor 1rem 10px wordt. Dezelfde 35rem zou dus 560px betekenen in Horizon en 350px in Dawn.
De eenheid verschilt boven het breakpoint. Large in Dawn is een vaste 720px op desktop, op elk scherm hetzelfde. Large in Horizon is 80svh en groeit dus mee met het display: ongeveer 720px bij een venster van 900px hoog en ongeveer 1152px bij een van 1440px.
Als je een ontwerp tussen de twee thema’s overzet, is dit de instelling die het het snelst stuk maakt.
Horizon bouwt een srcset uit twee hardcoded reeksen, op regel 103 en 105 van de sectie:
| Reeks | Bereik | Stappen | Opgevraagde breedtes |
|---|---|---|---|
| Media volle breedte | 832–3840px | 6 | 832, 1200, 1600, 1920, 2560, 3840 |
| Gesplitste media | 416–1600px | 5 | 416, 600, 800, 1200, 1600 |
Upload 3840px breed voor een hero die de hele pagina beslaat. De smallere reeks eindigt op 1600px omdat elke afbeelding daar altijd maar een deel van de breedte inneemt.
Let op de onderste sport: Horizon begint bij 832px waar Dawn bij 375px begint. Horizon levert simpelweg geen telefoonformaat van een hero-afbeelding over de volle breedte, en dat is goed om te weten als je traffic vooral mobiel is en op langzame verbindingen zit.
Dawn beschrijft zijn blokken binnen het sectieschema. Horizon noemt ze alleen bij naam en houdt de beschrijvingen in een gedeelde bibliotheek, dus alleen sections/hero.liquid lezen vertelt je niets over wat een blok kan. Opgezocht dragen de 8 types samen 104 instellingen:
| Type | Naam | Instellingen | Gedefinieerd in |
|---|---|---|---|
@theme | — | 0 | wildcard |
text | Text | 19 | blocks/text.liquid |
button | Button | 12 | blocks/button.liquid |
logo | Logo | 15 | blocks/logo.liquid |
jumbo-text | Jumbo text | 9 | blocks/jumbo-text.liquid |
spacer | Spacer | 7 | blocks/spacer.liquid |
group | Group | 36 | blocks/group.liquid |
_marquee | Marquee | 6 | blocks/_marquee.liquid |
@theme is een wildcard: het accepteert elk themablok, en daarom heeft het geen eigen instellingen. group is de zwaarste met 36 instellingen, omdat het een layoutcontainer is die de meeste uitlijn- en spatiëringsopties van de sectie zelf een niveau lager herhaalt.
Een maatstaf: de image banner van Dawn biedt 3 bloktypes met in totaal 12 instellingen. De hero van Horizon biedt 8 met 104. Dat is het echte verschil tussen de twee thema’s, en het is nergens in de theme editor te zien.
36 instellingen, zoals ze in de editor verschijnen:
| ID in code | Label in editor | Type | Standaard | Bereik / opties |
|---|---|---|---|---|
media_type_1 | Type | select | image | 2 opties |
image_1 | Image | image_picker | — | — |
video_1 | Video | video | — | — |
media_type_2 | Type | select | image | 2 opties |
image_2 | Image | image_picker | — | — |
video_2 | Video | video | — | — |
stack_media_on_mobile | Stack media | checkbox | false | — |
custom_mobile_media | Show different media on mobile | checkbox | false | — |
media_type_1_mobile | Type | select | image | 2 opties |
image_1_mobile | Image | image_picker | — | — |
video_1_mobile | Video | video | — | — |
media_type_2_mobile | Type | select | image | 2 opties |
image_2_mobile | Image | image_picker | — | — |
video_2_mobile | Video | video | — | — |
link | Link | url | — | — |
open_in_new_tab | Open link in new tab | checkbox | false | — |
content_direction | Direction | select | column | 2 opties |
vertical_on_mobile | Vertical on mobile | checkbox | true | — |
horizontal_alignment | Alignment | select | flex-start | 4 opties |
vertical_alignment | Position | select | center | 3 opties |
align_baseline | Align text baseline | checkbox | false | — |
horizontal_alignment_flex_direction_column | Alignment | select | flex-start | 3 opties |
vertical_alignment_flex_direction_column | Position | select | center | 4 opties |
gap | Gap | range | 12 | 0–100px, stap 1 |
section_width | Width | select | page-width | 2 opties |
section_height | Height | select | medium | 6 opties |
section_height_custom | Custom height | range | 50 | 0–100%, stap 1 |
background_color | Background color | color | — | — |
toggle_overlay | Media overlay | checkbox | — | — |
overlay_color | Overlay color | color | #00000026 | — |
overlay_style | Overlay style | select | solid | 2 opties |
gradient_direction | Gradient direction | select | to top | 2 opties |
blurred_reflection | Blurred reflection | checkbox | false | — |
reflection_opacity | Reflection opacity | range | 75 | 0–100%, stap 1 |
padding-block-start | Top | range | 0 | 0–100px, stap 1 |
padding-block-end | Bottom | range | 0 | 0–100px, stap 1 |
Het vermelden waard:
Vier aparte uitlijninstellingen. horizontal_alignment en vertical_alignment gelden wanneer de content in een rij loopt; horizontal_alignment_flex_direction_column en vertical_alignment_flex_direction_column gelden wanneer die stapelt. Verander er één en de andere houdt zijn oude waarde, wat de gebruikelijke reden is dat een hero er goed uitziet op desktop en verkeerd op mobiel.
reflection_opacity — een slider van 0 tot 100%, standaard 75, in combinatie met blurred_reflection. Dawn heeft hier geen equivalent voor.
Vier plekken voor afbeeldingen en vier voor video’s. De hero neemt media dubbel op — desktop en een aparte mobiele set achter custom_mobile_media, dat standaard op false staat.
Open sections/hero.liquid en lees het {% schema %}-blok onderaan voor de instellingen. De hoogtes staan op regel 143 tot 157 van snippets/theme-styles-variables.liquid. De blokbeschrijvingen staan in blocks/ — één bestand per type, precies genoemd zoals in de kolom type hierboven.
Horizon heeft geen releases, dus er is geen versienummer om aan te halen. Deze pagina noemt in plaats daarvan de commit waaruit is gelezen; verandert het thema, dan schuiven deze cijfers mee.
3840px breed voor een hero over de volle breedte. Horizon vraagt 6 breedtes op, van 832px tot 3840px. Voor gesplitste media gebruikt het een tweede reeks van 5 breedtes die op 1600px eindigt, dus daar is 1600px genoeg.
Op mobiel zijn de vaste opties 240px, 400px en 560px. Boven 40em worden dat 40svh, 55svh en 70svh, en boven 60em 50svh, 65svh en 80svh. Full-screen is 100svh en Custom is een slider die direct als svh wordt gelezen.
Twee redenen. Horizon overschrijft de root font size nooit, dus 1rem is de browserstandaard van 16px, terwijl Dawn 62.5% instelt en op 10px uitkomt. En boven het breakpoint meet Horizon in svh, een percentage van het venster, terwijl Dawn op een vaste waarde blijft.
36 op de sectie zelf, plus 8 bloktypes die samen 104 instellingen dragen. De blokinstellingen staan niet in het sectiebestand — Horizon bewaart ze in een gedeelde blocks/-bibliotheek.
In één bestand per bloktype onder blocks/ in het thema. Het hero-schema noemt alleen de typenamen, dus wie alleen de sectie leest, ziet blokken zonder enige instelling. De @theme-regel is een wildcard die elk themablok accepteert.