Shopify主题schema标签JSON无效问题及产品自定义功能求助

核心排查方向 #

• 校验JSON语法：
  找到对应多列模块的Liquid文件（通常在sections/目录下，比如multi-column.liquid），定位{% schema %}与{% endschema %}之间的代码，重点检查：
  • 所有字符串必须用双引号（JSON不支持单引号）
  • 数组/对象的最后一个属性不能带多余逗号
  • 括号、方括号必须完全配对
  • 之前添加自定义文本框时，可能误删引号、多打逗号，比如错误示例：

    {
      "type": "text",
      "id": "custom_text",
      "label": "自定义文本", // 末尾多余逗号会触发JSON解析错误
    }
    

• 对比原始代码：如果有该模块的原始备份，对比schema部分的差异，定位修改后引入的错误点。
• 匹配动态源字段类型：添加图片链接的动态源时，确保schema中对应字段类型正确，比如图片链接需用"type": "url"或"type": "link"，类型不匹配也会导致JSON报错。

修复示例（正确的schema片段） #

{% schema %}
{
  "name": "多列展示模块",
  "settings": [
    {
      "type": "image_picker",
      "id": "column_image",
      "label": "列图片"
    },
    {
      "type": "url",
      "id": "image_link",
      "label": "图片链接",
      "dynamic_source": "product.url"
    },
    {
      "type": "text",
      "id": "custom_text",
      "label": "自定义文本"
    }
  ]
}
{% endschema %}

方法1：Shopify后台自带配置（无需代码） #

进入产品编辑页，在「选项」区域添加新选项：

• 选项名称填「自定义名称」
• 选项类型选择「单行文本」
  用户在产品页即可直接输入内容，订单详情会自动同步该自定义信息。

方法2：代码实现（全店统一生效） #

步骤1：修改产品模板文件 #

找到产品模板Liquid文件（比如main-product.liquid或product-template.liquid），在加入购物车按钮上方插入输入框代码：

<div class="custom-name-field">
  <label for="custom_name">自定义名称：</label>
  <input type="text" id="custom_name" name="properties[自定义名称]" placeholder="请输入您的名称" required>
</div>

• properties[自定义名称]会将输入内容保存到购物车项目属性中，订单详情可直接查看。

步骤2：添加样式（可选） #

在主题CSS文件（比如base.css或theme.css）中添加样式：

.custom-name-field {
  margin: 1.5rem 0;
}
.custom-name-field label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.custom-name-field input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

内容的提问来源于stack exchange，提问作者Arianna Sadiwnyk