创建您的第一个倒计时
从选择模板到在产品页面上看到计时器跳动,完整构建一个可用的促销计时器。
本教程将构建一个完整且常见的倒计时:在产品页面上显示促销计时器,倒数至固定的结束日期,结束后自动消失。它会涉及构建器的各个部分,包括内容、计时、设计和显示,但不涉及任何更高级的选项。
请先确保已开启应用嵌入,否则您在此创建的倒计时不会显示在店面上。
-
开始新建倒计时
Section titled “开始新建倒计时”打开应用。在仪表板上,点击第二张设置卡片上的 Create countdown。(在 Countdowns 页面中,Create countdown 按钮的作用相同。)

从仪表板的“创建倒计时”卡片开始创建倒计时。
-
Countdown templates 页面顶部有四个类型标签页:Countdown timer、Delivery date、Stock countdown 和 Cart countdown。保持选中 Countdown timer。
您可以浏览各种设计,也可以按名称或节日搜索:输入
black friday即可找到该季的设计,即使它们的名称是 Onyx、Ribbon 之类。找到喜欢的设计后,点击其卡片上的 Select。
从模板网格中选择一种设计,之后您可以更改它的所有内容。
-
为倒计时命名
Section titled “为倒计时命名”构建器打开后,预览中已显示您选择的设计。在顶部为倒计时命名,例如“春季促销计时器”。这个名称仅供您自己查看,买家不会看到。
-
编写计时器文字
Section titled “编写计时器文字”在 Settings 标签页中,打开 Content 部分,设置计时器显示的文字:
- Title:醒目的大字行,例如
🔥 Hurry up! 🔥 - Subtitle:数字上方的一行,例如
Sale ends in: - Timer:每个数字下方的标签:Days、Hours、Min、Sec

Content 部分控制计时器上的所有文字。
- Title:醒目的大字行,例如
-
设置结束日期
Section titled “设置结束日期”仍在 Settings 中,打开 Setting timer 部分。保持 Time type 为 Countdown to a date,这是默认设置,也是本示例所需的模式。
在 Date between 下,将 End 设置为促销结束的时刻。让 Start 留空,计时器就会从现在开始运行;如果希望计时器在促销真正开始之前保持隐藏,请填写 Start。

Countdown to a date 是默认的 Time type,请将 End 日期设置为您的截止时间。
-
选择归零后的行为
Section titled “选择归零后的行为”在日期下方,将 When countdown timer end 设置为 Hide countdown block。截止时间一过,计时器就会消失,而不是停在 00:00:00。
另外两个选项请参阅计时器结束时。
-
选择显示位置
Section titled “选择显示位置”切换到 Display 标签页。在 Show countdown on 下勾选 Product page。这会将计时器放在每个产品页面的“加入购物车”区域下方。

勾选 Product page 后,计时器会显示在所有产品页面上。
-
限定到合适的产品(可选)
Section titled “限定到合适的产品(可选)”在显示位置上方,Conditions 部分决定哪些产品会显示计时器。保持 All Products 即可覆盖整个产品目录,也可以改为针对某个产品系列、特定产品或客户群体,请参阅显示条件。
-
保存并设为 Active
Section titled “保存并设为 Active”点击 Save。请确认状态控件显示为 Active 而不是 Draft,草稿会被保存,但不会显示。

在状态设为 Active 的情况下保存倒计时。
-
在店面上检查
Section titled “在店面上检查”在新标签页中打开线上店面的任意产品页面,仪表板上的 Open my store 按钮可以快速打开。您应该会看到计时器显示在“加入购物车”按钮下方并在倒数。
也请在手机上试试,或缩小浏览器窗口:不同模板在小屏幕上对产品页面的排版不同,值得看看大多数买家实际看到的计时器效果。

线上产品页面上完成的计时器。