开发新主题​

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

准备工作​

  • 安装 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.