Shopify 主题编辑器使用教程：模板、Section 和 Block 怎么修改
Shopify 主题编辑器适合处理不需要改 Liquid 代码的页面调整，但真正容易出错的地方不是“按钮在哪里”，而是当前正在修改哪个主题、哪个模板，以及这个 Section 会影响一页还是一组页面。本文以我打开的 Horizon 草稿主题为例，按实际界面把模板、Section、Block、Theme settings 和 App embeds 的关系说明白。
这次操作只查看编辑器结构，没有保存或发布任何改动。截图中可以看到主题处于“草稿”状态，当前模板为“主页”，保存按钮也是不可用状态，适合作为认识界面的安全起点。
先认识 Shopify 主题编辑器的三个层级
可以把一个 Shopify 页面理解成三层：模板决定页面的整体结构，Section 负责一段相对完整的内容，Block 则是 Section 内部可以继续配置和排序的小单元。
- Template（模板）：例如主页、默认商品、默认集合和普通页面模板。一个模板可以被多个页面或商品共同使用。
- Section（分区）：例如公告栏、标头、主推内容、Featured collection 和页脚，每个 Section 负责一块完整区域。
- Block（区块）：例如标题、按钮、图片、商品卡片或菜单项。Block 是否可用、能嵌套几层，取决于主题和对应 Section 的实现。
如果想继续了解代码层面的对应关系，可以先看Shopify Section 和 Block 入门，再结合Dawn 主题目录结构理解 templates、sections 和 snippets 各自放在哪里。
Shopify 主题编辑器真实界面怎么看
截图左上角显示 Horizon 和“草稿”，中间顶部显示当前模板“主页”。左侧最外层导航包括 Sections、Theme settings 和 App embeds；进入 Sections 后，内容树又按 Header、模板、Footer 分组。右侧是随选择变化的预览区域。
在宽屏浏览器中，Shopify 可能同时显示导航栏和内容树；窗口变窄时，两层侧栏会改为堆叠显示。因此不同电脑上看到的排版可能稍有差别，但功能层级不变。
第一步：先确认正在编辑草稿主题还是在线主题
在“在线商店 → 模板”中，一个商店通常同时保留当前在线主题和若干主题库中的草稿主题。直接编辑在线主题，保存后就可能影响访客；在草稿副本中调整，则可以先预览和检查，确认无误后再决定是否发布。
我更建议先复制在线主题，或像本次一样打开明确标记为“草稿”的主题。尤其是准备调整首页结构、导航、页脚或应用区块时，先在草稿中验证比直接改在线版本稳妥。草稿主题如何生成预览链接，可以参考Shopify 草稿主题预览教程。
第二步：选对模板，再修改页面内容
Shopify 主题编辑器顶部的模板选择器不是普通的页面跳转。选中“默认商品”后，你修改的是这个商品模板；所有正在使用该模板的商品都可能显示相同的 Section 结构。商品标题、价格等资源数据仍来自各自商品，但模板中新增或删除的分区通常是共享的。
因此，想只给某一个商品增加独立内容时，不要在默认商品模板里直接堆一套只适用于它的内容。更合适的做法通常是新建模板并分配给该商品，或者使用商品 metafield 提供差异化数据。
- 修改首页前，确认顶部显示“主页”。
- 修改商品页前，确认是正确的商品模板，并留意有多少商品正在使用它。
- 修改集合、博客或普通页面前，同样先核对模板名称，不要只看右侧预览内容。
第三步：区分 Header、Template 和 Footer
编辑器中的 Header 和 Footer 通常不是当前页面独有内容。它们属于共享的 Section group：在一个页面里改动标头或页脚，其他使用相同分组的页面也会跟着变化。
中间的“模板”分组才是当前模板的主要内容区。本次 Horizon 主页中能看到“主推”和“Featured collection”等 Section。需要调整首页顺序时，应该在这个分组中拖动对应 Section，而不是误把全站标头或页脚当成普通首页内容。想了解这类分组在主题代码中的保存方式，可以继续看Shopify Section Group 实作。
第四步：修改 Section 和 Block
点击内容树中的 Section 后，侧栏会显示该分区提供的设置；展开 Section 后，可能还能看到内部 Block。常见操作包括修改文案和图片、拖动排序、临时隐藏、添加新的 Section 或 Block，以及删除不再需要的项目。
- 先点击目标 Section，确认右侧预览高亮的是正确区域。
- 一次只改一个关键设置，观察预览变化。
- 不确定是否还会使用时，优先临时隐藏，不急着删除。
- 拖动排序后检查桌面和手机预览，避免移动端内容顺序失去重点。
- 确认主题状态、模板名称和预览结果后再保存；保存草稿主题不等于发布主题。
不是所有主题都有相同的 Section 和 Block。某个教程里出现的“轮播图”或“折叠内容”，你的主题里可能没有；即使名称相同，设置项也可能因主题版本不同而变化。遇到这种情况应先核对主题文档和版本，而不是照着截图硬找。
Theme settings 和 App embeds 分别做什么
Theme settings 主要管理全局视觉和功能设置，例如颜色、字体、布局、按钮、社交链接或购物车行为。它们往往会影响多个模板，不适合当成单个页面的局部设置。
App embeds 用于启用由应用提供、但不一定固定出现在某个 Section 中的全局功能，例如分析、聊天、悬浮按钮或脚本型组件。更换主题后，应用嵌入的启用状态需要重新检查；安装应用不代表它一定已经在当前主题中启用。
发布前至少检查这六项
- 主题状态：确认是草稿主题还是在线主题。
- 模板范围：确认改动会影响哪些商品、集合或页面。
- 共享区域：标头和页脚是否被意外改动。
- 桌面预览：标题、图片、按钮和留白是否正常。
- 手机预览：重点内容顺序、图片裁切、菜单和按钮是否可用。
- 应用功能：App embeds 和应用区块是否仍在正确主题中启用。
主题编辑器的手机预览适合快速发现布局问题，但不能代替真实设备检查。准备正式发布主题时，我还会用浏览器和手机分别检查导航、商品页、购物车、表单和结账入口，而不是只看首页缩略预览。
这次实测得到的结论
这次打开的是 Horizon 草稿主题，当前模板为主页。左侧内容树清楚区分了 Header、模板和 Footer，模板分组内包含“主推”和“Featured collection”等 Section；由于没有做任何修改，保存按钮保持不可用，也没有触发发布。
对第一次使用 Shopify 主题编辑器的人来说，最重要的顺序是：先看主题状态，再选模板，然后判断 Section 的作用范围，最后才修改 Block 和具体内容。只要这四步没有混淆，大部分“改错页面”或“为什么其他页面也变了”的问题都能提前避免。
官方资料：Theme editor features overview、Templates、Sections and blocks、Theme architecture（访问日期：2026 年 9 月 1 日；实测主题：Horizon，草稿状态）。
