【本地代码编辑器上开发Shopify网站】3个步骤，轻松实现

时间：2023-05-26 10:09:01 | 来源：网站运营

时间：2023-05-26 10:09:01 来源：网站运营

【本地代码编辑器上开发Shopify网站】3个步骤，轻松实现： 许多Shopify网站开发人员并不太习惯使用在线Shopify主题代码编辑器，因为官方的代码编辑器并不够智能。目前常用的代码编辑器有Sublime，Visual Studio Code，Atom等等，如果想长期的开发一个Shopify项目，开发人员最好可以在本地环境上开发。实际上Shopify主题是可以在本地开发，但需要搭配一个工具-ThemeKit，然后再按照以下步骤设置本地开发环境就可以实现：

1. 安装Theme Kit
2. 获取API访问权限
3. 使用Theme Kit配置主题

---

【安装Theme Kit】

1.Mac或Linux安装

自动安装方式：

curl -s

https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo pythonHomebrew方式：

brew tap shopify/shopifybrew install themekit


2.Windows安装：

自动Powershell安装：

(New-Object System.Net.WebClient).DownloadString("https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install.ps1") | powershell -command -手动安装步骤：

1.在C：/ Program Files /中创建一个名为Theme Kit的文件夹，下载ThemeKit安装包（步骤下方），然后将下载文件里面的程序复制到C：/ Program Files / Theme Kit中。

2.右键单击【我的电脑】，然后【系统保护】->【高级】，点开【环境变量】的按钮，在第二个面板中查找名为Path的变量，双击后，把变量值添加以下内容：; C：/ Program Files / Theme Kit /，最后点击确定。

3.最后验证是否已安装Theme Kit工具包，请先打开cmd.exe并输入Theme。如果跟下图所示一致，恭喜你已经安装成功Theme Kit！

选择合适你电脑系统环境的安装包进行下载安装

• MacOS，64-bit，Download
• Windows，64-bit，Download
• Windows，32-bit，Download
• Linux：64-bit，Download
• Linux：32-bit，Download

---

【获取API访问权限】

由于需要把API密钥添加到Theme Kit的配置中，这样才可以让Shopify商店和themekit之间建立连接，连接成功后，开发就可以在本地环境修改代码并自动同步到Shopify网站主题代码库上。

必须要商店管理员账号登录你的Shopify商店，从【Apps】->【Manage private apps】进去创建一个私人应用程序。新建私人应用程序后，填写App Name和开发邮箱后，展开显示API权限设置，找到关于Themes的权限并改为具有读写访问权限，点击保存后将生成这个APP的API参数。

请查看Admin API信息，把Password记录下来，稍后的步骤将会用到这个API密码。

---

【配置现有主题】

要连接现有主题之前你需要获取将要下载主题的ID号是多少，而获取主题ID号的最简单方法是转到主题编辑器，单击“Edit Code”，然后从URL复制主题ID号-这将是http://XXXXX.myshopify.com/admin/themes/后的最后几串数字。

下载主题命令：

theme get --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]配置主题命令：

theme configure --password=[your-password] --store=[you-store.myshopify.com] --themeid=[your-theme-id]下载主题命令：

theme download本地监视主题命令：当本地文件有修改后，theme watch命令可以实时检测代码变化，并同步到线上主题上。

theme watch


【测试实时监视.liquid文件】

上面只是安装配置的相关教程，接下来才是重头戏了，我们要尝试在这个Sandbox项目上监视主题，首先根据上面的教程输入配置命令以及监视命令，cmd上会出现以下这个信息，这代表测试主题已经正在监视了。

下面这张图是Sandbox项目某个测试主题上的首页效果，我们现在在本地文件找搭配修改导航的背景色的地方，然后做代码修改，修改之前导航是没有底色的。

现在修改导航背景色代码，把导航加上背景颜色#ccc，代码如下：

当我们对theme.scss.liquid文件进行了一些更改后，终端上可以看到以下变化。

这时候我们再回头刷新一下测试主题，发现导航背景上已经是灰色，这说明我们本地环境是有效的，实时监视成功！

以上就是使用Theme Kit在本地编辑Shopify主题并实时预览的说明，大家都学会了吗？

---