Shopify Dawn 主题目录结构：layout、templates、sections 和 snippets 怎么分工
理解 Shopify Dawn 主题结构，第一步不是背 Liquid 语法，而是弄清一段修改应该放进 layout、templates、sections 还是 snippets。文件放错位置，短期可能也能显示，但后续会越来越难维护。
本文以我在 2026 年 8 月 22 日核对的 Shopify 官方 Dawn 16.0.0 源码为例，沿着产品页的实际文件关系，梳理 Dawn 的主要目录和渲染顺序。本文不改线上营业主题，也不把示意图冒充 Shopify 后台截图。
先看结论：Shopify Dawn 主题结构中的目录分别负责什么
| 目录 | 主要职责 | 常见文件 |
|---|---|---|
layout | 全站最外层 HTML 骨架 | theme.liquid |
templates | 决定某类页面加载哪些 Section | product.json |
sections | 可在主题编辑器配置的页面模块 | main-product.liquid |
snippets | 由其他 Liquid 文件调用的可复用片段 | price.liquid |
assets | CSS、JavaScript、图片等静态资源 | base.css |
config | 全局主题设置定义和已保存的数据 | settings_schema.json |
locales | 前台和主题编辑器的翻译文案 | zh-CN.json |
可以先把它记成一条链路：layout 提供外壳，template 决定页面组件，section 输出一个完整模块，snippet 复用模块内部的小片段。
用产品页看懂真实渲染顺序
Dawn 16.0.0 的产品页并不是由一个文件完整输出。实际查找代码时，可以按下面的顺序向下追踪：
layout/theme.liquid输出全站页面骨架；templates/product.json声明产品页使用的 Section；sections/main-product.liquid输出商品媒体、标题、价格、变体和购买区域；snippets/price.liquid、product-variant-picker.liquid、buy-buttons.liquid等继续处理可复用的细节；assets中的 CSS 和 JavaScript 负责样式与交互。
这条链路比死记目录更有用。遇到“产品页价格在哪里改”一类问题时，不必在整个主题里盲目搜索：先从产品模板找到主 Section，再看它渲染了哪个 snippet。
layout：全站页面的最外层骨架
Dawn 的主要布局文件是 layout/theme.liquid。它包含 HTML 文档结构、全局 meta、样式资源、页头与页脚 Section Group，以及页面主体的插入位置。
其中 Header 和 Footer 并不是简单的静态 Section；Dawn 通过分组 JSON 保存组件与顺序，再由 layout 全站渲染。需要继续拆解这层关系时，可参考 Shopify Section Group 教程。
<head>
{{ content_for_header }}
</head>
<body>
{{ content_for_layout }}
</body>content_for_header 是 Shopify 注入必要脚本、元数据等内容的位置，content_for_layout 则输出当前页面模板的结果。它们不是普通占位符，复制或重写布局文件时不能随手删除。
如果只是调整某个产品信息模块，不应该先改 theme.liquid。layout 更适合全站都需要的结构，例如全局容器、页头页脚调用或通用资源加载。
templates：决定页面由哪些 Section 组成
Dawn 目前大量使用 JSON 模板。以 templates/product.json 为例，文件中的 sections 对象保存每个 Section 的配置，order 数组决定它们的排列顺序。
{
"sections": {
"main": { "type": "main-product" },
"related_products": { "type": "related-products" }
},
"order": ["main", "related_products"]
}上面是为了说明结构而精简的示意，不是 Dawn 原文件的完整复制。type 值会对应 sections 目录中的同名 Liquid 文件，例如 main-product 对应 sections/main-product.liquid。
JSON 模板主要保存结构和设置数据，不适合直接堆放 HTML。需要改变模块输出时，应继续进入对应的 Section；需要改变某类页面默认有哪些模块时，才考虑模板。
sections：一个可以配置的完整页面模块
Section 通常对应主题编辑器中的一个模块。main-product.liquid 是 Dawn 产品页的核心 Section，它既负责主要 HTML，也会读取 section.settings 和 section.blocks，再按需要调用多个 snippet。
{% render 'price', product: product, use_variant: true %}
{% render 'product-variant-picker', product: product, block: block %}
{% render 'buy-buttons', product: product, block: block %}Section 文件底部的 {% schema %} 定义主题编辑器中的名称、设置、Block 和 preset。此前已经单独整理过 Shopify Section、Block 与 schema 的实际关系；理解目录以后，再看那篇文章会更容易定位代码。
snippets：把重复细节拆成可维护的小片段
Snippet 不会单独出现在主题编辑器的“添加区段”列表里，它通常通过 render 标签被 layout、section 或其他 snippet 调用。价格、商品卡片、分页、图标和变体选项都适合拆成 snippet。
render 使用隔离作用域：被调用的 snippet 不会自动拿到调用方的全部局部变量，需要什么就明确传什么。例如把 product 传给价格 snippet，比依赖隐含上下文更容易阅读和复用。图片输出也是适合复用的场景，完整写法可参考 Shopify Liquid 响应式图片实作。
如果一段代码只服务于某个 Section，而且没有重复使用，先留在 Section 中通常更直观；当同一结构在多个位置出现，或者 Section 已经大到难以阅读时，再拆成职责明确的 snippet。
assets、config 和 locales 不只是配角
- assets：保存 CSS、JavaScript、字体和图片。组件脚本应尽量按用途组织，避免把所有逻辑继续塞进一个全局文件。
- config：
settings_schema.json定义全局主题设置，settings_data.json保存当前主题实例的设置值。前者适合开发者维护，后者不应被当成普通源码随意覆盖。 - locales：保存可翻译文案。前台文案通常在语言 JSON 文件中，主题编辑器设置文案则常见于
*.schema.json。
为什么 Dawn 16.0.0 里没有 blocks 目录
Shopify 当前官方主题架构已经包含顶层 blocks 目录，用于可复用、可嵌套的 Theme Block。但我核对的 Dawn 16.0.0 根目录并没有这个文件夹，现有很多模块仍使用写在 Section schema 中的 Block。
这并不冲突：官方架构说明的是主题可以使用的能力，具体主题只需要包含自己实际使用的目录。阅读 Dawn 代码时，要区分“Section 内定义的 Block”和“独立 blocks 目录中的 Theme Block”，不能只看到 Block 这个名字就当成同一种实现。
一段定制代码到底应该放在哪里
- 所有页面都需要的最外层结构：考虑
layout。 - 决定产品页、集合页或文章页由哪些模块组成：看
templates。 - 希望商家在主题编辑器中添加、排序和配置一个完整模块：新建或修改
sections。 - 同一小段标记在多个文件里重复使用：拆到
snippets。 - 只是样式、脚本或静态媒体：放进
assets，并由相关组件按需加载。 - 属于全局可配置选项：检查
config，同时补齐locales翻译。
修改之前还要先确认影响范围。直接改 theme.liquid 或 main-product.liquid 可能影响大量页面；在未发布主题中做小范围修改、保留版本记录并逐页验证，通常更容易回滚。
我实际核对了哪些文件
- Dawn 版本：16.0.0；本地 Git 提交：
258f00f。 layout/theme.liquid：确认包含content_for_header与content_for_layout。templates/product.json：确认主要 Section 类型包括main-product与related-products。sections/main-product.liquid：确认会调用价格、媒体、变体选择和购买按钮等 snippets。- 根目录：确认本版本包含 assets、config、layout、locales、sections、snippets、templates，未包含顶层 blocks 目录。
这些核对只用于解释文件关系，没有修改开发商店中的主题。后续真正做 Dawn 定制时，仍应在未发布主题中测试，避免直接把实验代码写进正在营业的线上主题。如果还没确定开发环境类型，可以先看 Shopify Dev store 与 Client transfer store 的区别。
总结
理解 Dawn 目录结构，关键不是背文件夹名称，而是顺着页面渲染链路找代码：theme.liquid 提供全局外壳，JSON template 选择 Section，Section 组织可配置模块，snippet 复用更小的输出片段，assets、config 和 locales 分别补充资源、全局设置与翻译。
以后遇到具体改动，可以先判断它影响全站、某类页面、一个可配置模块，还是一个重复片段。把职责放对位置，Dawn 后续升级、排错和回滚都会轻松很多。
如果要继续拆解 templates/*.json，可以看Shopify JSON template 实测，里面用 Dawn 备用页面模板说明 sections、order 和 template suffix 如何对应。
官方资料：Shopify 主题架构、Layouts、Templates、Sections、Snippets、Blocks、Shopify 官方 Dawn 仓库（访问日期：2026 年 8 月 22 日）
