---
title: "开发新主题"

doc_type: static
doc_category: static
doc_version: v20270301
source_url:
  html: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/get-started/build-a-new-theme'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/get-started/build-a-new-theme.md'
---
# 开发新主题

在本教程中，你将使用 [SHOPLINE CLI](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/development-tools/cli/overview.md) 和 [Bottle](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/bottle.md) 主题来创建新主题并将其上传到 SHOPLINE。


* * *

## 准备工作{#znlxl}

-   安装 [Git](https://git-scm.com/downloads)。
    
-   安装 [Node.js](https://nodejs.org/en/)。
    
-   了解 [Sline ](https://developer.shopline.com/zh-hans-cn/docs/sline/sline-overview.md)模板引擎。Sline 模板引擎是 SHOPLINE 自研的模板引擎，是主题在商家店面中呈现的基石，用于动态渲染商家店铺页面。
    
-   你需要准备好你的店铺 URL。你可以通过 [合作伙伴后台](https://developer.myshopline.com/) 来创建自己的 [开发店铺](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/development-stores/overview.md)，也可以通过已有店铺的授权获得店铺 URL。
    
-   确保你的 SHOPLINE 账号具有获取到店铺的在线商店的权限，或者你是店铺的所有者。

* * *   

## 第一步：安装 SHOPLINE CLI{#TUYON}

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

```shell
npm install --global @shoplineos/cli
```

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

```shell
sl --version
```

* * *

## 第二步：登录店铺{#DL5mt}

1.  在终端登录你的店铺。
    

```shell
sl login --store your-store.myshopline.com
```

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

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

* * *

## 第三步：初始化 Bottle 主题{#yYxIJ}

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

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

```shell
sl theme init my-theme
```

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

3.  进入刚创建的主题目录：
    

```shell
cd my-theme
```

* * *

## 第四步：启动本地预览{#o5XuN}

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

```shell
sl theme serve
```

本地开发服务器默认会对 CSS 和 [组件](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/theme-structure/sections.md) 文件的更改进行热加载，不符合热加载条件的则会自动刷新页面，使你能够使用店铺的数据进行实时预览更改。

2.  在终端可以看见返回的几个 URL，分别是
    

-   本地预览链接：是一个 `http://127.0.0.1:8282` 链接，拥有本地开发服务器功能。
    
-   主题编辑器链接：是一个店铺后台主题编辑器链接，可用于配合主题编辑器的功能进行开发调试。
    
-   在线预览链接：是一个线上地址，可用于实时查看和分享当前效果。
    

* * *

## 第五步：修改并测试{#ebICH}

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

1.  使用你熟悉的代码编辑器打开主题代码项目。
    
2.  打开 `layout/theme.html` 文件。
    
3.  写入更改背景颜色的 CSS 代码。
    

```shell
<!DOCTYPE html>
<html>
  <head>
    ...
    <style>
      body {
        background: red;
      }
    </style>
  </head>
  ...
</html>
```

4.  检查终端更新成功的提示。
    
5.  打开预览链接，刷新页面后会看到页面上的背景色展示为红色背景。
    

* * *

## 第六步：发布{#Ikq17}

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

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

-   通过 [package](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/development-tools/cli/theme-commands.md#yH4zB) 命令把本地的主题代码打包成一个 zip 文件，然后在 SHOPLINE 商家后台找到 **店铺设计** > **添加主题** > **上传主题** 去上传主题代码。
    

```shell
sl theme package
```

-   通过 [push](https://developer.shopline.com/zh-hans-cn/docs/online-store-3-0-themes/development-tools/cli/theme-commands.md#Gnj3S) 命令把本地主题代码直接上传到店铺后台：
    

```shell
sl theme push
```