2025 年搭建 Shopify 主题开发环境

Shopify 商家无需编码技能即可修改主题。然而，部分企业需要全新主题、网站或应用等进阶功能。

Shopify 平台提供强大开发工具，采用主流技术栈并遵循规范，专业人士可快速搭建环境，DIY 创业者也能轻松上手。

你需要它吗？

在深入之前，请先评估自身及公司是否需要搭建主题或应用开发环境。

作为北美最受欢迎的电商平台，Shopify 约占美加电商网站 30% 的份额，拥有数百万运营商店。

其易用性是关键优势。因此，Shopify 主题支持高度自定义，无代码用户也能实现丰富功能。

Shopify 商家可以无需代码即可自定义主题。

除“无代码”模块外，熟悉 HTML、CSS 或 Liquid 模板语言的开发者还能深度控制布局。

主题编辑器允许使用自定义 Liquid 标签、HTML、JavaScript 和 CSS。

此外，Shopify 应用商店提供大量即插即用解决方案。若仍无法满足需求，可参考以下方法开启定制开发。

Shopify 开发环境

Shopify 开发始于命令行界面（CLI），包含三种类型：

• 用于主题的 Shopify CLI；
• 用于无头商务的 Shopify CLI；
• 用于应用的 Shopify CLI。

本文以“用于主题的 CLI”为例进行演示。

步骤 1：创建 Shopify Partner 账户

这是门槛最低的一步，可免费获取开发商店作为测试平台。

• 在 Shopify Partners 官网注册账户；
• 导航至“商店”板块，创建开发商店。

主题开发环境需要一个开发商店，可通过 Shopify Partners 计划获取。

步骤 2：安装 Shopify CLI

安装 Shopify CLI for themes 需满足以下要求：

• Node.js 版本 18.20+、20.10 或更高；
• Node.js 包管理器；
• Git 版本 2.28.0 或更高。

本文介绍 npm 和 Yarn 两种包管理器的安装方式，请根据偏好选择。打开终端确认已安装对应管理器后，运行相应命令。

npm 安装命令：

npm install -g @shopify/cli@latest

Yarn 安装命令：

yarn global add @shopify/cli@latest

验证安装是否成功：

shopify version

安装好 Shopify CLI 后，version 命令将显示该程序的相关信息。

步骤 3：创建或克隆主题

Shopify 主题可以完全从头构建，也可以基于 Dawn 主题的克隆版进行开发。

开发者可依据 Shopify 目录结构从零构建自定义主题，编写所有必需文件：

pec-example-theme/
├── assets/
├── config/
├── layout/
├── locales/
├── sections/
├── snippets/
├── templates/
└── theme.liquid

更推荐的做法是克隆 Dawn 主题作为基础，命令如下：

shopify theme init pec-example-theme

将“pec-example-theme”替换为你的主题名称。数秒后，克隆的主题将加载至本地计算机。

主题的 init 命令会在指定目录中构建 Dawn 主题的克隆版本。

步骤 4：启动本地服务器

将本地主题连接至步骤 1 创建的开发商店。

在终端中使用 cd 命令切换至主题目录：

cd pec-example-theme

返回 Shopify Partner 仪表板，打开开发商店并复制 URL。在下方命令中替换实际域名：

shopify theme dev --store store-name.myshopify.com

此命令将触发登录流程并启动本地 Web 服务器，具体步骤包括：

• 提供用户验证码；
• 提示按键打开浏览器；
• 登录 Shopify 账号；
• 完成双因素身份验证；
• 确认验证码。

此时本地服务器已运行，可在开发环境中实时预览主题更改，也可通过商店后台自定义主题。关闭终端即可停止服务器。

步骤 5：推送主题

修改完成后，可将主题推送到开发环境或直接发布到线上商店。

推送至线上商店：

shopify theme push --live

更新本地开发环境：

shopify theme push --development

简单部分

搭建 Shopify 主题开发环境并不复杂。但环境就绪后，真正的挑战在于如何开发出优秀的主题。