Skip to main content

高度

高度设置控制公告栏的粗细程度。它提供三个选项:Slim(纤细)、Normal(正常)和 Thick(加厚)。Slim 让抽屉更紧凑,为购物车内容腾出空间——在较小的屏幕上尤其有用。Normal 介于两者之间。Thick 提供更强的视觉强调,帮助你的信息更引人注目。

位置

使用位置设置来选择公告栏在 cart drawer 中显示在商品之前还是商品之后
  • Before products(商品之前)将公告栏置于购物车主体顶部,紧邻页眉下方。
  • After products(商品之后)将其置于购物车主体底部,紧邻页脚上方——如果备注和 upsell 模块也放在那里,则位于它们下方。
两个 Upcart 购物车对比公告栏位于商品上方和下方的效果

计时器时长

如果你希望公告在设定时间后过期,请在 Timer duration 字段中设置倒计时。格式为 MM:SS——05:00 表示五分钟,00:30 表示三十秒。秒数必须在 0059 之间;超出该范围的值会被拒绝。 倒计时只有在公告文本中包含计时器变量时才会运行。倒计时结束后,整个公告栏会自动从购物车中移除。
内置倒计时器基于会话,从设定的分钟数开始倒数。它不支持在特定时间重置的循环或每日倒计时(例如,每天倒计时到下午 2:00)。此功能目前在 Upcart 中不可用。

公告文本

此部分让你输入并设置公告横幅中显示的信息格式。你可以使用输入框上方的格式工具栏为文本的特定部分设置样式,包括粗体、斜体、下划线和颜色等选项。 在公告文本编辑器中打开颜色选择器为文本设置样式
公告文本字段不支持超链接——格式工具栏中没有链接或 URL 按钮,粘贴的 <a> 标签或 Markdown 链接会在保存时被去除。如需让公告可点击或包含链接,请改用 Custom HTML 模块(见下文)。
由于内置的公告文本字段无法渲染超链接,你可以通过 Custom HTML 注入链接,以替代或补充公告栏:
  1. 前往 Upcart > Cart Editor > Settings > Custom HTML
  2. HTML Location 设置为 Above announcements/rewards(显示在公告栏上方)或 Below header/announcements/rewards(直接显示在其下方)。
  3. 粘贴包含链接的代码片段,例如:
  4. 点击 Save,然后在线上购物车中测试。
有关 Custom HTML 位置和样式的更多信息,请参阅自定义 HTML自定义 CSS。Upcart 支持团队不编写或调试自定义代码——如需帮助构建代码,请联系 Shopify Expert。 如果你使用倒计时功能,请将计时器变量直接插入到你的信息中。V2 购物车使用 {{timer}},V1 购物车使用 {TIMER} 公告文本字段中已将计时器倒计时变量添加到信息里

重要提示

请务必手动输入计时器变量(V2 为 {{timer}},V1 为 {TIMER}),而不要复制粘贴。这样可以避免隐藏的格式问题,防止计时器在线上购物车中无法正确显示。

字体大小

你可以使用滑块控制公告文本的大小,可选范围为 10px 到 24px。这有助于确保在移动端和桌面端都具有良好的可读性。

颜色

Background Color(背景颜色)用于定义公告栏的整体填充颜色。Border Color(边框颜色)用于调整横幅上下方的水平线,营造带样式的容器效果。

高级计时器配置

如需更多功能,可以使用 JavaScript 自定义倒计时器。请将脚本添加到 “Scripts (Before Load)” 部分,而不是 Custom HTML 模块。这是加载时机的要求,而非安全限制——Custom HTML 确实会执行脚本,但执行时间太晚,无法可靠地挂接到购物车的加载事件。“Scripts (Before Load)” 部分会在购物车加载前运行你的代码,因此 upcartSubscribeCartLoaded 等回调可以正确触发。示例代码:
旧版说明:window.upcartOnCartLoaded 仍然可用,但已弃用并会在控制台记录警告。所有新脚本请使用 upcartSubscribeCartLoaded。 请务必仔细测试代码的放置位置和语法。某些平台限制可能仍会影响脚本的处理方式。