跳转到内容
免费安装
简体中文
在 Claude 中打开 就此页面提问在 ChatGPT 中打开 就此页面提问

创建您的第一个倒计时

从选择模板到在产品页面上看到计时器跳动,完整构建一个可用的促销计时器。

本教程将构建一个完整且常见的倒计时:在产品页面上显示促销计时器,倒数至固定的结束日期,结束后自动消失。它会涉及构建器的各个部分,包括内容、计时、设计和显示,但不涉及任何更高级的选项。

请先确保已开启应用嵌入,否则您在此创建的倒计时不会显示在店面上。

  1. 打开应用。在仪表板上,点击第二张设置卡片上的 Create countdown。(在 Countdowns 页面中,Create countdown 按钮的作用相同。)

    仪表板设置卡片上的 Create countdown 按钮

    从仪表板的“创建倒计时”卡片开始创建倒计时。

  2. Countdown templates 页面顶部有四个类型标签页:Countdown timer、Delivery date、Stock countdown 和 Cart countdown。保持选中 Countdown timer。

    您可以浏览各种设计,也可以按名称或节日搜索:输入 black friday 即可找到该季的设计,即使它们的名称是 Onyx、Ribbon 之类。找到喜欢的设计后,点击其卡片上的 Select。

    Countdown templates 页面,显示类型标签页和计时器设计网格

    从模板网格中选择一种设计,之后您可以更改它的所有内容。

  3. 构建器打开后,预览中已显示您选择的设计。在顶部为倒计时命名,例如“春季促销计时器”。这个名称仅供您自己查看,买家不会看到。

  4. 在 Settings 标签页中,打开 Content 部分,设置计时器显示的文字:

    • Title:醒目的大字行,例如 🔥 Hurry up! 🔥
    • Subtitle:数字上方的一行,例如 Sale ends in:
    • Timer:每个数字下方的标签:Days、Hours、Min、Sec

    计时器设置中的 Content 部分,包含 Title、Subtitle 和计时器标签字段

    Content 部分控制计时器上的所有文字。

  5. 仍在 Settings 中,打开 Setting timer 部分。保持 Time type 为 Countdown to a date,这是默认设置,也是本示例所需的模式。

    在 Date between 下,将 End 设置为促销结束的时刻。让 Start 留空,计时器就会从现在开始运行;如果希望计时器在促销真正开始之前保持隐藏,请填写 Start。

    Setting timer 部分,Time type 设为 Countdown to a date,并已选择结束日期

    Countdown to a date 是默认的 Time type,请将 End 日期设置为您的截止时间。

  6. 在日期下方,将 When countdown timer end 设置为 Hide countdown block。截止时间一过,计时器就会消失,而不是停在 00:00:00。

    另外两个选项请参阅计时器结束时。

  7. 切换到 Display 标签页。在 Show countdown on 下勾选 Product page。这会将计时器放在每个产品页面的“加入购物车”区域下方。

    Display 标签页,Show countdown on 下已勾选 Product page 复选框

    勾选 Product page 后,计时器会显示在所有产品页面上。

  8. 在显示位置上方,Conditions 部分决定哪些产品会显示计时器。保持 All Products 即可覆盖整个产品目录,也可以改为针对某个产品系列、特定产品或客户群体,请参阅显示条件。

  9. 点击 Save。请确认状态控件显示为 Active 而不是 Draft,草稿会被保存,但不会显示。

    构建器顶部栏,状态设为 Active,旁边是 Save 按钮

    在状态设为 Active 的情况下保存倒计时。

  10. 在新标签页中打开线上店面的任意产品页面,仪表板上的 Open my store 按钮可以快速打开。您应该会看到计时器显示在“加入购物车”按钮下方并在倒数。

    也请在手机上试试,或缩小浏览器窗口:不同模板在小屏幕上对产品页面的排版不同,值得看看大多数买家实际看到的计时器效果。

    店面产品页面,倒计时器显示在“加入购物车”按钮下方

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

这对您有帮助吗?