主题定制和开发

摘要

23 主题定制和开发

2026年8月11日|Shopi8

1 分钟阅读

Shopify Shopify教程

先判断问题出现在哪里

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

实战步骤

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

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

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

安装 Shopify CLI（需提前安装 Node.js）：
npm install -g @shopify/cli @shopify/theme
登录并拉取线上主题：
shopify theme pull --store=your-store-name.myshopify.com
（选择你要开发的线上主题，将其下载到本地文件夹）
启动本地开发服务器：
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 连接

将本地代码推送到 GitHub 的 main 分支。
在 Shopify 后台授权绑定该 GitHub 仓库。
硬核效果：以后团队里的任何人，只要向 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。

FAQ