Shopify Section Group 教程：Dawn Header 与 Footer 分组实作
做 Shopify 主题时，Header 和 Footer 看起来像固定在全站的两块区域，但在 Online Store 2.0 主题里，它们不一定要写成无法调整的静态 Section。Shopify Section Group 用一个 JSON 文件保存一组 Section、设置和顺序，再由 layout/theme.liquid 在全站布局中渲染。这样公告栏、导航和页脚既能保持全站共用，也能在主题编辑器中调整。
这篇基于本地 Dawn 16.0.0 工作副本做一次文件级实测：header-group.json 包含 2 个 Section，footer-group.json 包含 1 个 Section；完整主题使用 Shopify CLI 4.7.0 运行 Theme Check，结果为 0 个 error、11 个 warning。文章只解释本地主题结构，不需要登录 Shopify 后台，也没有修改在线商店。
Shopify Section Group 解决什么问题
普通 JSON template 负责某一种页面的内容区域，例如产品页或集合页；Section Group 更适合放在 layout 控制的全站区域。Shopify 官方建议多数主题主要把它用于 Header 和 Footer。它的价值不是“多一层 JSON”，而是把全站固定位置与可编辑 Section 组合起来：
- layout 决定分组出现在哪个全站位置；
- 分组 JSON 决定包含哪些 Section，以及它们的初始设置和顺序；
- Section 自己的 schema 决定可以配置哪些字段、Block 和可用范围；
- 主题编辑器可以在允许的范围内添加、移除和排序 Section。
如果还不清楚 layout、template、section 和 snippet 的分工，可以先看 Shopify Dawn 主题目录结构。Section Group 位于 layout 与具体 Section 之间，理解这层关系后再改 Header 会更稳。
第一步：在 layout 中找到分组入口
Dawn 的 layout/theme.liquid 并不直接用两个静态 section 标签输出 Header 和 Footer，而是在主内容前后分别调用分组：
{% sections 'header-group' %}
<main id="MainContent">
{{ content_for_layout }}
</main>
{% sections 'footer-group' %}这里使用的是复数 sections 标签，参数是分组文件名去掉 .json 后的部分。Header 分组在 content_for_layout 前，Footer 分组在其后，因此无论中间加载首页、产品页还是文章页模板，这两个全站区域都会保持在正确位置。
第二步：读懂 header-group.json
Dawn 16.0.0 的 sections/header-group.json 结构可以简化为：
{
"name": "t:sections.header.name",
"type": "header",
"sections": {
"announcement-bar": {
"type": "announcement-bar",
"settings": {}
},
"header": {
"type": "header",
"settings": {}
}
},
"order": ["announcement-bar", "header"]
}根级 type 表示分组类型；sections 对象保存每个 Section 实例；order 则给出实际渲染顺序。实测文件中 announcement-bar 在 header 前，所以公告栏先输出，导航 Header 后输出。
sections 对象里的键是这个分组内的实例 ID，内部 type 才对应实际文件名。例如 "type": "announcement-bar" 要能找到 sections/announcement-bar.liquid。实例 ID 和文件类型可以相同，但概念上不是一回事。
order 不是装饰字段
只把一个 Section 写进 sections 对象，并不等于它一定会按预期显示。order 中的 ID 必须存在于 sections，并且不能重复。想把导航放到公告栏之前，需要同时调整顺序，而不是依赖 JSON 对象的书写位置：
"order": ["header", "announcement-bar"]官方当前限制是一个 Section Group 最多渲染 25 个 Section，每个 Section 最多包含 50 个 Block。Header 通常远远用不到这个上限；如果分组已经堆到难以理解，往往应该先整理信息结构，而不是继续增加组件。
第三步：用 enabled_on 限制可加入位置
分组 JSON 决定已经安装的 Section，而 Section 文件自己的 schema 可以决定它允许出现在哪里。Dawn 的 announcement-bar.liquid 使用了下面的限制：
{% schema %}
{
"name": "t:sections.announcement-bar.name",
"enabled_on": {
"groups": ["header"]
}
}
{% endschema %}这表示公告栏面向 Header 类型的 Section Group 开放。与它对应的 disabled_on 是排除逻辑：除列出的模板或分组外，其他位置都允许。两者只能选择一个，不能在同一个 Section schema 中同时使用。
如果希望 Section 能在主题编辑器的“添加 Section”列表中出现，还要为它定义 presets。只有被 JSON 直接引用、却没有 preset 的 Section，通常不能由商家从编辑器中自由新增。关于 schema、preset 和 Block 的基础关系，可继续参考 Shopify Section 和 Block 入门。
Footer 分组为什么更简单
Dawn 的 footer-group.json 默认只有一个 footer Section，order 也只有同一个 ID。这不代表 Footer 不能拆分，而是 Dawn 把菜单、文本、订阅和其他内容继续放进 Footer Section 的 Block 中管理。
什么时候新增 Section、什么时候新增 Block，可以用作用域判断：需要在 Footer 分组内作为独立模块排序时用 Section；只属于 Footer 本身、离开 Footer 没有独立意义的内容更适合做 Block。这样主题编辑器的层级不会被拆得过碎。
我会重点检查的 5 个错误
- layout 引用名与文件名不一致：
{% sections 'header-group' %}应对应sections/header-group.json。 - Section type 找不到文件：分组中的
type必须能解析到对应的sections/*.liquid。 - order 引用了不存在的 ID：先检查
sections的键，再核对order。 - 把 type 和实例 ID 混为一谈：复制 Section 时实例 ID 要唯一，内部 type 可以继续指向同一个文件。
- 新增 Section 后编辑器找不到：检查 preset，以及
enabled_on或disabled_on是否把当前分组排除。
Shopify Theme Check 的 JSONMissingSection 会检查 JSON template 或 Section Group 引用的 Section 类型是否有对应文件。本次对完整 Dawn 16.0.0 工作副本运行检查，得到 0 error 和 11 warning，退出码为 0；这些 warning 来自其他主题文件，没有发现 Section Group 缺失引用。命令和结果判断方式可看 Shopify Theme Check 使用教程。
一个更稳妥的修改流程
- 先确认
theme.liquid中的分组入口和位置； - 备份当前主题或保留干净的拉取副本；
- 核对分组的
type、sections和order； - 检查目标 Section 的 schema、preset 和可用范围；
- 在本地运行 Theme Check，再进入主题预览验证桌面端和手机端；
- 确认无误后再上传到未发布主题，不直接覆盖线上主题。
我这次使用的 Dawn 工作副本来自此前的本地拉取和打包流程。需要建立同样的安全基准时，可以先看 Shopify theme pull 教程，把在线主题拉到独立目录后再分析和修改。
结论
Shopify Section Group 的关键不是记住一段 JSON，而是分清三层职责：layout 决定全站位置，分组文件决定 Section 实例和顺序，Section schema 决定自身能力与可用范围。Dawn 的 Header 用公告栏加导航两个 Section，Footer 默认用一个 Footer Section，这个结构足够清楚，也便于商家在主题编辑器中维护。
官方资料：Section groups、Section schema、JSONMissingSection（访问于 2026 年 8 月 28 日；本文实测 Shopify CLI 4.7.0、Dawn 16.0.0）。
