如何使用Theme Kit在本地编辑shopify主题并实时预览

Eric
30
文章
0
评论
2020年2月23日00:14:12 评论 261 1418字阅读4分43秒

安装主题套件

首先,转到themekit下载主题套件。

macOS安装

使用homebrew安装themekit.

brew tap shopify/shopify
brew install themekit
Windows Chocolatey安装

首先安装Chocolatey,然后通过以下命令安装themekit。

choco install themekit
Linux安装

如果是Linux系统,则可以使用以下脚本安装themekit。

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

安装完毕之后运行theme,如果显示下图信息则安装成功。
01

链接到商店

要想连接到商店拥有主题的读写权限,首先得建立私人应用将API秘钥添加到我们的配置中。

请登录Shopify后台,然后创建一个私人应用程序。

Shopify管理员 > Apps > 单击Manage private apps > 单击Create a new private app创建应用

然后填写信息,并将Theme templates and theme assets权限设置为读写访问权限并保存,页面刷新之后复制密码,后面步骤用得到。

下载需要修改的模板

接下来,我们需要将主题下载到本地环境中。要下载模板,首先需要知道模板的ID。获取ID的最简单方法是使用get命令,如下所示:

theme get --list -p=上一步复制的密码 -s=you-store.myshopify.com

02
然后,记下模板ID,运行以下命令从shopify下载主题:

theme get -p=上一步复制的密码 -s=you-store.myshopify.com -t=your-theme-id

03

编辑模板

我们可以编辑这些本地文件,然后运行theme watch。这将监视模板文件中的更改,当检测到文件被修改时,Theme Kit将自动将新版本上载到Shopify,因此您可以立即查看编辑后的模板样式。

04

当我们对theme.scss.liquid文件进行了一些更改,您将在终端上看到此输出

05

要上传特定文件,请运行theme upload <file>。要删除特定文件,请运行theme remove <file>。您可以通过运行查找所有命令的列表theme help。您可以通过运行获取有关命令的更多信息theme help <command>

实时预览

没有人喜欢编辑一次然后手动刷新一次页面。下面我们将使用Prepros来达到实时预览的功能。

首先下载Prepros并安装

06

将主题添加为项目

g1

只需将整个目录拖到Prepros中,即可将主题作为项目添加到Prepros。

监视.liquid文件

应将.liquid文件添加到Prepros将要监视的文件类型列表中。默认情况下是不会监视它们的,因为Prepros不会编译Liquid。

要将.liquid文件添加到监视列表,请右键任意.liquid文件,然后选择“ Watch .liquid files”。
07

将实时预览链接到店铺

下一步是设置实时预览的URL。也就是将Prepros与Shopify商店链接起来并实现实时重载的功能。

具体设置如下图:
g2

设置重新加载的延迟

最后,您需要在Prepros中设置延迟。延迟的原因是让Theme Kit有时间观察到更改,并将更改与Shopify的服务器同步。

具体设置如下图:
g3

进行修改并实时预览

现在,您已经设置了实时预览,按Ctrl+L在浏览器中打开。

g4

展开全文
  • 版权声明: 发表于 2020年2月23日00:14:12
  • 转载注明:https://www.shopifyfans.com/how-to-edit-shopify-themes-locally-using-theme-kit.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: