Shopify自定义section怎么写：设置、block与完整示例

需要在主题中反复使用一组可编辑说明时，可以写一个自定义section。先确定模块的复用范围、内容由谁填写、是否需要独立重复项，再设计设置与渲染。某段代码只在一个固定位置出现，或者现有主题已经能完成任务时，不必为它再造一层配置。

这个例子解决什么问题

下面的教学文件sections/value-props.liquid提供一个可选标题和可增删的说明项。它使用section-defined blocks，不是可跨section复用的theme blocks，也没有实现应用区块。页面已有H1时，示例以H2和H3组织内容，具体层级仍要结合所在模板检查。

<div class="value-props">
  {% if section.settings.heading != blank %}
    <h2>{{ section.settings.heading | escape }}</h2>
  {% endif %}
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li {{ block.shopify_attributes }}>
          {% if block.settings.title != blank %}
            <h3>{{ block.settings.title | escape }}</h3>
          {% endif %}
          {% if block.settings.text != blank %}
            <div>{{ block.settings.text }}</div>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

{% schema %}
{
  "name": "产品说明列表",
  "tag": "section",
  "settings": [
    {"type": "text", "id": "heading", "label": "标题"}
  ],
  "max_blocks": 6,
  "blocks": [
    {
      "type": "item",
      "name": "说明项",
      "settings": [
        {"type": "text", "id": "title", "label": "小标题"},
        {"type": "richtext", "id": "text", "label": "说明"}
      ]
    }
  ],
  "presets": [
    {"name": "产品说明列表", "blocks": [{"type": "item"}]}
  ]
}
{% endschema %}

示例中的6是本模块人为设置的重复项上限，不是Shopify全平台上限。没有虚构发货时效等默认承诺，添加后应由编辑填写真实内容。代码用于说明结构，未在你的店铺和主题中安装，不能把它当作所有主题适配完成的成品。

几处容易出错的细节

• 普通文本标题使用escape，避免特殊字符被解释为标签。
• richtext设置可能包含段落等HTML，用div承接；不要再套一个p造成段落嵌套错误，也不要直接escape掉需要呈现的富文本。
• 重复项容器保留block.shopify_attributes，让主题编辑器能够识别区块。
• 标题和说明按空值判断；全部内容为空的说明项应在编辑器移除，不用空白占位冒充内容。
• presets提供添加时的初始配置；它与settings_data.json里的主题预设不是同一层。

Shopify section schema文档要求每个section只能有一个schema标签，内容是有效JSON，不能嵌套在其他Liquid标签内，也不会渲染其中的Liquid。section设置ID、block类型及相应设置ID必须在各自规定范围内唯一。这里的schema服务编辑器，不是搜索引擎JSON-LD。

加入模板后，要测编辑器和公开页面两种环境

在主题副本中保存文件后，到支持添加section的模板中选择该模块。若看不到，先核presets、模板类型、允许范围及编辑器错误，而不是直接把整段代码塞进theme.liquid。JSON模板与静态section的差别可先看主题文件分工。

本例没有JavaScript。若后来加入轮播或折叠，编辑器集成文档说明section会在不刷新整页的情况下被增删或重渲染；只在首次页面加载时初始化的脚本不会自动再运行。要处理相应加载、卸载和选中事件，并清理监听器与实例，避免重复绑定。

1. 新增、删除和重排说明项，检查保存后顺序及内容。
2. 测试空标题、长标题、包含引号和&的文本，以及带段落/列表的真实富文本。
3. 检查不同页面中共享模板的影响、手机换行、键盘操作与实际标题层级。
4. 发布后复查公开页面，确认没有预览专用内容和错误资源。

需要跨模块复用时再考虑theme blocks；需要每个商品有不同资料时，可让兼容设置连接动态源与元字段。配置层、数据层和页面显示各自清楚，后续维护才不会靠复制文件解决每一个新需求。