Shopify相信大家都已经很熟悉了，特别是近几年发展的非常快，国内不少外贸企业也都在使用这款在线电商程序。虽然很多开发者和设计师已经习惯了使用在线模版编辑器，但是如果你需要进行定期常规编辑或者开发模版的话，甚至是涉及到团队协作的时候，在线编辑就会感觉受限了。
本篇文章将向你讲述如何使用Theme kit这款跨平台的工具让你可以使用自己的开发工具在本地开发shopify模版。
一旦Theme Kit设置好以后，你就可以轻松的整合你的流程工具（比如Git）到你的模版开发中，同时你还可以使用你喜好的编辑器，比如Sublime text, VS Code, Atom等。
说明：因为我的本地开发环境是基于macOS的 ，所以本文部分操作仅以macOS为例。如果你是其他操作系统的话，可以参考Theme Kit的官方说明文档。
第一步：安装Theme Kit
Theme Kit 是一个跨平台的工具，使用命令行command-line来创建Shopify模版。Theme Kit比较有名的功能包括以下几点：
- 多环境上传模版
- 快速上传和下载
- 监视本地变化并自动上传到Shopify
- 支持Windows，Linux和macOS多个操作系统
首先在终端中输入如下命令来创建Theme Kit的全局环境。
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
image
安装完以后默认的位置是
/usr/local/bin 。
当然，你也可以通过从Theme Kit的网站下载一个zip文件来来进行安装。
image
关于旧版本的兼容问题和测试Theme Kit安装
在你开始执行任何Theme Kit的命令之前，请确保使用的是最新版本的Theme Kit，并且已经卸载了之前的版本。如果你是第一次安装Theme Kit，这步可以略过。
通过以下命令行卸载现有的shopify theme gem：
gem uninstall shopify-theme
确保你使用的是最新的theme kit版本（点击这里查看版本信息）。可以使用如下命令更新现有版本：
theme update --version=[version number]
例如：
theme update --version=v1.0.0
测试Theme Kit是否安装正确并且能够正常工作，输入如下命令：
theme --help
第二步：设置API
我们需要设置API密匙来连接商店和Theme Kit。步骤如下：
API密匙和密码
- 登录到Shopify商店后台，创建一个Private app。
image
- 如下图红色标识的位置填写（或选择）相关信息，并点击保存按钮。
image
image
- 点击保存以后出来的API相关信息屏幕
image
创建全新的模版
如果你想创建一个全新的模版，那么在终端输入如下命令：
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
例如：我在桌面创建了一个名为shopify-dev的文件，然后输入如上命令
image
注意：输入命令的时候切记不要带“[]”这两个符号，否则会执行错误。
执行完以后打开shopify-dev文件夹，发现模版文件已经安装成功啦！
image
使用现有的模版
- 查找现有模版的id。下面提供两种方法：
方法一：进入Shopify后台，点击左侧Online Store下面的theme菜单，在Current Theme位置选择Actions下拉菜单，选择Edit code，紧接着，你会在出来的页面的浏览器地址栏里面看到一串数字，如下方第二张图所示，46369243220便是Theme ID。
image
image
方法二：老老实实的按照官方提供的方式通过命令行查找Theme ID。在终端输入如下命令，然后便会出来当前店铺上安装的所有模版，其中第一个标有live字样的是你当前使用的模版。前面的一串数字就是Theme ID。
theme get --list -p=[your-password] -s=[you-store.myshopify.com]
image
- 下载模版到本地。在终端输入如下命令：
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
比如我在桌面新建一个文件夹对应网上live的模版名称（当然，名称你可以随便起）Debut，然后在终端输入如上命令：
image
命令执行完以后打开Debut文件夹，你会发现模版文件已经同步好了。
image
不管你是同步了一个已经存在的模版，还是新建了一个模版，执行完命令后都会生成一个config.yml文件，里面有如下内容：
development:
password: [your-api-password]
theme_id: "[your-theme-id]"
store: [your-store].myshopify.com
image
第三步：更新模版到服务器
在终端输入如下命令：
theme watch
image
Theme Kit会监视本地文件的任何变化，并自动推送到服务器的模版上去。如果想关闭监视功能，输入 ctrl + c 即可。
好了，以上就是在本地开发shopify模版的环境配置说明，很简单是不是？当然，你也可以到Theme Kit的网站上查看更详细的使用方法和执行命令。
以上文章为原创作品。如需转载请遵循CC版权协议正确标明出处。
网友评论