主题编辑器
的主题编辑器是一个工具,允许商家定制他们的商店的内容和外观,并实时预览主题的更改。
作为主题开发人员,您可以允许商家在主题编辑器中通过引入自定义主题设置,并通过将您的主题功能分为模块化的部分和块.
你需要将您的主题与主题编辑器集成为商家创造无缝的编辑体验。在主题编辑器预览中,商家应该确切地看到当主题是实时的时将在店面中出现什么。
通过Shopify管理员访问主题编辑器
标题为“通过Shopify管理员访问主题编辑器”的部分的锚链接商家可以在Shopify管理中访问主题编辑器。
- 从Shopify管理员,转到欧宝体育官网入口首页>主题.
- 找到要编辑的主题,然后单击定制.
在开发期间访问主题编辑器
链接到标题为“在开发过程中访问主题编辑器”的部分要了解您的主题设置如何显示给商家,您可以在主题编辑器中预览您的主题。在开发过程中可以通过以下方法访问主题编辑器:
- 运行你的主题作为发展的主题或将你的主题推向商店使用Shopify CLI
- 方法将GitHub分支连接到您的商店Shopify GitHub集成
- 上传您的主题更改到Shopify使用主题包
- 将您的主题作为ZIP文件上传到Shopify商店
您应该选择对当前开发过程最有意义的预览方法。
允许通过主题编辑器进行定制
标题为“允许通过主题编辑器进行定制”的部分的锚链接商家可以在主题编辑器中访问的设置由主题控制。可以在以下位置指定设置:
- 主题的配置/ settings_schema.json文件
- 每个的设置属性部分这是包含在主题中的。
当商家使用主题编辑器配置这些设置时,他们的配置会被保存。了解更多主题设置,以及可以添加到主题的设置类型.
将您的主题与主题编辑器集成
链接到标题为“将主题与主题编辑器集成”的部分您需要确保您的主题在编辑器中的行为与在店面中的行为相同。在某些情况下,当主题在主题编辑器中预览时,您需要调整主题的行为,以给予商家这种体验。
为了使您的主题能够感知上下文,您需要与主题编辑器集成。
与主题编辑器集成允许您执行以下操作:
- 禁用仅在客户查看主题时应运行的任何代码
- 启用或禁用仅在编辑主题时应运行的任何代码
- 确保在添加、删除、自定义或移动部分时运行或清理任何必要的代码
检测主题编辑器
链接到标题为“检测主题编辑器”的部分使用液体
链接到“使用液体”部分的request.design_mode
可以在主题的Liquid文件中使用global变量来检测是否在主题编辑器中查看店面。变量的值设置为真正的
查看主题编辑器时。否则,设置为假
.
使用JavaScript
指向“使用JavaScript”部分的锚定链接的Shopify.designMode
可以在主题的JavaScript文件中使用global变量来检测是否在主题编辑器中查看店面。变量的值设置为真正的
查看主题编辑器时。否则,设置为未定义的
.
响应主题编辑器JavaScript事件
指向标题为“对主题编辑器JavaScript事件做出反应”部分的锚定链接当商家与主题编辑器中的部分或块交互时,或激活或禁用主题编辑器预览检查器,主题编辑器会触发JavaScript事件。要了解代码应对这些事件应采取的操作,请参阅将节与主题编辑器集成.