Reporting & research on Shopify and ecommerce
Horizon's hero has 36 section settings and 8 block types carrying 104 more, and its Height dropdown switches from rem to svh as the screen grows. Read from the theme's source at commit 8b42ace.
Horizon is the theme Shopify ships to new stores, and its Hero section is the first thing most merchants touch. The theme editor shows you a Height dropdown with six choices and an image slot. It does not tell you that three of those choices change their unit of measurement depending on screen width, or that “Large” here means something completely different from “Large” in Dawn.
How we got these numbers. On September 1, 2026 we read the public Shopify/horizon repository at commit 8b42ace (2026-08-31) — Horizon ships no releases and no tags, so the commit is the version. We took the settings schema and the srcset ladders from sections/hero.liquid, 1496 lines; the height variables from snippets/theme-styles-variables.liquid; and the section rules from assets/base.css. Block descriptions were resolved from the theme’s shared blocks/ library, because the hero schema only names them. Every figure was extracted from those files by script.
This is the part that surprises people. Horizon does not have one height per option — it has three, across two breakpoints, and the unit switches:
| Setting | Mobile | ≥40em | ≥60em |
|---|---|---|---|
| Small | 15rem = 240px | 40svh | 50svh |
| Medium | 25rem = 400px | 55svh | 65svh |
| Large | 35rem = 560px | 70svh | 80svh |
Below 40em the heights are fixed in rem. Above it they become svh, the small viewport height unit — a percentage of the visible screen. So on a phone a Large hero is a fixed 560px tall, and on a wide desktop it is 80% of whatever the visitor’s window happens to be.
Two more heights bypass the table entirely. full-screen sets 100svh. custom exposes a slider, section_height_custom, running 0 to 100% with a default of 50 — and that value is also written straight out as svh, not pixels.
Both themes offer a Large hero. They are not comparable, for two separate reasons.
The rem base differs. We searched every one of the theme’s files: Horizon never overrides the root font size, so 1rem is the browser default, 16px. Dawn sets font-size: calc(var(--font-body-scale) * 62.5%), which makes 1rem 10px. The same 35rem would mean 560px in Horizon and 350px in Dawn.
The unit differs above the breakpoint. Dawn’s Large is a fixed 720px on desktop, the same on every screen. Horizon’s Large is 80svh, so it grows with the display: about 720px on a 900px-tall window and about 1152px on a 1440px one.
If you are porting a design between the two themes, this is the single setting most likely to break it.
Horizon builds a srcset from two hardcoded ladders, at lines 103 and 105 of the section:
| Ladder | Range | Steps | Widths requested |
|---|---|---|---|
| Full-width media | 832–3840px | 6 | 832, 1200, 1600, 1920, 2560, 3840 |
| Split media | 416–1600px | 5 | 416, 600, 800, 1200, 1600 |
Upload 3840px wide for a hero that spans the page. The narrower ladder tops out at 1600px because each image only ever occupies part of the width there.
Note the bottom rung: Horizon starts at 832px where Dawn starts at 375px. Horizon simply does not serve a phone-sized version of a full-width hero image, which is worth knowing if your traffic is mostly mobile and on slow connections.
Dawn describes its blocks inside the section schema. Horizon names them and keeps the descriptions in a shared library, so reading sections/hero.liquid alone tells you nothing about what a block can do. Resolved, the 8 types carry 104 settings between them:
| Type | Name | Settings | Defined 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 a wildcard: it accepts any theme block, which is why it has no settings of its own. group is the heavy one at 36 settings, because it is a layout container that repeats most of the section’s own alignment and spacing controls one level down.
For scale: Dawn’s image banner offers 3 block types carrying 12 settings in total. Horizon’s hero offers 8 carrying 104. That is the real difference between the two themes, and it is not visible anywhere in the theme editor.
36 settings, as they appear in the editor:
| ID in code | Label in editor | Type | Default | Range / options |
|---|---|---|---|---|
media_type_1 | Type | select | image | 2 options |
image_1 | Image | image_picker | — | — |
video_1 | Video | video | — | — |
media_type_2 | Type | select | image | 2 options |
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 options |
image_1_mobile | Image | image_picker | — | — |
video_1_mobile | Video | video | — | — |
media_type_2_mobile | Type | select | image | 2 options |
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 options |
vertical_on_mobile | Vertical on mobile | checkbox | true | — |
horizontal_alignment | Alignment | select | flex-start | 4 options |
vertical_alignment | Position | select | center | 3 options |
align_baseline | Align text baseline | checkbox | false | — |
horizontal_alignment_flex_direction_column | Alignment | select | flex-start | 3 options |
vertical_alignment_flex_direction_column | Position | select | center | 4 options |
gap | Gap | range | 12 | 0–100px, step 1 |
section_width | Width | select | page-width | 2 options |
section_height | Height | select | medium | 6 options |
section_height_custom | Custom height | range | 50 | 0–100%, step 1 |
background_color | Background color | color | — | — |
toggle_overlay | Media overlay | checkbox | — | — |
overlay_color | Overlay color | color | #00000026 | — |
overlay_style | Overlay style | select | solid | 2 options |
gradient_direction | Gradient direction | select | to top | 2 options |
blurred_reflection | Blurred reflection | checkbox | false | — |
reflection_opacity | Reflection opacity | range | 75 | 0–100%, step 1 |
padding-block-start | Top | range | 0 | 0–100px, step 1 |
padding-block-end | Bottom | range | 0 | 0–100px, step 1 |
Worth pointing out:
Four separate alignment settings. horizontal_alignment and vertical_alignment apply when content flows in a row; horizontal_alignment_flex_direction_column and vertical_alignment_flex_direction_column apply when it stacks. Change one and the other keeps its old value, which is the usual reason a hero looks right on desktop and wrong on mobile.
reflection_opacity — a slider from 0 to 100%, default 75, paired with blurred_reflection. Dawn has no equivalent.
Four image slots and four video slots. The hero takes media twice over — desktop and a separate mobile set behind custom_mobile_media, which defaults to false.
Open sections/hero.liquid and read the {% schema %} block at the bottom for the settings. The heights are lines 143 to 157 of snippets/theme-styles-variables.liquid. Block descriptions are in blocks/ — one file per type, named exactly as the type column above.
Horizon has no releases, so there is no version number to quote. This page names the commit it was read from instead; if the theme changes, these figures move with it.
3840px wide for a full-width hero. Horizon requests 6 widths from 832px to 3840px. For split media it uses a second ladder of 5 widths topping out at 1600px, so 1600px is enough there.
On mobile the fixed options are 240px, 400px and 560px. Above 40em they become 40svh, 55svh and 70svh, and above 60em 50svh, 65svh and 80svh. Full-screen is 100svh and Custom is a slider read directly as svh.
Two reasons. Horizon never overrides the root font size, so 1rem is the browser default 16px, while Dawn sets 62.5% and gets 10px. And above the breakpoint Horizon measures in svh, a percentage of the window, while Dawn stays on a fixed value.
36 on the section itself, plus 8 block types carrying 104 settings between them. The block settings are not in the section file — Horizon keeps them in a shared blocks/ library.
In one file per block type under blocks/ in the theme. The hero schema lists only the type names, so reading the section alone shows blocks with no settings at all. The @theme entry is a wildcard that accepts any theme block.