自定义 CSS

Settings 中有一个自定义 CSS 字段，供店铺内所有活动的小组件共用。请用它来完成活动自身 Widget › Style 标签页覆盖不到的细节调整——匹配字体、调整间距、改变边框样式，或隐藏某个元素——而不是用来从零搭建一个不同的小组件。Style 标签页已经通过简单字段覆盖了颜色、间距、圆角和效果；只有在这些还不够用时才使用自定义 CSS，因为这里添加的规则会应用到所有活动，而不是单个活动。

您的 CSS 会在小组件自身样式之后加载，因此大多数修改无需使用 !important 即可覆盖原有样式。

限制

规则	数值
最大长度	10,000 个字符
禁止内容	CSS 中任何位置出现字符 `</`

仅支持纯 CSS。之所以禁止 </，是因为您的 CSS 会以内联方式嵌入产品页面的一个 <script> 标签中，同时也会通过 CDN 提供服务——这个确切的字符序列可能会提前关闭外层标签，而真正的 CSS 从来不需要用到它。除此之外没有其他黑名单：选择器、@media 查询、动画和自定义属性都完全没问题。

修改会在您下次发布时生效，只要点击“保存”就会立即开始发布——没有单独的“发布 CSS”步骤。

示例

应用没有发布类名参考文档，请使用浏览器的检查工具在实际产品页面上找到您想要定位的类名。以下示例使用的都是当前小组件标记中的真实类名。

让小组件的字体匹配您的主题：

.sfw { font-family: inherit; }

只在 Option cards 布局上把价格加粗：

.w-cards .price { font-weight: 700; }

如果您希望小组件更简洁，隐藏“You save”（您已节省）这一行：

.you-save { display: none; }

只在窄屏上收紧内边距，因为 @media 查询照常有效：

@media (max-width: 480px) {
  .sfw { padding: 8px; }
}

延伸阅读：小组件布局、小组件文本和翻译。