Skip to main content

概述

此自定义功能使用 HTML、CSS 和 JavaScript,在购物车仅包含 upsell 商品时阻止结账。它有助于确保 upsell 被视为附加优惠,而不是独立购买,从而支持更可控、更有针对性的 upsell 策略。 这可以确保 upsell 商品在特定边界内发挥作用,强调它们作为主要商品的补充商品的角色。 实施后,在购物车中至少添加一件非 upsell 商品之前,checkout 按钮将被禁用

工作原理

  • 如果购物车仅包含 upsell 商品,checkout 按钮会变灰
  • 按钮下方会显示一条警告消息
  • 一旦添加了常规商品,按钮就会激活,警告消失——为确保 upsell 商品仅与相关触发商品一起购买的场景提供清晰的验证,例如显示有针对性的警告消息。
此设置非常适合具备 JavaScript 和 CSS 基础知识的商店店主或开发者。

第 1 步:添加自定义 HTML

前往:
Upcart > Cart Editor > Settings > Custom HTML

Above announcements/rewards 部分粘贴:

旧版说明:window.upcartOnCartLoaded 回调仍然有效,但已被弃用并会在控制台记录警告。所有新脚本请使用 upcartSubscribeCartLoaded

Below checkout button 部分粘贴:

你可以随意调整警告消息的措辞,使其符合你的品牌语气。

第 2 步:添加自定义 CSS

前往:
Upcart > Cart Editor > Settings > Custom CSS
粘贴以下代码:
这段代码为警告消息设置样式,并在视觉和功能上禁用 checkout 按钮。

最终效果

设置完成后:
  • 除非购物车中至少有一件非 upsell 商品,否则结账将被阻止
  • 一条消息会告知客户结账被禁用的原因
  • 整体体验流畅且符合品牌调性
将有效的 upsell 策略与这些技术相结合,还能消除购买流程中不必要的冲突,从而改善整体客户购物体验。这在以下情况下尤其有用:
  • 防止意外的单件 upsell 购买
  • 让 upsell 始终作为附加商品存在
  • 更好地控制 AOV 和商品组合

仍需帮助?

如果你在自定义方面需要任何帮助,我们建议咨询 Shopify 专家,了解如何在 cart drawer 中添加 HTML、CSS 甚至 JavaScript。 查看 Shopify 专家