跳转至主要内容

在电脑本地修改 Shopify 主题之 Shopify CLI 安装方法和常用指令用法演示

本期教程可配合下一期 Shopify 主题结构和原理教程 进行学习。

配置了 Shopify 主题本地修改环境之后,可以在浏览器中实时查看修改结果(自动刷新),并且不影响店铺上正在使用的在线主题。

由于 Shopify 店铺后台最多存放 20 个主题,随着时间的推移,单纯通过复制主题进行备份和管理是不方便的,因此配置本地环境在修改主题时进行版本记录和管理也非常有用。

前置条件

必须

可选

安装

安装或升级

npm install -g @shopify/cli@latest

查看版本号

shopify version

指令

下载主题

shopify theme pull -s 

启动 dev

shopify theme dev
  • 如果先 pulldev,会使用 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

相关链接

Shopify-cli theme
Shopify CLI is a command-line interface tool that helps you generate and work with Shopify apps, themes and custom storefronts. You can also use it to automate many common development tasks.
Liquid reference
The Liquid reference documents the Liquid tags, filters, and objects that you can use to build Shopify themes.
第 161-3 期 如何从零开始学习 Shopify 主题修改优化和开发
这篇文章为 Shopify 主题开发初学者提供全面的指南。它涵盖了从设置开发环境到构建自定义主题的各个步骤,包括 Liquid 模板语言、CSS 和 JavaScript 的使用。文章详细讲解了如何使用 Shopify CLI 工具,以及如何在本地预览和部署主题。
Shopify 2025 主题原理讲解 和 8 个文件夹解析
提供示意图并讲解 Shopify 主题结构和原理,包括代码文件之间的关系以及每个代码文件夹的用途。包括 layout 布局、templates 模板、sections 分区、blocks 块、snippets 代码片段、config 配置文件、assets 资源文件、locales 翻译文件。