Shopify 主题开发快速开始
使用 Shopify CLI 创建本地主题开发环境并上传第一个自定义主题
#type / howto
#status / growing
#tech / dev
#resource / shopify
[!info] related notes
- 前置笔记: Shopify 主题, Liquid 模板引擎
- 相关 MOC: Shopify MOC
- 工作流: Shopify 本地开发工作流程
Shopify 主题开发快速开始
目标
完成本指南后，你将：
- 安装 Shopify CLI
- 创建开发商店
- 在本地编辑主题
- 实时预览更改
- 上传主题到 Shopify
预计时间：30-60 分钟
前置条件
- Node.js 18+ 安装
- Git 安装
- 文本编辑器（VS Code 推荐）
- Shopify Partner 账户（免费）
步骤
1. 创建 Shopify Partner 账户
访问 Shopify Partners，注册免费账户。
2. 创建开发商店
- 登录 Partners Dashboard
- 点击”商店” → “添加商店”
- 选择”开发商店”
- 填写商店名称（如
my-dev-shop） - 创建商店
为什么需要开发商店：免费测试环境，无需支付订阅费
3. 安装 Shopify CLI
npm install -g @shopify/cli @shopify/theme验证安装：
shopify version
# 应该显示版本号，如 3.x.x4. 初始化主题
shopify theme init my-theme
cd my-theme选择模板：
- Dawn（推荐，Shopify 官方主题）
- 或空白主题
5. 登录到开发商店
shopify theme dev会发生什么：
- 浏览器打开 Shopify 登录页
- 选择你的开发商店
- 授权 Shopify CLI 访问
6. 启动本地开发服务器
登录后，CLI 自动启动开发服务器：
✓ Synced theme files
✓ Dev server started at http://127.0.0.1:9292访问 http://127.0.0.1:9292，你会看到主题预览
7. 编辑主题
打开 templates/index.liquid，修改：
<h1>Welcome to {{ shop.name }}</h1>
<p>This is my first Shopify theme!</p>保存文件，浏览器自动刷新（热重载）
8. 上传主题到 Shopify
shopify theme push选择目标：
- 开发主题（推荐）
- 或发布为实时主题
验证
- 访问你的开发商店：
your-shop.myshopify.com - 登录 Admin
- 在”在线商店” → “主题”中看到上传的主题
- 点击”自定义”预览
常见问题
Q: shopify theme dev 报错”未找到商店”
A: 运行 shopify logout 然后重新 shopify theme dev
Q: 更改没有实时刷新 A: 检查终端是否显示”Synced”，或手动刷新浏览器
Q: 如何调试 Liquid 语法错误？ A: 查看浏览器控制台或终端错误信息