Shopify 2025 主题原理讲解和 8 个文件夹解析

对于 Shopify 从业者来说，了解主题的基本架构和工作原理很有必要，即使不打算成为主题开发人员。这样不仅能提升工作效率，还能在与同事和上级交流时展现专业素养。

从实际业务需求出发去理解 Shopify 主题，比单纯从技术角度学习要更有价值。虽然 Shopify 官方英文文档内容丰富，但对新手来说往往显得过于冗长和专业。

因此，我准备分享这篇教程，力求用最简单明了的方式，从店铺运营和实际应用的视角，全面介绍 Shopify 主题的核心概念。这篇教程将技术知识与实际运营场景紧密结合，让读者无需深入研究繁琐的技术细节，也不用再去查阅其他资料，就能掌握 Shopify 主题的精髓。

Shopify 主题结构图

• 为了方便各位理解，我画了这个示意图，结合视频进行讲解。
• 下图从层级关系的角度列出了 Shopify 主题 8 个文件夹中的 4 个主要文件夹

主题文件夹逐一讲解

layout（布局）

• theme.liquid中添加的代码除了结账页外，在 Shopify 网站的所有页面都会生效，所以像营销和分析代码都是加在这个文件中，例如 Google Tag Manager 的代码。
• 2.0 版之前的 Shopify 插件代码也可能加在 theme.liquid 中，但现在大多不需要这样操作了，改成了在 Shopify 主题编辑器 ~ 应用嵌入 中开启。
• 使用新的 layout 文件可以用于创建 Landing Page 之类的需求（见视频演示）

templates（模板）

• 顾名思义，templates 即为页面模板，常见的有：产品页面模板、产品系列页面模板、Pages 页面模板、博客和博客文章页面模板
• 通过创建和分配页面模板，可以实现同一类型的页面展示不同的效果，例如：
  不同的产品详情页分别展示不同的内容，做出每款产品不一样的效果

sections（分区）

• 即功能分区，可以理解为不同的功能模块，其中可以定义模块的设置项，只在模块内生效。

blocks（块）

• Shopify Winter 2025 版本之后正式上线的文件夹，目前还没有在新版官方主题中得到体现。上线之后，blocks 分为三大类：
  • Theme blocks: 在 blocks 文件夹创建，可以在不同的 sections 中使用。
  • Section blocks: 只在某个 Section（分区）中使用的 block，例如：
    产品页面的 title，用于展示产品标题。
  • App blocks: 由店铺安装的插件提供，用于 Shopify Apps 的对应功能。
• 对 Shopify 新版 blocks 感兴趣的话可以参考官方文档进行体验：

snippets（代码片段）

• 可以在不同 sections, templates, layout 文件中引用的代码片段
• 例如：用于展示产品标题的 title.liquid，文件中包含的代码：

<h2>{{ product.title | escape }}</h2>

• 引用（使用这个 Snippet）：

{% render 'title' %}

config（全局配置和设置信息）

• config 文件夹中包含两个文件：settings_data.json 和 settings_schema.json
• 前者用于存储设置项的信息（设置项的值）
• 后者用于定义主题的全局设置项

assets（资源文件）

• assets 文件夹包含了主题中需要使用的 CSS 样式文件 (.css) 和 JavaScript 文件 (.js)
• 也可能包含一些 SVG 图标、gif 动图文件等
• 不推荐在这个文件夹中存放大量图片文件，会导致主题文件过大

CSS 文件的引用示例

{{ 'base.css' | asset_url | stylesheet_tag }}

JavaScript 文件的引用

<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>

locales（语言文件）

• 可以理解为翻译文件，例如：英语、西语、法语、德语等
• .schema.json 格式的文件定义的是主题设置项对应的翻译内容
• .json 格式的文件包含的是在店铺前台显示的内容，可以通过编辑语言文件修改：

相关教程