EN
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。

验证步骤与边界

  1. 在测试主题的可添加分区页面中加入这个分区,确认显示名称正确。
  2. 输入标题并保存,重新打开页面,确认保存值仍在。
  3. 清空标题,确认页面没有空标题;输入含特殊字符的普通文本,确认被当作文字显示。
  4. 添加第二个实例,分别修改标题,检查实例之间没有串值。

示例的静态校验不能代替店铺编辑器实测。需要翻译页面固定文本时,继续阅读主题国际化。