自定义 CSS

每种倒计时类型的设计设置末尾都有一个 Custom CSS (Developer Zone) 输入框。您在其中输入的任何内容，都会在可视化控件的所有设置之上，应用到店面中的该倒计时。

Custom CSS 输入框，位于设计设置的末尾。

警告

这是应急手段，而不是首选方案。在此处编写的 CSS 不会经过检查，预览也不一定可靠，即使您的模板在其下发生变化，它仍会继续生效。请先尝试可视化控件，它们能满足大多数商店的需求。

真正有用的情形

• 精细定位：微调倒计时的边距，使其在间距特殊的模板中正确显示。
• 响应式调整：为移动设置未涵盖的断点添加媒体查询。
• 匹配模板细节：模板处处使用的特定圆角或阴影，而控件无法完全复现。
• 隐藏元素：移除倒计时中无法通过其他方式关闭的部分。

编写方法

输入框接受纯 CSS，即选择器和规则，不需要 <style> 标签：

.samita-countdown {
  margin-top: 24px;
}

@media (max-width: 749px) {
  .samita-countdown {
    margin-top: 12px;
  }
}

倒计时自身的容器带有类名 samita-countdown，每个已渲染的倒计时都会获得一个由其倒计时 ID 构成的 ID。如需定位更具体的元素，请在浏览器的开发者工具中检查已渲染的倒计时，并使用您在其中找到的类名。

注意

倒计时内部的类名可能会在应用更新时发生变化。将 CSS 的作用范围限定在 .samita-countdown 和您自己的覆盖规则上，而不是使用深层的内部选择器，可以大大降低其失效的可能性。

限定作用范围

此输入框中的 CSS 不会自动限定在倒计时范围内。像 img { ... } 这样的选择器会作用于页面上的每一张图片。

请务必为规则添加前缀，使其只作用于倒计时：

/* Good — scoped */
.samita-countdown img { border-radius: 4px; }

/* Risky — affects the whole page */
img { border-radius: 4px; }

在真实页面上测试

构建器预览不会还原您的模板，因此在预览中对齐的 CSS，在产品页面上不一定对齐。请保存后打开真实页面进行检查，桌面端和手机上都要看。

如果您不想编写 CSS

支持团队可以协助进行针对模板的调整。应用在 Custom CSS 输入框旁提供了 Chat now! 按钮，说明为“Chat with us to customize countdown in your theme.”您也可以 联系支持团队，并附上页面链接和您想要修改内容的说明。

后续步骤

• 设计倒计时
• 显示位置
• 联系支持团队
• 倒计时未显示