Reporting & research on Shopify and ecommerce
Dawn v16.0.0 asks the browser for 9 image widths from 375 to 3840px, and a different ladder up to 7680px when you use two images. This is every setting in the Image banner section, every default, and the exact heights in pixels, read from the theme's own code.
Shopify’s own documentation for the Image banner section stops at “add an image and some text”. It does not tell you what size that image should be, how tall the banner will end up, or what every dropdown actually changes. This page does, because all of it is written down in Dawn’s source code and we read it there.
How we got these numbers. On September 1, 2026 we read four files from the public Shopify/dawn repository at release v16.0.0 (2026-08-10): the section sections/image-banner.liquid, 507 lines, for the settings schema and the srcset ladders; assets/section-image-banner.css for the height rules; layout/theme.liquid for the root font-size that converts rem to pixels; and config/settings_schema.json for the body text size range. Every figure on this page was extracted from those files by script, not transcribed by hand. If a number appears here, it appears in the theme.
This is the part nobody publishes, and it is the part that decides whether your banner looks sharp on a retina laptop.
Dawn does not serve one image. It builds a srcset and lets the browser pick. The ladder of widths is hardcoded in the section, and there are two of them:
| When | Range | Steps | Widths requested |
|---|---|---|---|
| One image | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Two images | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
The second ladder switches on when you fill both the image and image_2 slots. Each image then occupies half the width, so Dawn asks for larger source files to keep the same on-screen density — the top rung goes from 3840px to 7680px.
What to upload. Match the top rung of the ladder you will actually use: 3840px wide for a single-image banner, 7680px wide for a two-image one. Anything larger is thrown away by Shopify’s image CDN. Anything smaller and the largest srcset entry silently falls back to your original, which is how banners end up soft on high-density displays.
The Height dropdown has 4 options: adapt, small, medium, large. Three of them are fixed minimum heights set in CSS, and they differ between mobile and desktop (the breakpoint is 750px):
| Setting | Mobile (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
The fourth option, adapt, drops the fixed height entirely and lets the banner take the aspect ratio of your first image. That is the one to choose when your artwork has a subject that must not be cropped.
Those pixel values are not fixed. Dawn sets its root font size in layout/theme.liquid as calc(var(--font-body-scale) * 62.5%), and --font-body-scale comes straight from the theme’s own body text size setting, which defaults to 100% and can be pushed to 130% in steps of 5%.
At the default 100%, one rem is 10px, which is where the table above comes from. Raise body text to 130% and every banner grows by the same proportion: a Large banner goes from 720px to 936px tall on desktop. Merchants change the text size setting for readability and then wonder why the hero suddenly eats the whole screen. This is why.
12 settings, exactly as they appear in the theme editor:
| ID in code | Label in editor | Type | Default | Range / options |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100, step 10 |
image_height | Height | select | medium | 4 options |
image_behavior | Animation | select | none | 4 options |
desktop_content_position | Position | select | middle-center | 9 options |
desktop_content_alignment | Alignment | select | center | 3 options |
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 options |
show_text_below | Container | checkbox | true | — |
A few that are worth knowing about:
image_overlay_opacity — a slider from 0 to 100 in steps of 10, default 0. It is the single fastest fix for unreadable text over a busy photo, and it ships turned off.
image_behavior — 4 options: none, ambient, fixed, zoom-in. Default none. Three of the four animate on scroll, which costs main thread work on exactly the element the browser is already busy painting.
desktop_content_position — 9 positions, a full 3×3 grid, default middle-center. Separate from desktop_content_alignment, which controls how the text lines up inside that box.
show_text_below and show_text_box both default to true. The first moves the text under the image on mobile instead of on top of it; the second draws the solid container behind the text on desktop.
The section takes 3 block types, with 1 preset arrangement:
| Type | Name | Settings |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
The buttons block carries 8 settings because it holds two complete buttons: label, link and a secondary-style checkbox for each. Both style checkboxes default to off, meaning both buttons render as primary — which is why so many Dawn banners ship with two identical-looking calls to action.
Everything here is one click away. Open sections/image-banner.liquid and scroll to the {% schema %} block at the bottom: that JSON is the settings list, defaults and all. The heights live in assets/section-image-banner.css. The width ladders are assign widths statements near the top of the section, at lines 34 and 40.
If Shopify ships a new Dawn release, those numbers can move. This page states the version it was read from for exactly that reason.
3840px wide for a banner with one image. Dawn builds a srcset of 9 widths from 375px to 3840px, so anything wider is discarded and anything narrower makes the largest entry fall back to your original file. If you use both image slots, upload 7680px instead — the two-image ladder tops out there.
On desktop the three fixed options are 420px, 560px and 720px. Below the 750px breakpoint they become 280px, 340px and 390px. The fourth option, Adapt to first image, has no fixed height and follows your image's aspect ratio.
The banner heights are defined in rem, and Dawn's root font size is calc(var(--font-body-scale) * 62.5%). That variable is the theme's body text size setting, default 100%, adjustable to 130%. Raising text size scales every rem-based height with it, banners included.
12 settings on the section itself in Dawn v16.0.0, plus 3 block types (heading, text and buttons) carrying 12 more settings between them.
It darkens the image behind your text. It is a slider from 0 to 100 in steps of 10, and it ships at 0, meaning off. It is the quickest fix when a heading is unreadable over a busy photo.