修改so_想自定义修改 Shopify Liquid 主题?手把手教你配置本地主题开发环境,避免翻车被辞退…...

本文详细介绍了如何配置Shopify本地开发环境,包括下载Theme Kit,设置环境变量,创建API,获取Theme ID,以及将配置信息写入config.yml文件,以实现高效且安全地修改Shopify Liquid主题。
摘要由CSDN通过智能技术生成

47c02ded083f6d045c62321aab127cd2.png

后语

注:在写完这篇文章 5 天后,我被辞退了。对,标题我没改过。

好在被辞退了,才找到更适合的工作 :)

前言

毫无疑问,修改主题能够实现功能增强,或细节优化,提升转化率。

然而,如果直接在网站后台修改已经上线的主题,一来容易出错,二来效率低,要知道,每个操作流程省那么几秒,累积起来也是很客观的,而且,流畅能提升工作状态,减缓精力消耗。

So, let's get started !

一、下载及配置环境变量

1. 下载 Shopify Theme Kit 客户端

2. 在 C:Program Files 新建目录 Theme Kit,并将下载文件放入

3. 配置环境变量

a. 右键资源管理器-属性-高级系统设置

16acc64e5914cdcf438a67e3a54048b4.png

b. 选择“环境变量”

316e78da362942fa55c8f36223b31786.png

c. 选择 用户变量-Path-编辑-新建,直接粘贴路径,连续点击 "确定" 即可。

ab2ff6bdf078d5a5b897664f16072384.png

3d78479ca847c508a5954447735eafba.png

二、创建 API

  1. Shopify 后台-Apps-Manage Private Apps

e49757195f838042d5a28f0ad209b5db.png

(202011更新:现在只有店主账号才能创建,员工账号看不到入口)

00c62407dc21ba4580973e0ea63bf539.png

345de63d6ede3aca659892835ad8811e.png

2. Create new Private App

52c98be78ce83deb56774592a991237a.png

3. 填写名称和邮箱

dcc95216b3993f217332fc1caa835b98.png

4. 往下滚动,点击 Show inactive Admin API permissions

d5f6a7e05ac31ffa4143b82e5e055b9c.png

5. 一直往下滚动,找到 Themes,改成 Read and write,点击 右上角的 Save

05daf7671c2aaf3c04af37cd4824ae1c.png

6. 点击 Create App

dd11d1388d234902c157c92dadb07ca6.png

7. 创建成功,往下滚动,复制 API Key 下面的 Password,复制成功后会有提示

a49e0ccc578f55e2a6403dac98f6423c.png

8d5367300ea0c950f0db417deb3a8ff8.png

三、获取 Theme ID

  1. 在现有主题基础上复制一份主题

b0283e49076f1d9679b9f4378be0482c.png

2. 复制完成后,在下方 Copy 的主题上点击 Customize,跳转之后,网址中的数字就是 Theme ID

bdf4fd2397dec55d1bb25b1be1ba608a.png

所以现在 API password, Shopify 店铺地址, Theme ID 都有了

四、将配置信息写入 config.yml 文件

  1. 在其他路径新建 config.yml 文件

b4f4b1b79b2e9ada8034499f2c12d490.png

2. (用 Notepad++ 或 Visual Studio Code 等)将下列代码粘贴到 config.yml 中,并替换对应的 Password, Theme ID(获取方式见下文)和 店铺地址,注意去掉 [ ],详见截图示例。

development:
  password: [your-api-password]
  theme_id: "[your-theme-id]"
  store: [your-store].myshopify.com

3e77d6cdb5ba6087032959fa1bb0c23d.png

3. 保存之后,在文件资源管理器地址栏输入 cmd 之后回车

9d954dafd2f08c32237a641ba4310b8c.png

4. 输入 theme download ,回车,下载完成之后,主题文件会下载到对应的文件夹

theme download 

06b38ffbb36182ecf917ca0a1aaf4c3c.png

5. 继续在 cmd 中输入 theme watch,并回车,这样可以监测修改是否成功或是否出错

theme watch

b7e675e1af7161cc32e8886c48aaf522.png

6. 下载并安装 Visio Studio Code,打开主题文件夹,编辑之后保存,即可看到更改状态。

44039f07c93635502e1362d179d60844.png

57c61557529f209694f87bb7911905b0.png

备注:同步是单向的,因此建议保持在本地修改的习惯,如果在网站后台修改了主题,需要运行 theme download 才能同步到本地。

每次需要修改主题时,在对应的文件夹运行 theme watch 即可。

绑定多个主题,以及通过 Quicker 动作快速在当前文件夹打开命令终端,并运行 theme download(这样就不用每次手动输入)的演示,过几天再补充。该学习了。

By the way,今天申请创建的微信圈子晚上已经通过了审核,感兴趣的同学可以扫码加入交流:

45f56d587e0b555aa23068bb3d9db41d.png

文章看完没搞定?高清视频在这里:

第 04 期-Shopify 主题修改-Theme Kit 套件安装与更新_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com
0fd424e6c4acde99519473438ac8eb4e.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值