设计倒计时
更改颜色、字体、背景、边框和间距,使倒计时与您的商店风格一致。
模板为您提供起始外观。Design 标签页则是您打造专属风格的地方,由于每个部分都可编辑,您也可以在这里彻底重建。
倒计时器和预计送达日期拥有完整的 Design 标签页。库存倒计时和购物车倒计时的选项较少,设计控件放在 Settings 标签页内。

Design 标签页,预览会随着您更改设置而更新。
您不必一直使用最初选择的设计。在构建器中打开模板选择器并选择其他模板,各个季节以标签页形式排列在顶部:Default、New year、Valentine、Summer Sale、Moon Festival、Halloween、Black Friday、Christmas 和 Winter Sales。
切换模板会替换设计,您的文字、计时和条件会保留。
倒计时器设计
Section titled “倒计时器设计”计时器的 Design 标签页包含四个部分,另加自定义 CSS。
Design Main Section
Section titled “Design Main Section”倒计时的外层容器,即承载其他所有内容的面板。
| 分组 | 控件 |
|---|---|
| Background | 纯色或上传的图片。选择颜色时,会有 Main background color,并带有独立的 Left 和 Right 值:纯色填充时两侧使用同一种颜色,渐变则使用两种颜色 |
| Overlay image | 为上传的背景加深,使文字在其上保持清晰可读 |
| Text | 整个倒计时的字体。开启 Use custom font style 可选择字体系列和字重 |
| Padding | 面板内部的间距,按 Top / Right 和 Bottom / Left 设置 |
| Border | 边框大小、圆角、样式(Solid、Dotted 或 Dashed)和颜色 |
| Shadow | Yes 或 No |
Element styling: Title and Subtitle
Section titled “Element styling: Title and Subtitle”Title 和 Subtitle 各有自己的字体、字号、颜色和边距。您可以在这里让标题更突出、让副标题更低调,或让两者靠得更近。
Design Timer Section
Section titled “Design Timer Section”数字本身。
| 分组 | 控件 |
|---|---|
| Font | Timer font size 用于数字,Label font size 用于下方的文字 |
| Border | 每个单位周围方框的大小和样式 |
| Color | Number color、用于标签的 Data text color、每个单位方框的 Background color、用于分隔符的 Dot color,以及 Border color |
| Padding | 每个单位方框内部的间距 |
为各单位设置背景和边框,可得到方框式外观;两者都留空,则是面板上的纯数字。
Button
Section titled “Button”如果您已开启 按钮,它会有自己的边框(圆角、大小、样式)、颜色(背景、文字、边框)和内边距。
Design Mobile Section
Section titled “Design Mobile Section”为手机单独设置字号,应用将其描述为“Optimize countdown appearance and layout for mobile devices to ensure a smooth and responsive user experience.”
您可以为 Title、Subtitle、Timer number 和 Timer label 设置移动端专用的大小,以及移动端内边距。
每个倒计时都值得花一分钟设置这一部分。在桌面端以 25px 显示效果良好的标题,在手机上通常会太大,而四个桌面尺寸的计时单位往往会换行或溢出。
预计送达日期设计
Section titled “预计送达日期设计”送达日期的 Design 标签页按其两个部分拆分:
- Design Main Widget:提示信息,包括字体、颜色、大小、边框和间距。
- Design Process Widget:Ordered → Dispatched → Delivered 进度条,包括图标、颜色和间距。
如果您的布局是 Message only 或 Progress bar only,则只有相关的那一半有效。
库存倒计时和购物车倒计时设计
Section titled “库存倒计时和购物车倒计时设计”这两种类型的设计控件位于 Settings 标签页内。
Stock countdown 提供 Alignment,可分别设置提示信息、滑块、库存数字和背景的颜色,以及 Animation,包括 None、Flash 或 Pulse。
Cart countdown 提供位置、提示信息、计时器和背景的颜色、边框以及字体设置。
自定义 CSS
Section titled “自定义 CSS”每种类型的末尾都有一个 Custom CSS (Developer Zone) 输入框,用于控件未涵盖的内容。请参阅 自定义 CSS。
借鉴您的模板。 采用品牌色的倒计时看起来像商店的一部分,而使用模板默认值的则显得生硬。模板的强调色通常是合适的背景色。
对比度比颜色更重要。 数字才是重点,请确保它们在背景上清晰可读,包括在字号范围的较小一端。
在真实页面上检查。 预览只显示倒计时本身及其独立背景,而您的产品页面上还有价格、按钮和图片与之争夺注意力。
在手机上检查。 请使用 Design Mobile Section,而不是直接接受桌面尺寸在小屏幕上的效果。