# 旧版主题扩展入门指南

> 旧版 Shoplazza 主题扩展（shoplazza te 命令）的开发与预览流程存档。

:::caution 旧版文档
本页介绍基于 `shoplazza te` 命令的旧版主题扩展开发流程。新版开发流程请参阅 [创建一个主题扩展](/docs/app/extensions/online-store/add-theme-extension)。
:::

:::note
本文中​​ Theme Extension 开发​​的入门指南基于 ​​Shoplazza CLI​​（具体为 **shoplazza te 命令**）进行说明。

此外，您也可以使用 ​​Shoplazza CLI​​（通过 **shoplazza app 命令**）来创建和开发 extension。详情请[参阅此文档](/docs/app/developer-tools/shoplazza-cli/app-command/usage-guide)。
:::

# Theme Extension 开发

Theme Extension 是 Shoplazza 提供的一种扩展和自定义 theme 页面的方式。开发者可以使用 Theme Extension 来扩展和自定义 theme 页面。

本页重点说明使用 `shoplazza te` 命令开发 Theme Extension 的基本流程，包括创建 extension、本地预览、构建生产版本和发布。阅读时可以先区分 Basic Extension 与 Embed Extension：前者通常需要在主题编辑器中选择插入位置，后者的插入位置由 extension 代码或配置决定。无论选择哪种类型，都建议先通过主题编辑器预览并保存草稿，再进入发布流程。

### 开发流程

**安装 Shoplazza CLI：**

```text title="cli"
npm install -g shoplazza-cli
```

**登录开发者店铺**

```text title="cli"
shoplazza login --store https\://{shopdomain}.myshoplaza.com/
```

**创建 Extension：**

```text title="cli"
shoplazza te create
```

选择 [Extension 类型（Basic 或 Embed）](/docs/app/extensions/online-store/add-theme-extension)。

* Basic Extension：允许在主题编辑器中调整插入位置。
* Embed Extension：插入位置在 Extension 中硬编码（推荐 pod 开发者使用）。

**开始开发：**

```text title="cli"
cd your-project
shoplazza te serve
```

注意：选择一个 template 进行开发和预览。选择 theme 后，下方会显示 2 个链接：

将显示两个链接：

* 第一个链接跳转至主题编辑器，您可在此处启用 Extension 并保存 theme。
* 第二个链接跳转至店面进行预览。

### 预览流程：

* 在店铺后台访问主题编辑器预览链接：
* 打开浏览器，导航至店铺后台中的主题编辑器预览链接。

![](https://cnres.appracle.com/ec807225ac320b242aab2ced6458e161.png)

* 在主题编辑器中添加 Theme Extension：\
  Embed App：前往应用管理并启用 extension。

![](https://cnres.appracle.com/0f5aad48dbcad59e10a6f3407c1cd572.png)

* 在主题编辑器中完成配置并保存草稿：
* 在主题编辑器中完成配置后，保存草稿。然后即可访问店面预览链接查看变更效果。

**构建生产版本：**

```text title="cli"
shoplazza te build
```

* 输入从 Shoplazza Partner 后台获取的应用 client\_id 和 client\_secret。

**发布 Extension**

```text title="cli"
shoplazza te release
```