在电脑本地修改 Shopify 主题之 Shopify CLI 安装方法和常用指令用法演示
通过 Bilibili 观看本期 Shopify 教程通过 Youtube 观看本期 Shopify 教程
本期教程可配合下一期 Shopify 主题结构和原理教程 进行学习。
配置了 Shopify 主题本地修改环境之后,可以在浏览器中实时查看修改结果(自动刷新),并且不影响店铺上正在使用的在线主题。
由于 Shopify 店铺后台最多存放 20 个主题,随着时间的推移,单纯通过复制主题进行备份和管理是不方便的,因此配置本地环境在修改主题时进行版本记录和管理也非常有用。
前置条件
必须
可选
- 在 VS Code 中安装 Shopify Liquid 插件
- 参考视频演示,在 VS Code 中安装 中文语言 插件
安装
安装或升级
npm install -g @shopify/cli@latest
查看版本号
shopify version
指令
下载主题
shopify theme pull -s
启动 dev
shopify theme dev
- 如果先
pull
再dev
,会使用pull
下来的文件创建开发主题,不影响原主题 - 如果直接执行,会生成新的开发主题
- 生成的开发主题在后台主题列表看不到,不计入 20 主题限制,但 7 天不使用会自动删除
直接修改特定主题
shopify theme dev -t [主题 id]
上传主题修改
shopify theme push
上传到在线主题:
shopify theme push -l
上传到特定主题:
shopify theme push -t [主题 id]
查看主题列表
shopify theme list
如需查看店铺和主题 id
shopify theme info
如需登出账号
shopify auth logout
- 如果有生成的 dev 主题,会被删除。如果想保留,应使用
shopify theme push
指令或:
shopify theme share
Shopify CLI 和 Theme Kit
Shopify CLI 和 Theme Kit 的区别是什么?Shopify CLI 是目前推荐的选择,Theme Kit 是旧版的主题开发工具。现在已经是 2025 年了,尽管如此,截至教程发布时间,Theme Kit 仍然可以胜任 Shopify 主题本地修改工作。
主要区别在于 blocks
文件夹:Theme Kit 可以下载和修改 Shopify 主题的七个文件夹,但是 blocks
文件夹不能下载。所以等到后续 blocks
文件夹正式被采用了,Theme Kit 就会被逐渐淘汰了。
目前,如果你在使用 Shopify CLI 进行主题修改时遇到问题,或者你的主题用不上 blocks 文件夹,也可以尝试一下 Shopify Theme Kit