Checkout widget 类型

有多种 checkout widget 选项可供选择。在本文中，我们将逐一介绍各种 widget 选项、它们的作用以及可用的自定义设置：

• Upsells
• 购物车控件
• 奖励
• 信任徽章
• 客户评价
• 备注
• 图片
• 文本

---

在结账时向客户提供产品，帮助提升你的 AOV。 Upsell widget 有几种不同的配置可供选择。

• **Single Product Upsell：**向客户提供一个产品。
• **Multi-Product Upsell：**以堆叠或轮播布局展示多个产品。允许客户接受多个优惠。
• **Checkmark Upsell：**用复选框代替 Add to Cart 按钮对单个产品进行 upsell。常用于运费保障或优先发货等较低价的附加项。

创建 upsell 优惠时，你可以选择产品的选取方式：

• **Specific Products：**手动选择要进行 upsell 的具体产品。
• **Collection：**选择一个系列，从中挑选最多 5 个随机产品进行展示。已在购物车中的产品会自动排除。
• **AI Recommendations：**让 Aftersell 根据客户的购物车内容自动推荐产品。
• **Most Expensive Product：**自动对客户购物车中最贵的产品进行 upsell。

在产品选择器中浏览 Products 选项卡时，你可以勾选 Active products only 来隐藏列表中的草稿和已归档产品。此筛选默认关闭，且仅适用于 Products 选项卡——Collections 不受影响。 向 upsell widget 添加产品时，你可以从几种产品类型中选择：

• Specific product——从商店中选择特定产品来展示
• Automatic upsell——根据购物车内容推荐互补产品，使用 Settings > Automatic upsells 下设置的推荐提供方（默认为 Shopify，如已连接则可为 Nosto 或 Constructor）
• Most expensive product——展示客户购物车中最贵的商品
• Spend threshold——智能推荐帮助客户达到奖励门槛的产品（需要启用奖励进度条）
• Collection——展示特定系列中的产品
• Strategy——使用基于规则的定向动态选择产品。仅在启用了策略的商店中显示

**Spend threshold（消费门槛）**产品类型与你的奖励进度条协同工作，推荐帮助客户达到免运费或折扣等目标的产品。它会根据客户距门槛的远近自动选择最相关的产品。 当客户为 checkout upsell 产品选择变体时，变体名称会以小号浅色文本显示在产品标题下方。这有助于客户确认添加到订单中的是正确的变体。 变体名称仅在产品有多个变体时显示——对单变体产品（只有”Default Title”变体的产品）会隐藏。

• 当你隐藏某个变体选项时，客户在 checkout upsell 中不会看到它。
• 你选择的默认值会自动应用到该产品。
• 只有匹配你所选默认值的变体才可供客户选择。
• 如果你隐藏多个选项，则只显示匹配所有已选默认值的变体。为订阅产品创建 upsell 时，你可以将 upsell 锁定到特定的订阅计划。这可以防止客户在结账时更改订阅计划，确保他们获得的正是你配置的订阅选项。

如何配置订阅计划锁定：

1. 在 Checkout 编辑器中打开你的 upsell widget。
2. 将 Purchase option 设为 Subscription。
3. 在 Subscription plan 下拉菜单中，选择一个特定计划，而不是”Any plan (customer chooses)”。
4. 计划现已锁定——客户在结账时会看到此计划，但无法更改。

自定义锁定计划的展示：

• 隐藏 Color 选项并将默认值设为”Black”
• 保持 Size 选项可见
• 客户将只看到黑色 T 恤的尺码选项

计划锁定后，你可以自定义它在结账时向客户呈现的方式：

• Show subscription option on checkout——切换订阅选项行（标签 + 计划名称）是否出现在结账页。默认启用。
• Subscription option label——自定义显示在计划名称上方的标签（默认：“Subscription”）。例如，你可以改为”Subscribe”、“Delivery”或其他符合你品牌的说法。
• Plan name——覆盖结账时显示的计划名称。默认使用 Shopify 中的计划名称。

