Shopify section 自定义 CSS 设置怎么写才安全

现象#

给 section 加了 custom_css 设置让商家自己写样式，结果一处写错影响全站按钮。

原因#

• 自定义 CSS 直接输出到全局 <style>，没有作用域限制
• 商家写了不闭合的括号，后续样式全部失效
• 使用 !important 覆盖了结账或弹窗样式
• 输出时没有做 | strip，空值也生成空 style 标签

处理步骤#

1. 把自定义 CSS 包进 #shopify-section-{{ section.id }} 作用域
2. 输出前判断非空：{% if section.settings.custom_css != blank %}
3. 在 schema 描述里写明「仅支持本区块内选择器」
4. 提供 2-3 个常用示例，减少商家乱写

验收标准#

商家自定义样式只影响本区块，其他区块与结账页不受影响；清空后不生成空标签。