Shopify 知识库 · 概念
Layout、Template、Section、Block 与 Snippet
Shopify 主题 Layout、Template、Section、Block 与 Snippet：把目录转成渲染关系，区分页面骨架、可配置区域和复用代码。
读主题时可以沿这条教学顺序追踪：页面类型 → 模板 → 分区 → 区块；Layout 提供外层结构，Snippet 提供可复用的代码片段。它不是所有主题的逐行执行顺序，而是定位责任的办法。
flowchart TD
request["页面请求与资源上下文"] --> template["Template<br/>选择并组合页面区域"]
layout["Layout<br/>共享外层骨架"] -->|承载页面输出| template
template -->|组合| section["Section<br/>页面级可配置区域"]
section --> sectionBlock["Section block<br/>所属 Section 定义"]
section --> themeBlock["Theme block<br/>主题级可复用"]
app["应用扩展"] --> appBlock["App block"]
appBlock -->|在允许位置使用| section
layout -->|render| snippet["Snippet<br/>稳定渲染片段"]
section -->|render| snippet
sectionBlock -->|render| snippet
assets["Assets<br/>CSS、JavaScript、媒体"] -.-> layout
assets -.-> section
config["Config 与 Settings"] -.->|提供配置值| layout
config -.->|提供配置值| section
locales["Locales"] -.->|提供翻译| layout
locales -.->|提供翻译| section
这是职责与查找路径，不是固定执行时序；具体引用关系必须回到所分析主题的固定版本源码确认。
各层负责什么
| 层次 | 常见位置 | 要回答的问题 |
|---|---|---|
| Layout | layout | 哪些外层结构被多个页面共享 |
| Template | templates | 这个页面类型使用哪些内容区域 |
| Section | sections | 商家可以配置什么区域 |
| Section Group | sections 中的 JSON | 页头、页尾等区域如何组合分区 |
| Block | 主题 blocks 或分区定义 | 区域内部如何拆分可配置内容 |
| Snippet | snippets | 哪段代码需要在多处复用 |
| Supporting files | assets、config、locales | 样式脚本、配置与翻译分别在哪里 |
官方架构说明解释这些目录的职责。Snippet 不会因为被复用就自动成为编辑器中可添加的区块。
三种 Block 不能混为一谈
Theme block 是主题中可复用的区块；section block 由所属分区定义；app block 来自应用扩展。它们的定义位置与使用条件不同，读文件时先确认类型，再查引用。Blocks。
从一个功能反查源码
以文章页的分享区域为例：先找到文章使用的模板，再确定内容分区；检查分享功能由区块、代码片段还是脚本承担；最后核对编辑器是否暴露配置。文件名只能作为搜索线索，结论要以所分析主题版本的实际源码为准。
JSON 模板主要保存分区组合与配置，Liquid 模板可以包含 Liquid 与 HTML；使用 JSON 模板时，展示代码在它引用的分区中。Templates。
常见误解
目录结构不是每个文件都必须存在的清单；主题中的个别脚本文件也不是平台规定的标准文件。文件数量因主题和版本而异，旧版客户账户模板（customers/*）已被官方标为 deprecated，阅读时按所分析的版本核对，不套用固定总数。
使用 Vite 开发主题时，工具接入方法见 ShopZend 的 vite-plugin-shopify-theme 产品页与开始使用。