关于 Shopify 与电商的报道与研究
Dawn v16.0.0 会向浏览器请求从 375 到 3840px 的 9 种图片宽度；当你使用两张图片时，则是另一套最高到 7680px 的宽度阶梯。本文列出 Image banner 区块的每一个设置项、每一个默认值，以及以像素为单位的精确高度，全部来自主题自身的代码。
Shopify 自己关于 Image banner 区块的文档只讲到「添加一张图片和一些文字」。它没有告诉你这张图片该用多大、横幅最终会有多高，或者每个下拉菜单实际改变了什么。本文会讲清楚，因为这些内容全都写在 Dawn 的源代码里，而我们就是从那里读出来的。
这些数字是怎么来的。 2026 年 9 月 1 日，我们从公开的 Shopify/dawn 仓库的 v16.0.0 版本（2026-08-10）读取了四个文件：区块文件 sections/image-banner.liquid，507 行，用于获取设置项 schema 和 srcset 阶梯；assets/section-image-banner.css，用于高度规则；layout/theme.liquid，用于把 rem 换算成像素的根字号；以及 config/settings_schema.json，用于正文字号的取值范围。本页的每一个数字都是用脚本从这些文件中提取的，不是手工抄录的。凡是出现在这里的数字，都出现在主题里。
这是没人发布过的部分，也是决定你的横幅在视网膜笔记本屏幕上是否清晰的部分。
Dawn 并不只提供一张图片。它会构建一个 srcset，让浏览器自行挑选。宽度阶梯在区块中是硬编码的，而且一共有两套：
| 场景 | 范围 | 档数 | 请求的宽度 |
|---|---|---|---|
| 单张图片 | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| 两张图片 | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
当你同时填入 image 和 image_2 两个位置时，第二套阶梯就会启用。此时每张图片各占一半宽度，因此 Dawn 会请求更大的源文件来保持相同的屏幕像素密度——最高一档从 3840px 变为 7680px。
该上传什么。 与你实际会用到的那套阶梯的最高一档保持一致：单图横幅用 3840px 宽，双图横幅用 7680px 宽。更大的部分会被 Shopify 的图片 CDN 丢弃。更小的话，最大的那一档 srcset 会静默回退到你的原始文件，这就是横幅在高像素密度屏幕上显得发虚的原因。
Height 下拉菜单有 4 个选项：adapt、small、medium、large。其中三个是在 CSS 中设定的固定最小高度，且移动端与桌面端不同（断点为 750px）：
| 设置 | 移动端（<750px） | 桌面端（≥750px） |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
第四个选项 adapt 完全取消固定高度，让横幅采用第一张图片的宽高比。当你的图片中有不能被裁掉的主体时，就该选这个。
这些像素值并不固定。Dawn 在 layout/theme.liquid 中把根字号设为 calc(var(--font-body-scale) * 62.5%)，而 --font-body-scale 直接来自主题自身的正文字号设置，它默认为 100%，可以按 5% 的步长提高到 130%。
在默认的 100% 下，1rem 等于 10px，上表就是这么算出来的。把正文字号提高到 130%，每个横幅都会按同样比例放大：Large 横幅在桌面端的高度会从 720px 变成 936px。商家为了可读性而调整字号设置，然后纳闷为什么主视觉突然占满了整个屏幕。原因就在这里。
12 个设置项，与主题编辑器中显示的完全一致：
| 代码中的 ID | 编辑器中的标签 | 类型 | 默认值 | 范围 / 选项 |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100，步长 10 |
image_height | Height | select | medium | 4 个选项 |
image_behavior | Animation | select | none | 4 个选项 |
desktop_content_position | Position | select | middle-center | 9 个选项 |
desktop_content_alignment | Alignment | select | center | 3 个选项 |
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 个选项 |
show_text_below | Container | checkbox | true | — |
其中有几个值得了解：
image_overlay_opacity —— 一个从 0 到 100、步长为 10 的滑块，默认 0。当文字压在杂乱照片上无法辨认时，这是最快的单一修正手段，而它出厂时是关闭的。
image_behavior —— 4 个选项：none、ambient、fixed、zoom-in。默认 none。其中三个会在滚动时产生动画，这恰好会在浏览器正忙于绘制的那个元素上消耗主线程资源。
desktop_content_position —— 9 个位置，完整的 3×3 网格，默认 middle-center。它与 desktop_content_alignment 是分开的，后者控制文字在该容器内部如何对齐。
show_text_below 和 show_text_box 都默认为 true。前者在移动端把文字移到图片下方而不是压在图片上；后者在桌面端在文字后面绘制实色容器。
该区块支持 3 种块类型，带 1 个预设排列：
| 类型 | 名称 | 设置项数 |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
buttons 块有 8 个设置项，因为它包含两个完整的按钮：各自的标签、链接和一个次要样式复选框。两个样式复选框都默认关闭，意味着两个按钮都渲染为主要按钮——这就是为什么这么多 Dawn 横幅上线时带着两个看起来一模一样的行动号召。
这里的一切都只有一次点击的距离。打开 sections/image-banner.liquid，滚动到底部的 {% schema %} 块：那段 JSON 就是设置项清单，包含所有默认值。高度定义在 assets/section-image-banner.css 中。宽度阶梯是区块文件顶部附近的 assign widths 语句，位于第 34 行和第 40 行。
如果 Shopify 发布新的 Dawn 版本，这些数字可能会变动。本页之所以标明所读取的版本，正是出于这个原因。
单张图片的横幅用 3840px 宽。Dawn 会构建一个从 375px 到 3840px 共 9 种宽度的 srcset，因此更宽的部分会被丢弃，更窄则会让最大的那一档回退到你的原始文件。如果你同时使用两个图片位，请改为上传 7680px——双图阶梯的上限就在这里。
在桌面端，三个固定选项是 420px、560px 和 720px。在 750px 断点以下，它们变为 280px、340px 和 390px。第四个选项 Adapt to first image 没有固定高度，会跟随图片的宽高比。
横幅高度是以 rem 定义的，而 Dawn 的根字号是 calc(var(--font-body-scale) * 62.5%)。该变量来自主题的正文字号设置，默认为 100%，可调至 130%。提高字号会让所有基于 rem 的高度按比例放大，横幅也包括在内。
在 Dawn v16.0.0 中，区块本身有 12 个设置项，另有 3 种区块类型（heading、text 和 buttons），它们合计再带来 12 个设置项。
它会把文字后方的图片压暗。这是一个从 0 到 100、步长为 10 的滑块，出厂值为 0，即关闭。当标题在杂乱照片上难以辨认时，这是最快的修正手段。