Upsell 样式设置 这些控件与订阅锁定无关。它们位于 upsell 编辑器的 Show style settings 下，且下面的四个图片和卡片选项只有在勾选 Try new look（默认关闭）后才会出现。

• Product image corner radius——为产品图片应用圆角。可选：
  • None——直角
  • Base——轻微圆角
  • Large——较大圆角（默认）
  • Fully Rounded——最大圆角
• Product image size——控制图片尺寸：
  • Default——标准尺寸（垂直布局为 64px）
  • Small——较小图片（垂直布局为 48px，水平布局宽高比更高）
  • Medium——中等图片（垂直布局为 72px，水平布局为正方形宽高比）（默认）
  • Large——较大图片（垂直布局为 96px，水平布局宽高比更矮）
• Product image display——选择图片填充容器的方式：
  • Fill——图片撑满边缘（默认）
  • Bordered——在图片周围添加可见边框
• Card padding——设置卡片边缘与内容之间的内部间距：
  • None——无内边距
  • Tight——最小间距
  • Base——标准间距
  • Loose——最大间距（默认）
• Button width style——控制加购按钮宽度在各 upsell 中的显示方式。可选：
  • Auto（默认）——按钮宽度根据是否存在变体选择器而变化
  • Compact (uniform small)——所有按钮使用紧凑宽度，保持一致
  • Full width (uniform large)——所有按钮使用全宽，保持一致

以下情况计划会自动锁定：

• 你选择了特定的订阅计划（如上所述）
• 该产品只有一个可用的订阅计划

在这两种情况下，客户都无法在结账时更改订阅计划。 对于非勾选式 upsell widget，你可以自定义 upsell 按钮上显示的文本。这些字段在你的账户启用该功能后可用——请联系支持团队申请开通。 默认情况下，按钮显示：

• 标准 upsell 显示 Add
• 客户可以省钱的替换 upsell 显示 Upgrade • $X savings
• 产品价格更高的替换 upsell 显示 Upgrade • $X

你可以自定义标准和替换 upsell 的添加按钮文本。当你输入自定义文本时，替换优惠仍会自动附加节省或费用后缀（例如 Buy Now • $5 savings）。 你可以为替换优惠的按钮单独设置自定义前缀。这会覆盖默认的”Upgrade”前缀，以及在 Add button text 字段中为替换优惠输入的任何文本。价格后缀（例如 • $5.00 savings）始终自动附加。 例如，输入 Trade up，在客户可省 $5 的替换优惠上会显示 Trade up • $5.00 savings。

💡 提示：{Amount} 占位符在替换按钮文本字段中不会被替换——它会被当作字面文本处理。如果你需要完全控制标签格式，请在 Upsell button text 字段中使用 {Amount}。

你可以在 Upsell button text 字段中加入 {Amount}，将价格或节省金额直接嵌入标签。当存在 {Amount} 时，你的文本就是完整的按钮标签——不会附加自动后缀。 占位符不区分大小写——{Amount}、{amount} 和 {AMOUNT} 都可以。

⚠️ **注意：**如果你在标准（非替换）upsell 中使用 {Amount}，替换的是产品价格。占位符始终会被替换为格式化后的金额，因此免费产品会显示格式化的零（例如 \$0.00），而不是省略占位符。

对于 Single Product Upsell 和 Multi-Product Upsell widget，你可以限制客户在一次结账会话中从单个 widget 接受的优惠数量。 一旦客户接受了配置的优惠数量，该 widget 在本次结账会话的剩余时间内将停止展示更多优惠。

• 留空——不应用限制。无论客户接受了多少个优惠，widget 都会继续展示优惠。
• 设置一个正数——一旦客户从此 widget 接受了该数量的优惠，widget 就停止展示优惠。

要配置此设置，请在 Checkout 编辑器中打开你的 upsell widget，并在 Max number of accepted offers 字段中输入一个值。

💡 **提示：**此设置不适用于 Checkmark Upsell widget。

