主题全案定制​

你已准备好创建新主题。你可能会问自己：如何快速设置开发环境并开始编码？

在本教程中，你将使用 SHOPLINE CLI 和 Seed 来创建新主题并将其上传到 SHOPLINE。

你会学到什么​

完成本教程后，你将完成以下任务：

• 设置本地开发环境
• 克隆 SHOPLINE 的参考主题 Seed
• 预览对本地代码所做的更改
• 将主题代码推送到你的 SHOPLINE 店铺并发布主题

要求​

• 你已安装 SHOPLINE CLI
• 你要使用的店铺的 URL，例如：sl.myshopline.com
• 如果你是以员工账号登录，确保你的账号具有在线商店的权限，或者你是店铺所有者

第 1 步：使用 Seed 初始化新主题​

使用 SHOPLINE theme init 命令将 Seed Git 仓库克隆到你的本地计算机上。

Seed 是 SHOPLINE 的参考主题，旨在提高性能、灵活性和易用性。你可以使用 Seed 作为构建主题的起点。

1. 在终端中，进入到要克隆 Seed 的工作目录。
2. 输入以下命令：

shopline theme init <THEME_NAME>

3. <THEME_NAME>是你克隆到本地的文件夹名称，例如 my-new-theme-project，主题被克隆到该目录中。
4. 克隆主题后，进入到目录下：

cd my-new-theme-project

第 2 步：使用 SHOPLINE CLI 进行身份验证​

用 SHOPLINE login 命令将 SHOPLINE CLI 与你要处理的店铺进行连接。

1. 在终端中输入你要登录的店铺 shopline login --store <DOMAIN>，其中 <DOMAIN>是你想要登录的店铺域名：

shopline login --store johns-apparel.myshopline.com

2. 在浏览器窗口中，会跳转到登录界面，需要你输入用于主题开发的店铺的账号。

第 3 步：启动本地开发服务器​

初始化主题后，你可以运行 shopline theme serve 命令在浏览器中与主题进行交互。 SHOPLINE CLI 会将主题作为开发主题上传到你连接的店铺。

该命令返回一个 URL，该 URL 会热加载对 CSS 和 section 文件的本地更改，使你能够使用店铺的数据实时预览更改。

1. 使用以下命令为你的主题启动一个服务：

shopline theme serve

2. 在浏览器中，导航到 http://127.0.0.1:8282以打开主题预览。

第 4 步：测试你的连接​

你可以通过对主题代码进行小的更改来测试主题。在此示例中，我们将更新页面背景颜色，然后在主题编辑器中对其进行验证。

1. 在编辑器中打开你的主题项目。
2. 导航到 config文件夹，然后打开 settings_data.json 文件
3. 在 current-> theme 找到 color_page_background 配置项，更新该值以更改主题页面背景颜色

{
  "current": {
    "theme": {
      "color_page_background": "red"
    }
  }
}

4. 保存你的更改，然后在主题编辑器中刷新并查看更新。
5. 此时，主题编辑器中的预览部分将会展示为红色背景的页面

第 5 步：发布你的主题​

如果你想让主题在你的店铺中生效，那么你可以发布它。你可以通过 SHOPLINE CLI 将你的主题代码发布到商家的店铺中。有以下两种方式：

• 通过 shopline theme package 命令将本地主题代码打包成一个 zip 文件
  • 向商家交付该 zip 文件
  • 在商家后台 -> 在线商店上传该 zip 文件
• 通过 shopline theme push 命令将本地主题代码上传到指定主题

上传完成后即可在商家后台看到已发布的主题