Shopify：Liquid模板样式脚本添加自定义背景失败排查

安全阿岳

2026-7-15

问题原因与解决方法

你用{{settings_schema.colors.settings.secondary_background}}取值无效的核心原因是：settings_schema是用来定义主题设置界面结构的配置文件，不是读取实际设置值的模板变量，正确读取设置值的变量是settings。

具体解决步骤：

修正取值变量
把样式脚本里的错误写法替换成{{ settings.secondary_background }}，示例代码：
```
<style>
  .bg-secondary {
    background-color: {{ settings.secondary_background }};
  }
</style>
```
settings是Shopify提供的全局变量，专门用来读取你在settings_schema.json中定义的所有主题设置值，只要你给颜色字段的id是secondary_background，就能直接通过这个变量拿到用户设置的颜色值。

确认section复选框逻辑
确保你在image-with-text.liquid中添加的复选框关联到了section设置，比如section的schema定义应该类似：

{% schema %}
  {
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_secondary_bg",
        "label": "启用文本列背景色"
      }
    ]
  }
{% endschema %}

渲染文本列时，通过复选框状态添加类：

<div class="image-with-text__text-column{% if section.settings.enable_secondary_bg %} bg-secondary{% endif %}">
  <!-- 文本内容 -->
</div>

验证settings_schema中的颜色字段
检查settings_schema.json里的secondary_background定义是否正确，比如在colors分组下：
```
{
  "name": "Colors",
  "settings": [
    {
      "type": "color",
      "id": "secondary_background",
      "label": "次要背景色",
      "default": "#eaeaea"
    }
  ]
}
```
这里的id必须是secondary_background，才能和settings.secondary_background对应上。
清除缓存并预览
修改代码后，用Shopify CLI执行shopify theme serve重启预览服务，或者在Shopify后台刷新主题预览，确保缓存清除后新样式生效。