---

折扣可以直接在 upsell widget 内配置。当客户选择将 upsell 产品加入订单时，此折扣会自动应用。 配置 upsell widget 时，你可以点击 “Add discount” 按钮添加折扣。你会看到两个选项：

• Pick existing——从你已创建的折扣中选择。你可以搜索现有折扣以找到想要应用的那一个。
• Create new——直接在编辑器中创建新折扣，需设置：
  • Title——结账时向客户显示的折扣码文本（例如”SAVE”）
  • Amount——在百分比折扣和固定金额折扣之间选择，然后输入数值

折扣应用到 upsell 后，会显示为一个徽章，点击它可以更改或移除。 你可以在一个地方管理所有 checkout 折扣。参见管理 checkout 折扣了解如何查看、编辑和删除折扣。 当折扣应用到你的 upsell 时，默认会在产品标题旁显示一个节省后缀（例如”(20% OFF)“或”($6 OFF)”）。你可以在 upsell 编辑器的 Show additional settings 部分启用 Hide discount amount text 来隐藏此后缀。

• 启用时，节省后缀被隐藏。折后价本身仍正常显示。
• 关闭时（默认），节省后缀显示在产品标题旁。

💡 **提示：**此设置按 widget 生效。如果你有多个 upsell widget，可以独立配置每一个。

节省后缀中的”OFF”文本（例如”20% OFF”）可以在 Settings > Translations 中自定义。找到 Discount suffix 行并输入你偏好的标签（例如”saved”、“off”或对应的翻译）。默认值为”OFF”。 启用 Skip upsell discount if a non-Aftersell discount is already applied? 时，widget 默认会在预览价格中隐藏配置的 upsell 折扣。如果你的购物车级折扣已经与 upsell 折扣一致（客户无论如何支付相同的折后价），你可以启用 Show the discounted price in the widget even when the AfterSell discount is skipped?，让预览价格与客户实际支付的金额保持同步。

⚠️ **重要：**此设置会改变 widget 中对预览和真实客户显示的价格，但不会应用 Aftersell 折扣。仅当你的购物车级折扣与 upsell 折扣完全一致时才启用它——否则客户可能会看到错误的价格。

此复选框仅在 Skip upsell discount if a non-Aftersell discount is already applied? 已开启时可见。 默认情况下，折扣适用于已接受 upsell 产品的每一件——包括客户使用数量选择器或购物车控件额外添加的件数。你可以通过 Limit how many units get the discount 开关设置上限。 启用后会出现 Maximum discounted quantity 字段，用于设置上限。上限以内的件数享受折扣；超出的件数按全价收费。 **示例：**你提供一个 100% 折扣的产品并将上限设为 1。如果客户将数量提高到 3，只有 1 件免费——其余 2 件按全价收费。

• **开关关闭（默认）：**已接受 upsell 产品的每一件都享受折扣。
• **开关开启：**只有你指定数量的件数享受折扣。额外的件数按全价收费。

💡 **提示：**当你想提供大力度折扣（例如免费商品）、又不想让客户通过增加数量来放大优惠时，此设置很有用。

• Aftersell 折扣遵循与其他任何 Shopify 折扣相同的规则。两个折扣要能组合，必须都在 Shopify Admin 中显式设置为可组合。例如，如果 Aftersell 创建了一个折扣码，而你还有一个单独的折扣如”10% off”，两者都需要启用组合。只要其中一个没有设置为可组合，它们就不会组合。Shopify 的标准折扣规则始终适用：
  • Shopify 同一时间只允许每个产品有一个行项目折扣。如果产品已应用折扣，额外的 upsell 折扣不会在同一行项目上叠加
  • 订单级和行项目折扣在两者都在 Shopify Admin 中设置为”combinable”时可以组合。关于 Shopify 组合规则的完整细节，请参阅 Shopify 的折扣组合文档。重要限制：以下几种情况折扣可能无法应用：
  • **同一产品上有多个折扣：**如果为已应用折扣的产品配置了 Aftersell upsell 折扣，Aftersell 折扣不会叠加
  • **系列设置不正确：**如果折扣以系列为目标，请确保所有相关产品都属于正确的系列。可以使用隐藏系列来包含特定产品，而不让客户看到它们
  • **第三方应用冲突：**当另一个应用正在动态修改你的结账页时，目前不支持 checkout 折扣功能。如果你运行着这样的应用，Aftersell 添加的折扣可能无法按预期应用。 例如，如果某个应用在结账时添加价格或附加项并重新计算订单总额，这可能会干扰 Aftersell 应用折扣的方式。

