开发新主题​

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

提示：SHOPLINE CLI 详情请参阅开发工具。

准备工作

  • 安装 Git。
  • 安装 Node.js。
  • 了解 Sline 模板引擎。Sline 模板引擎是 SHOPLINE 自研的模板引擎，是主题在商家店面中呈现的基石，用于动态渲染商家店铺页面。
  • 你需要准备好你的店铺 URL。你可以通过 合作伙伴后台 来创建自己的开发店铺，也可以通过已有店铺的授权获得店铺 URL。
  • 确保你的 SHOPLINE 账号具有获取到店铺的在线商店的权限，或者你是店铺的所有者。

第一步：安装 SHOPLINE CLI

运行以下命令以安装 SHOPLINE CLI。

npm install --global @shoplineos/cli

你可以使用以下命令来检查是否安装成功和查看当前版本号：

sl --version

第二步：登录店铺

  1. 在终端登录你的店铺。
sl login --store your-store.myshopline.com

提示：--store 参数是你的店铺的 myshopline 域名。

  1. 终端会自动打开浏览器窗口，并跳转到登录的界面。
  2. 登录后，根据提示操作。
  3. 操作完毕后，关闭浏览器窗口即可。成功登录后，你会在终端看到成功的提示。

第三步：初始化 Bottle 主题

Bottle 主题是 SHOPLINE 提供的基础主题模版。你可以使用 Bottle 主题作为起点构建你自己的主题。

  1. 在终端中，进入一个需要克隆 Bottle 主题的工作目录。
  2. 输入以下命令：
sl theme init my-theme

提示：my-theme 是你克隆到本地的文件夹名称。

  1. 进入刚创建的主题目录：
cd my-theme

第四步：启动本地预览

  1. 运行以下命令启动一个本地开发服务器
sl theme serve

本地开发服务器默认会对 CSS 和 组件 文件的更改进行热加载，不符合热加载条件的则会自动刷新页面，使你能够使用店铺的数据进行试试预览更改。

  1. 在终端可以看见返回的几个 URL，分别是
  • 本地预览链接：是一个 http://127.0.0.1:8282链接，拥有本地开发服务器功能。
  • 可视化编辑器链接：是一个店铺后台可视化编辑器链接，可用于配合可视化编辑器的功能进行开发调试。
  • 在线预览链接：是一个线上地址，可用于实时查看和分享当前效果。

第五步：修改并测试

你可以修改主题代码，以符合你想要的主题风格和功能预期。更改完毕后，进行测试。在此示例中，我们将在更新页面的背景颜色来验证。

  1. 使用你熟悉的代码编辑器打开主题代码项目。
  2. 打开 layout/theme.html 文件。
  3. 写入更改背景颜色的 CSS 代码。
<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      body {
        background: red;
      }
    </style>
  </head>
  ...
</html>
  1. 检查终端更新成功的提示。
  2. 打开预览链接，刷新页面后会看到页面上的背景色展示为红色背景。

第六步：发布

到目前为止，你的主题目前还是处于开发状态，在店铺后台还无法查看和使用。

你可以通过以下两种方式将你的主题代码发布到店铺中：

  • 通过 package 命令把本地的主题代码打包成一个 zip 文件，然后在 SHOPLINE 商家后台找到 店铺设计 > 添加主题 > 上传主题 去上传主题代码。
sl theme package
  • 通过 push 命令把本地主题代码直接上传到店铺后台：
sl theme push
这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.