主题编辑器​

主题编辑器是一个让商家自定义店铺内容和样式，并且能够实时预览他们的主题的一个工具。

作为一个主题开发者，你可以通过提供主题配置项 ，以及模块化 section 和 block 的能力，来让商家在主题编辑器中自定义他们的主题。

你需要将你的主题集成到主题编辑器中，提供给商家一个良好的编辑体验。在主题编辑器的预览区域，商家理应可以准确地看到主题发布后前台店铺所展示的样子。

通过 SHOPLINE Admin 后台访问主题编辑器​

商家可以在 SHOPLINE Admin 后台访问主题编辑器

1. 登录并进入你的 SHOPLINE Admin 后台，然后点击 在线商店 > 店铺设计。
2. 找到你要编辑的主题，然后点击 设计。

在开发期间访问主题编辑器​

要了解你的主题设置在商家眼中如何呈现，你可以在主题编辑器中预览你的主题。你可以通过以下方法在开发过程中访问主题编辑器：

• 使用 SHOPLINE CLI 将你的主题作为开发主题来运行或者使用 SHOPLINE CLI 将你的主题推送到商店
• 将你的主题作为 zip 文件上传到 SHOPLINE 商店

你应该选择最符合当前开发流程的预览方法。

通过主题编辑器自定义店铺​

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

• 主题的 config/settings_schema.json 文件
• 主题中每个 section 所包含的 setting 属性

当商家使用主题编辑器配置这些设置时，他们的配置会被保存。了解更多关于主题设置的信息，以及你可以添加到主题中的设置类型。

将主题集成到主题编辑器中​

你需要确保你的主题在编辑器中的功能以及样式与在前台店铺中表现的行为一致。在某些情况下，当你的主题在主题编辑器被预览时，你需要调整主题的表现，使得商家能够准确地预览到前台店铺。为了让你的主题识别出不同的浏览环境，你需要将主题与主题编辑器进行集成。

与主题编辑器集成允许你执行以下操作：

• 禁用那些只有被顾客浏览时才需要运行的代码
• 启用或禁用那些当主题被编辑的时候才需要运行的代码
• 确保在添加、删除、自定义或移动 section 时，任何必要的代码都已运行或清理完毕

识别主题编辑器​

使用 Handlebars​

在主题的 Handlebars 文件中可以使用 request.design_mode 全局变量来识别前台店铺是否处于主题编辑器的预览状态。如果处于主题编辑器的预览状态，这个变量的值为true，否则为false。

{{#if request.design_mode}}
  <!-- 这个只会在主题编辑器中渲染 -->
{{/if}}

使用 JavaScript​

在主题的 JavaScript 文件中可以使用 Shopline.designMode 全局变量来识别前台店铺是否处于主题编辑器的预览状态。如果处于主题编辑器的预览状态，这个变量的值为true，否则为false。

if (window.Shopline.designMode) {
  // 这只会在主题编辑器中执行
}

响应主题编辑器的 JavaScript 事件​

当商家在主题编辑器中与 section 或 block 交互，或激活、停用主题编辑器预览检查器时，主题编辑器会发出 JavaScript 事件。要了解你的代码应如何针对这些事件采取行动，请参考将 section 与主题编辑器集成。