---

Checkout upsell 可以在优惠产品上显示星级评分，帮助提升转化。评分从你的产品评论应用的 metafields 中拉取，仅在产品存在有效评论数据时显示。

• 请注意，由于 API 限制，此功能目前仅在 Aftersell 的 Checkout 版本 2 上可用，版本 1 不可用。

如何启用

• 打开 Checkout 并编辑 upsell。
• 启用 Show product review ratings。
• _（可选）_打开 Advanced product review settings 自定义展示。

高级设置

• 设置要显示的最低评分（0-5，默认 4.0）。
• 选择星级的显示位置（标题下方或价格下方）。
• 自定义已填充和未填充星星的颜色。
• 显示或隐藏数字评分和评论数。

支持的评论应用
我们支持将评分存储在产品 metafields 中的评论应用，包括：

• Shopify Product Reviews
• Junip
• Okendo
• Growave
• Fera
• Stamped
• Loox
• REVIEWS.io
• Automizely Reviews
• Judge.me
• Ali Reviews
• Trustoo
• Rivo
• Rivyo
• Vitals

没有评论数据的产品不会显示评分。如果安装了多个受支持的评论应用，将使用评论数最多的那个应用。Yotpo 不支持 Checkout V2 的 upsell 评分，因为它需要单独的 API。 如果你启用了 Show product review ratings，在编辑器预览中能看到星级，但线上结账页看不到，可能是你的评论应用的 metafields 没有启用 Storefront API 访问权限。 编辑器通过 Admin API 读取产品数据（可以访问所有 metafields），而线上结账页通过 Storefront API 读取（只能访问已显式授予 storefront 访问权限的 metafields）。检测到这种不匹配时，编辑器中会出现警告横幅，列出受影响的产品。 修复方法：

1. 在 Shopify Admin 中前往 Settings → Custom data → Products → Metafields。
2. 找到 reviews.rating 和 reviews.rating_count 的 metafield 定义。
3. 为每个定义启用 Storefront API access。

或者，在你的评论应用设置中查找 Storefront API sync 选项并在那里启用。

---

在每个产品行项目下方显示一个修改链接，允许客户直接在结账页上进行编辑。 购物车控件支持以下功能：

• 变体选择器：允许客户更换为另一个有库存的变体。
• 数量选择器：允许客户更改产品数量。
• 移除商品：允许客户移除 upsell 产品。开启 Show Remove Item Button 后会显示 Allow Removal of Non-Upsell Products，将移除功能扩展到客户最初自己添加的商品。
• 订阅选择器：允许客户更改当前选中的订阅选项（例如从每 60 天改为每 30 天）。
• 订阅升级：允许客户将一次性购买升级为订阅。
• 自定义文本：在每个行项目下方添加自定义文本。

购物车控件可以为购物车中的产品显示星级评分，帮助建立信任并提升转化。评分从你的产品评论应用的 metafields 中拉取，仅在产品存在有效评论数据时显示。 如何启用

1. 打开 Checkout 并编辑购物车控件 widget。
2. 进入 Product review ratings 部分。
3. 启用 Show product review ratings。
4. _（可选）_自定义展示设置。

设置

• 设置要显示的最低评分（0-5，默认 4.0）。低于此评分的产品不会显示星级。
• 选择星级的显示位置（产品标题下方或购物车控件下方）。
• 自定义已填充星星颜色（默认：#fdcc0d）和未填充星星颜色（默认：#d1d5db）。
• 显示或隐藏评分值（例如 4.5）和评论数（例如 123 reviews）。

