自定义主题

作为主题开发人员,您可以为 Shopify 商家定制主题。这些定制可以是小范围的调整,也可以是完全的重新设计。

在本教程中,您将使用 Shopify CLI 为商家定制主题,然后与商家分享您的进展。

注意事项
本教程描述的是不使用 Shopify GitHub 集成的自定义主题。如果您的商家使用 Shopify GitHub 集成来管理他们的主题代码,那么您可以向他们申请访问版本库,或者使用 Shopify CLI 向连接到版本库分支的主题推送更改。

您将学到的内容

学完本教程后,您将完成以下内容:

  • 访问商家的商店
  • 设置本地开发环境
  • 下载商家主题的副本
  • 进行更改并预览
  • 与商家共享您的更改
  • 发布您的更改

准备

您要处理的商店的 URL,例如 johns-apparel.myshopify.com。

安装Shopify CLI的依赖

不同的操作系统需要安装不同的程序

操作系统依赖
macOSHomebrew
Node.js 16 或更高
Ruby
Git
注意: 当您使用 Homebrew 安装 Shopify CLI 时,Homebrew 会为您安装 Node.js、 Ruby 和 Git。
WindowsNode.js 16 或更高
Ruby+Devkit 3.0, 安装使用RubyInstaller for Windows
(选择 MSYS2 component 和MSYS2 base installation 选项)
Git
Bundler 2.3.8 或更高
LinuxNode.js 16 或更高
Ruby 3.0
Ruby 开发环境(ruby-dev / ruby-devel)
Git
cURL
GCC
g++
Make

第 1 步:申请访问商家网店

要使用商家的主题,您应该申请访问其网店。在商家商店中制作主题可以让您使用商家的产品和其他资源进行测试。

如果您还没有这样做,您应该申请一个具有管理商店主题权限的合作者账户。合作者账户只允许你访问商家希望你访问的商店部分,而且不计入商店的员工人数限制。

第2步:安装Shopify CLI

Shopify CLI是一个命令行工具,可以帮助您创建Shopify主题。它可以让您在本地开发时预览、测试和共享对主题的修改。请按照以下说明在 macOS、Windows 或 Linux 上安装 Shopify CLI。

macOS (Homebrew)

brew tap shopify/shopify
brew install shopify-cli

Windows 和 Linux (npm)

要安装 Shopify CLI,请使用命令行在全局安装 @shopify/cli 和 @shopify/theme Node.js 软件包。

npm install -g @shopify/cli @shopify/theme

第 3 步:下载商家的主题代码

如果商家没有自己的主题 GitHub 代码库,则您需要下载一份主题代码,以便在本地进行处理。

运行以下命令,获取商店中所有主题的列表。你可以使用 –path 标志指定存储主题的本地路径。

$ shopify theme pull --store {store-name}


从列表中选择一个主题。其内容会下载到当前文件夹或指定文件夹。

提示
如果您还没有登录,在运行 pull 命令时,系统会提示您登录 Shopify。确保使用被授予访问商店权限的账户登录。如果已登录的账户没有适当的访问权限,则可以使用 shopify auth logout。

第 4 步:进行自定义

下载商家的主题后,您可以对主题代码进行必要的修改。例如,您可以使用我们的本地化教程在商家主题中添加对多种货币和语言的支持,也可以调整主题的 CSS 以改变其外观。

第 5 步:预览更改的内容

更改主题后,您可以运行 shopify theme dev,在浏览器中与主题进行交互。Shopify CLI 会将主题作为开发主题上传到您连接的商店。

命令会返回一个 URL,该 URL 会热重载 CSS 和分区的本地更改,让您可以使用商店的数据实时预览更改。此预览功能仅适用于 Google Chrome 浏览器。

  1. 在终端中,导航到工作目录。
  2. 使用以下命令:
$ shopify theme dev

在谷歌浏览器中,导航至 http://127.0.0.1:9292,预览主题

您也可以使用 dev 命令为开发主题生成预览链接和主题编辑器链接。

运行 shopify auth logout时,开发主题将被销毁。如果您需要与商家分享进度,请继续下一步。

第 6 步:分享你的主题更改

要让商家查看你的更改,您需要将对主题的更改上传到商家的商店。系统会提示你选择要更新的主题。该命令会返回一个指向 Shopify 管理器中主题编辑器的链接和一个预览链接,您可以与商家分享这两个链接。

shopify theme push

提示
如果不想用更改内容更新商店中的现有主题,可以使用 –unpublished 标记,将主题作为新的未发布主题上传到主题库中。

第 7 步:发布更新后的主题

商家批准更改后,您就可以发布主题,使其在商家的网店中生效。如果您还没有将更改推送到网店,那么您需要在发布主题之前将更改推送到网店。

1.输入以下命令

shopify theme publish

2.从列表中选择要发布的主题。

3.选择 “是 “确认要发布的指定主题。

现在,主题已发布成功。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注