为商家自定义主题

作为一名主题开发者，你可以为 Shopify 商家自定义主题。这些自定义可以是小修改，也可以是完全的重设计。Shopify Partners 可以通过 Shopify Partner Directory 提供主题定制服务。

在本教程中，你将使用 Shopify CLI 来自定义商家的主题，然后把你的进展分享给他们。

如果你是为某位客户自定义主题，也建议你先查看一下我们整理的 与 merchants 合作的最佳实践。

注意

本教程讲的是如何自定义那些 没有使用 Shopify GitHub integration 的主题。如果你的 merchant 是通过 GitHub 来管理主题代码的，你可以向他们申请仓库访问权限，或者使用 Shopify CLI 将改动 push 到跟某个 GitHub 分支绑定的主题上。

你将学到的内容

完成本教程后，你将完成以下操作：

  • 拿到了 merchant 店铺的访问权限
  • 设置好了本地开发环境
  • 下载了一份 merchant 的主题代码
  • 做了一个修改并预览了效果
  • 把修改分享给 merchant
  • 发布了你的修改

前置条件

  • 你已经安装了 Shopify CLI
  • 你知道你要操作的店铺 URL，例如 example.myshopify.com

第一步：申请访问 merchant 的店铺

要操作 merchant 的主题，首先你要申请访问他们的店铺。在 merchant 的店铺里工作，可以让你直接用他们的产品和资源测试主题。

如果还没申请的话，你应该申请一个带有 Manage themes 权限的 collaborator account。Collaborator account 只允许你访问 merchant 授权的部分，而且不会计入店铺的 员工账户限制。

小提示

你也可以用其他账户和凭证访问主题。了解更多。

第二步：下载 merchant 的主题代码

如果 merchant 没有用 GitHub repository 来管理主题，那你就需要下载一份主题代码到本地进行开发。

  1. 运行以下命令，获取店铺里所有主题的列表。你也可以用 --path 参数指定要下载到的本地路径：

    1. shopify theme pull \--store {store-name}

  2. 从列表中选择一个主题，内容就会被下载到当前文件夹或你指定的文件夹。

小提示

如果你之前还没有登录 Shopify，运行 pull 命令时会提示你登录。确保用的是有权限访问该店铺的账户。如果你已经登录但没有合适的权限，可以通过 shopify auth logout 退出当前登录。

第三步：进行自定义修改

下载完主题后，你就可以对主题代码进行修改了。例如，你可以参考我们的 本地化教程 为主题增加多币种和多语言支持，或者你也可以修改一下 CSS 来改变主题外观。

想查看更多功能的实现方式，请继续阅读 后续步骤。

第四步：预览你的修改

修改完主题后，你可以运行 shopify theme dev 在浏览器中实时查看效果。Shopify CLI 会把你本地的主题上传为一个 development theme，挂载在你当前连接的店铺上。

命令会返回一个 URL，它可以 hot reload 本地对 CSS 和 section 的修改，让你可以用店铺的真实数据即时预览。这种预览只支持 Google Chrome。

  1. 在终端进入你的工作目录

  2. 运行以下命令来启动本地服务：

    1. shopify theme dev

  3. 在 Google Chrome 中访问 http://127.0.0.1:9292 打开预览页面

你也可以通过 dev 命令生成一个 预览链接 和一个指向 theme editor 的链接。

注意：当你运行 shopify auth logout 时，这个 development theme 会被销毁。如果你需要把你的修改进度分享给 merchant，可以继续进行下一步。

第五步：分享你的修改

要把你的修改分享给 merchant，你需要把本地的修改上传到他们店铺的某个主题上。系统会提示你选择要更新的主题。命令执行后，会返回主题在 Shopify 后台的 编辑器 链接和一个 预览链接，你可以把这些链接发给 merchant。

  1. shopify theme push

小提示

如果你不想直接修改店铺里现有的主题，可以加上 --unpublished 参数，把主题上传为一个新的未发布版本。

第六步：发布更新后的主题

当 merchant 审核通过你的修改后，你就可以把这个主题发布上线了。如果你还没 push 到店铺，那发布之前需要先 push。

  1. 输入以下命令：

    1. shopify theme publish

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

  3. 选择 Yes 确认你要发布这个主题

发布后，这个主题就会成为店铺的当前启用主题。