支持的评论应用
我们支持将评分存储在产品 metafields 中的评论应用，包括：

• Shopify Product Reviews
• Junip
• Okendo
• Growave
• Fera
• Stamped
• Loox
• REVIEWS.io
• Automizely Reviews
• Judge.me
• Ali Reviews
• Trustoo
• Rivo
• Rivyo
• Vitals

没有评论数据的产品不会显示评分。如果安装了多个受支持的评论应用，将使用评论数最多的那个应用。 Subscription management 内的 Subscription products 部分让你控制在购物车控件 widget 中，特定产品可供购物者选择哪些订阅计划。 默认情况下，订阅选择器和升级按钮使用 Shopify 为产品返回的任何计划。通过按产品的订阅计划控制，你可以收窄可选计划，并为每个产品设置默认计划。 如何配置订阅计划控制：

1. 在 Checkout 编辑器中打开你的购物车控件 widget。
2. 展开 Subscription management 部分。
3. 在 Subscription products 下，选择 Add product，挑选一个在 Shopify 中配置了销售计划的产品。
4. 打开该产品的行，使用 Plans customers can choose——选择 Select plans 打开选择器，然后勾选购物者可以选择的计划。已选计划显示为可移除的标签，并且有 Select all 操作。
5. 使用 Default plan 下拉菜单设置订阅升级为该产品应用哪个计划。其自身默认值为 First available plan。
6. 保存你的更改。

运作方式：

• Plans customers can choose——将订阅选择器收窄为你勾选的计划。如果某个产品变体不支持其中任何计划，则改为显示该变体自己的所有计划，因此购物者永远不会没有订阅选项。
• Default plan——设置订阅升级为该产品应用的计划。如果它与购物车中的变体不兼容，则改用第一个可选计划。
• 未配置的产品——此处没有行的产品保留其所有计划，并使用 Shopify 的默认排序。

订阅升级按钮本身在 Subscription management 中更靠上的位置单独控制：勾选 Allow Subscription Upgrade Button 即可启用。启用后会显示一个用于按钮文案的文本字段，默认为 Upgrade to {{subscription_group}}——该变量会被替换为该产品可用的第一个订阅组。

💡 **提示：**如果你为某个产品选择了所有可用计划，配置会规范化回”所有计划”。这意味着你之后在 Shopify 中添加的任何新计划都会自动包含，而不会被悄悄排除。

你可以使用购物车控件 widget 编辑器中的 Visibility 设置来控制哪些产品显示购物车控件：

• **All products in cart：**购物车控件对每个产品显示（默认）。
• **Only selected products：**购物车控件仅对你选择的产品显示。点击 Select products 选择哪些产品应显示购物车控件。
• **All products except selected：**购物车控件对除所选产品外的所有产品显示。点击 Select products 选择哪些产品不应显示购物车控件。

这让你可以基于特定产品自定义结账体验。例如，你可能只想为某些产品启用订阅升级，或防止客户从购物车中移除特定商品。 如何配置产品定向：

1. 在 Checkout 编辑器中打开你的购物车控件 widget。
2. 进入 Visibility 部分。
3. 从 Apply cart controls to 下拉菜单中选择你偏好的定向模式。
4. 如果你选择了 Only selected products 或 All products except selected，点击 Select products 按钮选择你的产品。
5. 保存你的更改。

---

在结账页显示一个奖励进度条（消费 X 获得 Y），激励客户添加更多产品。目标可以基于订单金额或商品数量。 奖励与 upsell widget 搭配效果很好。让客户轻松地向订单中添加额外产品以达成奖励。你可以在 upsell widget 中使用消费门槛产品类型，自动推荐帮助客户达到奖励门槛的产品。 请记住，你提供的任何奖励都需要通过 Shopify 创建。如果你提供折扣，可以通过创建自动折扣（Automatic Discounts）来实现；如果你提供免运费，可以通过修改配送规则（Shipping Rules）来实现。 配置基于订单金额的奖励时，你可以使用 Amount basis 设置来选择购物车总额的计算方式：

