# 主题编辑器

> Shoplazza 主题编辑器让商家自定义内容并实时预览，本页讲如何开放设置，以及开发过程中怎样打开编辑器。

[主题编辑器（theme editor）](https://sso.shoplazza.com/login)是一个让商家自定义店铺内容与外观、并实时预览 theme 变更的工具。

作为 theme 开发者，您可以通过引入[设置](#allowing-for-customization-through-the-theme-editor)，以及将 theme 功能拆分为[模块化的 sections 和 blocks](../best-practices/sections-and-blocks)，让商家能够在主题编辑器中自定义自己的 theme。

在主题编辑器的预览中，商家应当看到 theme 上线后店铺前台将完全一致的呈现效果。

## 通过主题编辑器支持自定义 {#allowing-for-customization-through-the-theme-editor}

商家可以在 Shoplazza 后台访问主题编辑器。

1. 在 Shoplazza 后台，前往 **Online Store > Themes**。
2. 找到您想要编辑的 theme，然后点击 **Customize**。

## 开发期间访问主题编辑器 {#accessing-the-theme-editor-during-development}

为了了解您的 theme 设置在商家眼中是如何呈现的，您可以在主题编辑器中预览自己的 theme。在开发过程中，您可以通过以下方式访问主题编辑器：

* 使用 [Shoplazza CLI](/docs/theme/developer-tools/shoplazza-cli/) 将您的 theme 作为[开发 theme](/docs/theme/developer-tools/shoplazza-cli/#开发主题) 运行，或[将您的 theme 推送到店铺](/docs/theme/developer-tools/shoplazza-cli/theme-commands#push)
* 将您的 theme 作为 ZIP 上传到 Shoplazza 店铺

您应当选择最适合当前开发流程的预览方式。

## 通过主题编辑器支持自定义 {#allowing-for-customization-through-the-theme-editor-1}

商家在主题编辑器中可以访问的设置由 theme 控制。设置可以在以下位置指定：

* theme 的 [config/settings\_schema.json](/docs/theme/architecture/settings/overview) 文件
* theme 中包含的每个 [section](../architecture/sections/section-schema#settings) 的设置属性。

当商家使用主题编辑器配置这些设置时，他们的配置会被保存。进一步了解 [theme 设置，以及您可以添加到 theme 中的设置类型](/docs/theme/architecture/settings/overview)。

## 实时预览 {#live-preview}

主题编辑器可以在商家与某些输入设置交互时直接预览效果，而无需在商家做出选择后刷新整个店铺前台预览。

### 文本设置 {#text-settings}

主题编辑器可以对纯文本或富文本设置进行实时预览。这包括以下设置：

* [text](../architecture/settings/input-settings#text)
* [textarea](../architecture/settings/input-settings#textarea)
* [richtext](../architecture/settings/input-settings#richtext)

该设置在父级 HTML 元素内部不能被其他 Liquid 标记前置、后接或包裹：

✅ 

```liquid
<h1>{{ section.settings.title | escape }}</h1>
```

❌

```liquid
{% assign title = section.settings.title %}
<h1>{{ title | escape }}</h1>
```

✅

```liquid
{% when 'heading' %}
  <h1>{{ block.settings.title | escape }}</h1>z
```

❌

```liquid
{% when 'heading' %}
  {% assign title = block.settings.title %}
  <h1>{{ titlee | escape }}</h1>
```

## 将您的 theme 与主题编辑器集成 {#integrating-your-theme-with-the-theme-editor}

您需要确保您的 theme 在编辑器中的表现与在店铺前台中的表现一致。在某些情况下，您需要在 theme 于主题编辑器中预览时调整其行为，以便为商家提供这种体验。

为了让您的 theme 具备上下文感知能力，您需要将其与主题编辑器集成。

与主题编辑器集成可让您执行以下操作：

* 禁用任何只应在顾客查看 theme 时运行的代码
* 启用或禁用任何只应在 theme 处于编辑状态时运行的代码
* 确保在添加、移除、自定义或移动 section 时，运行或清理任何必要的代码