外贸开发shopify;如何创建Shopify模板本地开发环境

西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus外贸独立站

相信大家对Shopify都很熟悉,尤其是近年来它的发展非常迅速。 国内很多外贸公司也在使用这种在线电子商务程序。 尽管许多开发和设计人员已经习惯使用在线模板编辑器,但如果您需要执行常规编辑或模板开发,甚至涉及团队协作,在线编辑可能会感到受到限制。

本文将告诉您如何使用Theme kit,这是一个跨平台工具,允许您使用自己的开发工具在本地开发shopify模板。

一旦主题套件设置完毕,您就可以轻松地将您的流程工具(例如 Git)集成到您的模板开发中,并且您还可以使用您喜欢的编辑器,例如 Sublime text、VS Code、Atom 等。

注意:由于我的本地开发环境是基于macOS的,因此本文中的某些操作仅以macOS为例。 如果您使用的是其他操作系统,可以参考Theme Kit的官方文档。

第1步:安装主题套件

Theme Kit 是一个跨平台工具外贸开发shopify,使用命令行创建 Shopify 模板。 Theme Kit比较出名的功能包括以下几个:

首先,在终端中输入以下命令,创建Theme Kit的全局环境。

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

图像

安装后默认位置为/usr/local/bin。

当然,您也可以通过从 Theme Kit 网站下载 zip 文件来安装它。

图像

关于旧版本的兼容性问题和测试主题套件安装

在开始执行任何 Theme Kit 命令之前,请确保您使用的是最新版本的 Theme Kit 并已卸载以前的版本。 如果您是第一次安装Theme Kitshopify开发,可以跳过此步骤。

通过以下命令行卸载现有的shopify主题gem:

gem uninstall shopify-theme

确保您使用的是最新的主题套件版本(单击此处查看版本信息)。 您可以使用以下命令更新现有版本:

theme update --version=[version number]

例如:

theme update --version=v1.0.0

要测试主题套件是否正确安装并正常工作,请输入以下命令:

theme --help

第 2 步:设置 API

我们需要设置一个 API 密钥来连接商店和主题套件。 请按如下方式进行:

使用 API 密钥和密码登录 Shopify 商店后端并创建私有应用程序。

图像

在下图中红色标记的位置填写(或选择)相关信息,然后点击保存按钮。

图像

图像

单击“保存”,将出现 API 相关信息屏幕。

图像

创建一个新模板

如果要创建新模板,请在终端中输入以下命令:

theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]

例如:我在桌面上创建了一个名为shopify -dev的文件,然后输入上面的命令

图像

注意:输入命令时切记不要包含“[]”两个符号,否则会出现执行错误。

执行后打开shopify -dev文件夹,发现模板文件已经安装成功!

图像

使用现有模板查找现有模板的 id。 下面提供两种方法:

方法一:进入Shopify后台外贸开发shopify;如何创建Shopify模板本地开发环境,点击左侧Online Store下的Theme菜单,选择Current Theme位置的Actions下拉菜单,选择Edit code。 然后,您将在出现的页面的浏览器地址栏中看到一串数字。liquid开发,如下图第二张图,46369243220是主题ID。

图像

图像

方法二:按照官方方法通过命令行查找主题ID。 在终端输入以下命令,就会出现当前商店安装的所有模板。 第一个标有 live 一词的模板是您当前使用的模板。 前面的一串数字就是主题ID。

theme get --list -p=[your-password] -s=[you-store.myshopify.com]

图像

将模板下载到本地。 在终端中输入以下命令:

theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]

比如我在桌面新建一个与在线直播模板名称对应的文件夹(当然你可以随意命名)Debut,然后在终端输入以下命令:

图像

命令执行后,打开Debut文件夹,会发现模板文件已经同步。

图像

无论是同步已有模板还是创建新模板外贸开发shopify,执行该命令后都会生成一个config.yml文件,其中包含以下内容:

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

图像

第三步:更新模板到服务器

在终端中输入以下命令:

theme watch

图像

Theme Kit将监控本地文件的任何更改并自动将它们推送到服务器的模板。 如果想关闭监控功能,输入ctrl+c。

好了,以上就是本地开发shopify模板的环境配置说明。 这很简单,对吧? 当然,您也可以去Theme Kit网站查看更详细的使用方法和执行命令。

西西木科技是shopify官方合作伙伴,通过了Shopify Partner Academy认证,具备多年shopify lic主题开发经验,熟悉Liquid和各项计算机语言。

发表评论