Shopify section 颜色设置输出到 CSS 不生效怎么排查

现象#

在 section schema 里加了颜色设置，前台也填了色值，但页面上的按钮颜色始终是默认值，查看源码发现 CSS 变量是空的。

原因#

• 只在 schema 里声明了 color 类型，没在 section 顶部输出对应的 CSS 变量
• {{ section.settings.btn_color }} 拼错成 settings.btn_color，取的是全局设置
• 色值以 color 对象输出时直接当字符串用，得到的是 rgba(0,0,0,0) 之类的默认值
• CSS 变量写在 <style> 里但选择器优先级低于主题自带的 !important 规则

处理步骤#

1. 在 section 的 <style> 前加一行 <!-- {{ section.settings | json }} -->，确认设置真的传进来了
2. 用 {% style %} 标签或 <style> 输出：.shopify-section-{{ section.id }} .btn{background:{{ section.settings.btn_color }}}
3. 把作用域限定到当前 section id，避免和主题其他按钮样式打架
4. 浏览器检查元素，看最终计算值来自哪条规则，若是被覆盖，提高选择器 specificity 而不是加 !important

验收标准#

填任意颜色后前台按钮立即变色，不同 section 之间互不影响；检查元素能看到 CSS 变量的具体色值。