Shopify 知识库 · 指南
主题配置与 Schema:从编辑器到页面
Shopify 主题配置与 Schema:以标题分区示例说明设置定义、保存值、输入类型与 Liquid 渲染的关系,并给出编辑器验证步骤。
主题设置连接商家的编辑动作与页面呈现。Schema 定义可编辑的内容,保存的数据记录某次配置,Liquid 再读取该值输出页面;仅写一份设置定义,不会自动产生想要的展示。
定义与数据分别在哪里
| 内容 | 职责 | 阅读时关注 |
|---|---|---|
config/settings_schema.json | 定义全局主题设置 | 控件、分组与标签 |
config/settings_data.json | 保存全局主题设置值 | 当前值与定义是否对应 |
| Section 或 Block schema | 定义局部配置 | 内容归属与可添加的区块 |
| JSON 模板中的分区数据 | 保存页面中的分区组合与设置 | 实例、顺序、区块与值 |
官方设置说明与配置文件说明分别解释定义位置和保存职责。编辑器标签不等于程序读取的标识:改标签与改设置 ID 是两种不同操作。
如何选输入类型
| 需求 | 可以研究的类型 | 验证重点 |
|---|---|---|
| 短文案与较长文本 | text、textarea、richtext | 空值、格式与输出位置 |
| 开关、数量或范围 | checkbox、number、range | 值的类型与允许范围 |
| 有限选项 | select、radio | 默认值是否属于选项 |
| 商品或内容选择 | product、collection、page | 未选择与资源变化时的表现 |
| 图片、视频与链接 | image_picker、video、url | 缺省内容及有效目标 |
| 视觉设置 | color、color_scheme、font_picker | 可读性和整体一致性 |
这不是所有类型的完整清单。各类型返回值与动态来源支持应按Input settings核对,不从另一种类型推断。
一个可检查的标题分区
本例使用新建的教学标识 reading_heading。将下面内容放入测试主题的 sections/reading-heading.liquid;同时在已有默认 schema 翻译文件中合并第二段键值,不覆盖原文件其他内容。
{% if section.settings.heading != blank %}
<h2>{{ section.settings.heading | escape }}</h2>
{% endif %}
{% schema %}
{
"name": "t:sections.reading_heading.name",
"settings": [
{
"type": "text",
"id": "heading",
"label": "t:sections.reading_heading.label"
}
],
"presets": [{ "name": "t:sections.reading_heading.name" }]
}
{% endschema %}
默认语言为英语时,在 locales/en.default.schema.json 中合并:
{
"sections": {
"reading_heading": {
"name": "Reading heading",
"label": "Heading"
}
}
}
name 和 label 是编辑器文案,heading 是商家输入的内容。这里没有给标题写固定默认值;空标题时不输出空标题元素。Schema 和预设的语义见Section schema。
验证步骤与边界
- 在测试主题的可添加分区页面中加入这个分区,确认显示名称正确。
- 输入标题并保存,重新打开页面,确认保存值仍在。
- 清空标题,确认页面没有空标题;输入含特殊字符的普通文本,确认被当作文字显示。
- 添加第二个实例,分别修改标题,检查实例之间没有串值。
示例的静态校验不能代替店铺编辑器实测。需要翻译页面固定文本时,继续阅读主题国际化。