Shopify 主题开发指南：基于 CLI 与 OS 2.0 的定制实战

先判断问题出现在哪里

不要在 Shopify 后台那个简陋的代码编辑器里手敲代码了。引入现代前端工程化（Shopify CLI + GitHub + OS 2.0），在本地用 VS Code 开发，用 Git 管版本，这才是正规军的玩法。

实战步骤

步骤 1：配置 Shopify CLI 本地开发环境

告别每次修改都要刷新网页看效果的痛苦，实现本地热更新（Hot Reload）。

操作路径：本地终端 (Terminal)

1. 安装 Shopify CLI（需提前安装 Node.js）：
   npm install -g @shopify/cli @shopify/theme

2. 登录并拉取线上主题：
   shopify theme pull --store=your-store-name.myshopify.com
   （选择你要开发的线上主题，将其下载到本地文件夹）

3. 启动本地开发服务器：
   shopify theme dev
   （此时 CLI 会生成一个 http://127.0.0.1:9292 的本地预览链接。你在 VS Code 里改任何代码，浏览器都会很快自动刷新。）

步骤 2：拥抱 Online Store 2.0 (OS 2.0) 架构

OS 2.0 的核心是“一切皆 JSON”。页面不再写死在 Liquid 里，而是通过 JSON 模板灵活组装。

操作路径：本地项目 -> templates 文件夹

如果你要新建一个“关于我们”的模板，绝对不要建 page.about.liquid，必须建 page.about.json：

// templates/page.about.json
{
  "sections": {
    "main": {
      "type": "main-page", // 引用 sections/main-page.liquid
      "settings": {}
    },
    "team_grid": {
      "type": "custom-team-grid", // 引用你自定义的团队展示 section
      "settings": {
        "heading": "Meet Our Team"
      }
    }
  },
  "order": [
    "main",
    "team_grid"
  ]
}

这样做的好处是，商家可以直接在 Shopify 后台的主题编辑器里，随意拖拽改变 main 和 team_grid 的上下顺序，而不需要改一行代码。

步骤 3：打通 GitHub 自动化部署 (CI/CD)

不要再手动点“上传 ZIP 文件”更新主题了。

操作路径：Shopify后台 -> 在线商店 -> 主题 -> 添加主题 -> 从 GitHub 连接

1. 将本地代码推送到 GitHub 的 main 分支。

2. 在 Shopify 后台授权绑定该 GitHub 仓库。

3. 硬核效果：以后团队里的任何人，只要向 GitHub 的 main 分支 git push 了代码，Shopify 线上主题会在 3 秒内自动同步更新。如果改出了 Bug，直接在 GitHub 上 git revert 一键回滚。

常见误区与处理方法

误区一：本地开发时覆盖了线上的 JSON 配置

你在本地用 shopify theme dev 开发时，老板刚好在 Shopify 后台的主题编辑器里修改了首页的 Banner 图片（这会改变线上的 index.json）。你开发完直接 shopify theme push，把你本地旧的 index.json 推了上去，老板配了半天的图全没了。

规避方法：在执行 push 之前，必须先执行 shopify theme pull，把线上最新的 JSON 配置文件拉取到本地合并，然后再推送到线上。或者在 .shopifyignore 文件中忽略 templates/*.json 和 config/settings_data.json，防止代码覆盖配置。

误区二：滥用 App Blocks 导致页面卡死

OS 2.0 引入了 App Blocks，允许第三方插件直接把代码注入到 Section 里。很多开发者为了省事，在产品页塞了 10 个 App Blocks（评论、倒计时、推荐等）。这会导致页面发起几十个外部 HTTP 请求，PageSpeed 评分直接掉到 20 分。

规避方法：严格控制 App Blocks 的数量。对于非核心转化路径的插件（如底部的 Instagram 墙），必须在插件后台开启 “延迟加载 (Lazy Load)”。对于能用原生 Liquid 写出来的功能（如倒计时、免邮提示），坚决自己写，绝对不要用 App Blocks。

常见问题

修改主题开发前要不要备份主题？

要。主题开发、Liquid、API 或性能优化都建议先复制主题或使用 Git 分支，改完后再检查首页、产品页、购物车和结账路径。

没有开发经验可以照着做吗？

可以先做低风险配置和页面检查；涉及代码、API、Webhook 或结账逻辑时，建议先在测试主题或测试店铺验证，再同步到线上主题。

主题开发应该先看哪个核心指标？

先看能直接影响决策的指标，不要只看曝光或访问量。新手可以把转化率、获客成本、客单价、复购或退款情况放在同一张表里，每周复盘一次。

做主题开发前需要准备什么？

先确认目标、当前数据、页面或后台路径，再准备一份改动记录。这样出现波动时能追溯原因，也方便后续把有效动作沉淀成 SOP。

主题开发多久复盘一次比较合适？

运营类动作建议每周小复盘、每月大复盘；广告或转化测试不要因为单日波动频繁改动，至少等到有足够样本后再判断。

新手最容易踩的坑是什么？

最常见的问题是同时改太多变量，最后不知道是哪一步带来结果。每次只改一个关键点，保留截图、数据和发布时间，后续才有可复用的经验。

下一步阅读

• Shopify 增长内容
• 商品页与转化检查
• 独立站诊断