Shopify 主题目录结构（Liquid 文件）详解

Shopify 使用 Liquid 模板语言来构建主题。每个 Shopify 主题都由多个文件夹组成，其中的 .liquid 文件是页面渲染的核心。本篇将为你详细介绍 Shopify 主题中主要目录及其 Liquid 文件的用途与开发建议。

目录结构

2025最新主题代码目录有8个文件夹，分别具有不同的功能和用途。

Shopify 主题目录结构

- - theme.liquid
  - password.liquid
- - index.liquid
  - product.liquid
  - collection.liquid
  - page.contact.liquid
- - header.liquid
  - footer.liquid
  - product-template.liquid
- - example.liquid
- - product-card.liquid
  - price.liquid
- - theme.css
  - theme.js
- - settings_schema.json
  - settings_data.json
- - en.default.json
  - zh-CN.json

📁 Layout 布局目录

常见文件：

theme.liquid
password.liquid

作用：

这是页面的整体框架文件。每个页面都会首先加载 theme.liquid，它包含了 <head>、页眉、页脚、{{ content_for_layout }} 以及其他通用设置。可以通过修改该文件，可应用于所有非结帐页面。

password.liquid 则为 “密码保护页面”的内容。

开发建议：

使用 {{ content_for_header }} 插入 Shopify 自动注入的脚本。
用 {{ content_for_layout }} 保留页面具体内容的位置。

📁 Templates 模板目录

常见文件：

index.liquid：主页模板
product.liquid：产品详情页
collection.liquid：集合页面
cart.liquid：购物车页面
404.liquid：404 页面
search.liquid：搜索页
page.liquid / page.contact.liquid：自定义页面
customers/*.liquid：登录、注册、账户页等

主题模板有两种不同的文件类型：JSON 和 Liquid。这些模板文件类型可用于构建多种模板类型，每种模板类型代表商家在线商店中的一种内容类型。

类型	描述
`JSON`	JSON 模板是带有文件扩展名的数据文件。这些模板可让您轻松地使用来自部分.json的内容填充模板。商家可以使用模板编辑器添加、删除或重新排列部分。如果您使用 JSON 模板，则任何 HTML 或 Liquid 代码都需要包含在模板引用的部分中。 JSON 模板
`Liquid`	Liquid 模板是Liquid标记文件，.liquid文件扩展名为。您可以直接将 Liquid 和 HTML 添加到 Liquid 模板中。Liquid 模板

作用：

模板控制的是“页面类型的整体结构”。它会根据页面路径自动加载对应模板，并通过 section 渲染具体内容。

开发建议：

保持模板逻辑简洁，内容交给 Section 处理。
使用 template.[name].json（Online Store 2.0）代替传统 .liquid 的灵活布局。

📁 Sections 分区目录

常见文件：

header.liquid、footer.liquid
product-template.liquid
main-collection-product-grid.liquid
featured-collection.liquid
rich-text.liquid、image-banner.liquid

作用：

Sections 是构建页面的主要模块化单元，支持自定义排序、显示与隐藏。支持全局（所有页）或基于模板渲染的局部块。

开发建议：

利用 schema 字段配置设置项，支持 Shopify 主题编辑器（Theme Editor）。
合理使用 settings 与 blocks 提高模块灵活性。

示例：


{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    { "type": "text", "id": "heading", "label": "标题" }
  ]
}
{% endschema %}

📁 Snippets 小片段目录

常见文件：

product-card.liquid
price.liquid

作用：

Snippets 是可复用的小片段，通常用于页面的局部渲染。

开发建议：

避免使用 {% render '...' %}，使用 {% include '...' %} 代替。
避免使用 {% schema %}，使用 {% schema %} 配置 schema 字段。

📁 Config 配置目录

常见文件：

settings_schema.json
settings_data.json

作用：

Config 目录用于设置 schema 和数据持久化。

开发建议：

使用 settings_schema.json 定义设置项，支持 Shopify 主题编辑器（Theme Editor）。
使用 settings_data.json 保存设置项的值，支持 Shopify 主

📁 Assets 资源目录

常见文件：

theme.css
theme.js

作用：

Assets 目录用于存放主题的静态资源，如 CSS、JS、图片等。

开发建议：

使用 theme.css 和 theme.js 存放主题的样式和脚本。
使用 {% stylesheet '...' %} 和 {% javascript '...' %} 引入静态资源。

📁 Locales 本地化目录

常见文件：

en.default.json
zh-CN.json

作用：

Locales 目录用于本地化翻译，支持 Shopify 主题编辑器（Theme Editor）。

开发建议：

使用 en.default.json 和 zh-CN.json 存放本地化翻译。
使用 {% t '...' %} 引入本地化翻译。

📁 Blocks 区块目录(2025新增)

官方文档连接

常见文件：

example.liquid

作用：

Blocks 是可复用的模块化单元，支持动态配置和动态渲染。 Block允许开发者将区块拆分成更小、可重复使用的 Liquid 块，从而创建灵活的布局。每个区块都有各自的设置，并且可以在区块内进行添加、移除和重新排序。

有三种类型的块：

主题块：在 /blocks 文件夹中创建自己的 Liquid 文件，并可在主题的多个部分中重复使用。部分块：在部分的 Liquid 文件中创建，并且仅限于在该部分内使用。应用程序块：由商家商店上安装的应用程序提供。

开发建议：

应用程序块指向标题为“应用程序阻止”部分的锚链接应用区块允许商家向主题添加特定于应用的功能，例如评论、评分或自定义表单；这些功能由商家在其商店中安装的 Shopify 应用定义。应用区块可以添加到已在其架构文件中添加支持的主题中的任何部分（或主题区块）。例如，在我们的幻灯片示例中，您可以有 /blocks/slide.liquid 要添加对应用区块的支持，您可以编写：


{% schema %}
{
  "name": "Slide",
  "blocks": [{ "type": "@theme" }, { "type": "@app" }],
 
  // Rest of your Schema code
}
{% endschema %}

详细了解Block

总结

文件夹	用途	是否可视化编辑
`layout`	页面框架，包含头部和主内容插槽	❌
`templates`	页面类型的整体结构	✅（Online Store 2.0）
`sections`	页面构建模块，可复用和动态配置	✅
`blocks`	可复用的区块/程序块/主题块	✅
`snippets`	可复用的小片段	❌
`config`	设置 schema 和数据持久化	✅
`assets`	主题静态资源	❌
`locales`	本地化翻译	✅