shopify 本地修改主题

前言

公司的官网是使用 shopify 的主题功能制作的，但是ui又总是有一些奇奇怪怪的想法，就总是会有一些 shopify 完全没办法满足的 ui 稿出现，这时候就需要自己去修改 shopify 主题里面的配置。

在 shopify 中，每一个块其实都是一个组件，我们可以通过下面的入口去修改源码

但是这样子修改有着诸多不便，比如

• 不存在代码提示，因为是在浏览器中修改，所以写代码没有任何提示，也不能格式化
• 不存在热更新，在这里修改主题，需要重新刷新主题编辑页才能够看到修改之后的结果
• 不存在版本管理，修改的代码保存过后就会直接应用，你完全不知道上一个版本是什么样的，修改了什么文件

说了这么多不便，这就显得在本地搭建 shopify 主题的开发环境是多么重要的一件事情。

主题搭建

首先，要在本地搭建环境，你本地得存在 nodejs 并且 nodejs 版本必须大于 18.16.0，而且需要魔法环境才可以。

安装

npm install -g @shopify/cli@latest

查看是否安装成功

> shopify version
3.77.1

拉取主题

shopify theme pull -s xxx

这里 xxx 为店铺的前缀，在店铺页面的路由上能找到

 shopify theme pull -s c011bf-05
?  Select a theme to open:   Type to search...

   Development
   >  Development (89fa8a-computer)

   Live
      xxx

   Unpublished
      xxx

接着就会让你选择你要拉去的主题，Live为在线主题，Unpublished 为未发布主题，这些都是可以在店铺里面看到的。拉取之后你就可以得到这样一个目录

本地启动

通过

shopify theme dev

就能够在本地启动，如果遇到下面这些报错：

可以尝试一下下面的解决方法：

1. 本地魔法需要开启 tun 模式
2. 本地的公网防火墙需要关闭

开发

在启动之后，你就会得到类似这样一个控制台

─ success ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                       │
│  Preview your theme (t)                                                                                                               │
│    • http://127.0.0.1:9292                                                                                                            │
│    • http://127.0.0.1:9292                                                                                                            │
│                                                                                                                                       │
│  Next steps                                                                                                                           │
│                                                                                                                                       │
│  Next steps                                                                                                                           │
│    • Share your theme preview (p) [1] https://c011bf-05.myshopify.com/?preview_theme_id=144116023463                                  │
│    • Customize your theme at the theme editor (e) [2]                                                                                 │
│    • Preview your gift cards (g) [3]                                                                                                  │
│                                                                                                                                       │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
[1] https://xxx.myshopify.com/?preview_theme_id=144116023463
[2] https://xxx.myshopify.com/admin/themes/144116023463/editor?hr=9292
[3] http://127.0.0.1:9292/gift_cards/[store_id]/preview

这时候 本地的 http://127.0.0.1:9292 就已经整个启动，通过修改文件里面的内容就可以进行热更新。

打开 第二个选项 你就会发现进入了编辑页面，这个是开启了一个测试的主题，你在这里面的修改并不会影响到现有的任何主题，这点从主题的标题也能够看的出来

这里有一点需要注意，就是你在主题里面编辑的内容，会更新到 templates 这个文件夹当中，但是并不会同步到你的本地，也就是一旦你关掉了本地运行的这个服务，这些修改就都消失了，（虽然我看下次启动这个临时主题还在，但是没有找到再次关联到这个临时主题的方法）。

所以在主题中进行了修改，需要同步这个临时主题的 templates 里面的所有内容到你的本地，这样才能够做到保存

我们可以新开一个文件夹，通过 shopify theme pull -s xxx 拉取这个临时主题，这样就可以将 templates 里面的所有内容更新到我们的项目当中。

推送

在你开发完成之后，你就需要推送你这个临时主题里面的内容到某个发布或者未发布的主题当中，我们可以使用

查看现有的主题列表：

shopify theme list

推送主题，这个在输入命令之后会让你选择要推送到哪个主题

shopify theme push

推送到在线主题，慎用，会直接更新激活的主题，并且无法回撤，不小心踩过一次坑。

shopify theme push -l

推送到指定主题，id就是可以通过上面的列表指令获取

shopify theme push -t [主题 id]

结语

到这里我们就可以实现shopify主题的本地修改，并且能够支持热更新，除了修改临时主题里面的内容在同步回本地会有点麻烦以外，还是能够很大幅度的提升开发效率的，并且版本管理也可以通过git来进行控制，大家都是自己的本地临时主题，也不会影响现有的主题。

文章中有一些部分可能对这个理解还不够透彻，欢迎大佬留言补充

引用

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