Skip to main content
Upsells 块在 cart drawer 中展示产品优惠,由你选择的**策略(Strategy)**来挑选。当购物者打开购物车时,该块会根据当前购物车内容和你配置的任何定向规则,呈现你的策略返回的产品。

在购物者打开购物车的那一刻呈现相关的产品优惠,利用根据购物车内容和定向规则挑选展示内容的策略,提升平均订单价值。
与始终展示你挑选的某一个产品的 Product add-on 块不同,Upsells 由一个决定展示内容的策略驱动。
Upsells 块在 cart drawer 中展示由策略挑选的产品推荐

行为

  • 产品根据购物者当前的购物车实时获取,因此优惠反映的是购物车中的实际内容。
  • 当没有产品可展示时整个区域会隐藏——没有关联策略、策略没有返回结果,或返回的产品都不可购买。购物者绝不会看到空的 Upsells 区域。
  • 如果返回的优惠带有折扣,购物者会看到真实的划线价和折扣徽章,折扣会在结账时应用。

设置

支持的评论应用

支持以下基于 metafield 的评论应用:Shopify Product Reviews、Junip、Okendo、Growave、Fera、Stamped、Loox、REVIEWS.io、Automizely Reviews、Judge.me、Ali Reviews、Trustoo、Rivo、Rivyo 和 Vitals。不支持 Yotpo,因为它使用单独的 API 而非产品 metafields。

设计

Upsells 块在其 Design 面板中有块级设计覆盖设置。它们仅针对此块覆盖购物车的全局设计设置。留空则继承全局设置。

文字样式

Upsells 块的设计设置中包含 Text(文字)部分。使用它来控制每个 upsell 卡片上各个文字元素的排版。从选择器中选择一个文字元素以调整其设置: 可设置样式的文字元素按类别分组: Heading(标题)
  • Heading(标题)— upsell 卡片上方的部分标题(例如 You may also like)。也支持自定义字体族。粗体和颜色在上方的富文本编辑器中设置。
Product(产品)
  • Product title(产品标题)— 每个 upsell 卡片上的产品名称。
  • Review count(评论数)— 启用 Show product reviews 时显示的评论数。
Pricing(价格)
  • Price(价格)— 每张卡片上的当前价格。
  • Compare-at price(划线价)— 划线的原价。
  • Discount(折扣) — 折扣标签(例如 20% off)。
任何字段留空都会保持该元素的默认值。
直接点击购物车预览中的某个文字元素会高亮它,并自动在面板中打开其控件。

卡片颜色

评论

启用 Show product reviews 后,你可以在 Design 面板的 Reviews 部分自定义星星颜色。

位置与限制

  • **区域:**body 或 bottom。
  • **最大数量:**每个购物车状态 1 个——非空购物车和空购物车各有一个。
  • **状态:**非空和空购物车均可。
  • 默认不添加。未锁定——你可以移除或隐藏它。

选择策略

Upsells 块不会以空白状态出现:如果没有设置策略,Aftersell 会解析你商店的 Shopify AI 策略——如果还没有则会创建一个——并自动填入,因此该块开箱即用。打开 Strategy 选择器可以更换。选择器分两组: Quick start
  • Create strategy from selected products——直接挑选特定产品,系统会自动为你创建一个策略。
  • Create strategy from scratch——打开策略编辑器,让你无需离开购物车编辑器即可构建规则。
Strategies
  • Shopify AI recommendations——创建一个由 Shopify 自身推荐驱动的策略,之后出现在任何地方都命名为 Shopify AI recommended products。一旦你拥有一个,此条目就会消失,因为一家商店只需要一个 Shopify AI 策略。
  • 你现有的策略,按名称列出。在搜索框中输入即可筛选。
选定策略后,其名称会出现在块内的策略行上。

管理已选策略

关联策略后,策略行上会出现一个 •••(省略号)按钮。点击它打开操作菜单:
  • Edit strategy——在新标签页中打开策略编辑器,因此你的购物车编辑器会话和任何未保存的更改都会保持原样。此选项对 Shopify AI 推荐策略不可用,该策略由系统自动管理,没有可编辑的规则。
  • Remove from upsell——将策略从此块上解绑。策略本身不会被删除;它仍保留在你的策略列表中。
在新标签页中编辑策略不会影响购物车编辑器会话——你可以回到购物车编辑器标签页继续配置,不会丢失工作。

自定义模板

支持在其 Code 选项卡中使用自定义模板,用你的 JSX 替换此块的内置标记。以下是它接收的 props。

块内容

加入购物车

仅在 layout'carousel' 时相关。

upsell 卡片

upsells 中的每个条目: variants 中的每个条目包含 idtitlepricecompareAtPrice(原始、未格式化,以货币主单位表示的字符串)、availableForSaleimageUrlskuselectedOptions[{ name, value }])。
可购买性是按组合而非按选项判断的。options 给你要渲染的选项组,但某个选择是否可购买取决于 variants 中匹配的条目。请将购物者选择的组合与 variants 对应起来,并根据该条目的 availableForSale 做限制,而不要假设 options 中的每个值都可下单。
priceLabelcompareAtLabel 已格式化好可直接展示,而 variants[].pricevariants[].compareAtPrice 是以货币主单位表示的原始字符串。不要混用两者:展示时用标签,原始值只用于比较。

设计

通过设置面板中的 Design 部分为此块设置样式。这些是块级覆盖设置,会叠加在你的全局设计之上,留空时回退到全局设计。 什么是设计设置?在这里了解更多:设计设置