• Order total——使用完整订单总额，包括运费和税费。
• Subtotal——使用折扣前的商品小计（应用任何折扣码之前）。
• Subtotal after discounts (excludes tax and shipping)——使用扣除折扣、运费和税费后的购物车总额。这与 Shopify 评估免运费门槛的方式一致，因此在应用折扣码时，奖励进度条能准确反映客户是否真正达到了门槛。

💡 **提示：**如果你以免运费作为奖励，请使用 Subtotal after discounts (excludes tax and shipping)，确保进度条与 Shopify 自身的免运费评估一致。使用其他基准时，折扣码可能导致进度条显示”已解锁”，而 Shopify 仍然收取运费。

---

用自定义图标和文本构建信任徽章，以提升结账转化率。徽章可以垂直堆叠或水平展示。 信任徽章非常适合为你的品牌建立信任感并突出你的价值主张，这有助于降低结账放弃率。

---

直接在结账页展示客户评论，建立信任并降低结账放弃率。 Aftersell 提供两种客户评价 widget：

• Classic Testimonials——由你自己撰写的评价。仍然可用；Flex Testimonials 是更新的选项，可从你的评论应用拉取真实评论。
• Flex Testimonials——自动从你的评论应用（Judge.me、Klaviyo、Okendo 或 Yotpo）拉取客户评论。这是对所有商家推荐的选项。

如果你正在使用 Classic Testimonials，应切换到 Flex Testimonials 来展示评论应用中的评论：

1. 在 Aftersell 中打开 Checkout
2. 进入 Classic Testimonials widget 选项卡
3. 点击顶部横幅中的 Switch to review app widget
4. 在 Settings > Product Reviews 中配置你的评论应用凭据（参见下方评论应用集成）

在 Flex Testimonials 激活期间显示的横幅上，你随时可以点击 Switch back to manually written reviews 切换回去。 Flex Testimonials 提供两种选择模式：

• Manual selection——挑选特定评论显示在你的客户评价 widget 中
• Dynamic——根据客户购物车中的产品自动获取并展示评论

在 dynamic 模式下，Aftersell 会从你的评论应用导入评论并进行存储，以便在 checkout widget 中展示。首次导入会在 24 小时内自动进行，之后每周一次。 要立即导入评论，前往 Settings > Product Reviews，为你的评论应用点击 Sync now。 你可以配置：

• Max reviews to show——控制显示多少条评论，从 1 到 3
• Display type——在水平轮播或垂直堆叠布局之间选择
• Minimum rating——设置评论展示的最低星级
• Truncate review text after (optional)——设置评论文本的最大字符长度。评论超过此限制时会以省略号截断，并出现”Read more”按钮。点击”Read more”会打开显示完整评论的弹出层。留空则不限制（默认）。

要使用 Flex Testimonials，你需要在 Settings > Product Reviews 中配置评论应用凭据。Aftersell 支持：

• Judge.me——需要你的 Private API token
• Klaviyo——需要你的 private API key
• Okendo——需要你的 User ID
• Yotpo——需要你的 App Key

设置说明请参见以下指南：

• Judge.me 集成
• Klaviyo 集成
• Okendo 集成
• Yotpo 集成

---

允许客户向订单添加备注。这些备注可以由客户手动填写，也可以是预设备注。当你的商店提供礼品包装或环保包装、并希望给客户一个简单的选择方式时，预设备注非常出色。

---

上传可插入到结账页中的自定义图片。

---

在结账页插入一条带有你选定文本的横幅。 文本 widget 有四种不同样式可选。

• **Information：**蓝色背景配蓝色信息图标。
• **Success：**绿色背景配绿色对勾图标。
• **Critical：**红色背景配红色感叹号图标。
• **Warning：**黄色背景配黄色警告三角图标。