> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 如何配置 checkout 小组件

> 在 Aftersell 中配置 checkout 小组件的完整分步指南，包括所有小组件类型、放置选项，以及移动端和桌面端的转化最佳实践

本指南将引导你在 Aftersell 中配置和放置 checkout 小组件，从启用小组件到优化其在 Shopify Checkout 中的位置以实现最大转化率。

\*\*注意：\*\*由于 Shopify 的 Checkout Extensibility API 限制，checkout 小组件仅对 Shopify Plus 商家可用。

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## 第 1 步：在 Aftersell 中启用你的小组件
</div>

在将小组件添加到 checkout 之前，你需要在 Aftersell 后台启用它们。

1. 前往 Aftersell 后台的 **Checkout** 标签页
2. 选择你想配置的小组件类型（[Upsells](#upsells)、[Cart Controls](#cart-controls)、[Rewards](#rewards)、[Trust Badges](#trust-badges)、[Testimonials](#testimonials)、[Notes](#notes)、[Images](#images) 或 [Text](#text)）
3. 点击 **Create** 构建新小组件，或选择现有小组件进行编辑
4. 配置你的小组件设置（参见下方的[小组件类型和配置](#widget-types-and-configuration)）
5. 点击小组件设置右上角的 **Enable** 开关
6. 对于受限或高级 upsell，请确保在继续之前启用自定义触发器

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## 第 2 步：打开 Shopify Checkout 编辑器
</div>

有两种方式可以访问 Shopify Checkout 编辑器：

**方式 1：从 Shopify 后台**

1. 前往 Shopify 后台的 **Settings**
2. 点击左侧导航中的 **Checkout**
3. 点击目标 checkout 配置文件旁的 **Customize**

**方式 2：从 Aftersell**

1. 点击 Aftersell Checkout 编辑器页面右下角的 **Open Shopify Checkout Editor** 按钮

💡 \*\*提示：\*\*方式 1 让你能更好地控制正在编辑的 checkout 配置文件。我们建议先在草稿版本上测试，然后再将其上线。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Shopify 后台首页高亮显示用于打开 checkout 编辑器的 Settings 链接" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## 第 3 步：将应用区块添加到你的 checkout
</div>

1. 在 Shopify Checkout 编辑器中，点击 **Add app block**
2. 从可用小组件列表中选择你需要的 Aftersell 小组件
3. 为你的小组件选择正确的 placement（参见下方的[可用 placement](#available-placements)）
4. 如果你希望小组件在 Shop Pay checkout 中显示，勾选 [**Include app block in Shop Pay**](/zh/aftersell/show_checkout_widgets_in_shop_pay) 选项
5. 点击右上角的 **Save**

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Shopify Checkout 编辑器中箭头指向侧边栏的 Add block 按钮" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## 第 4 步：放置你的小组件
</div>

1. 将应用区块拖放到所选 placement 区域内你想要的位置
2. 点击右上角的 **Save**

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Shopify Checkout 编辑器区块列表旁的实时 checkout 预览显示 Aftersell 小组件" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## 小组件类型和配置
</div>

<div id="placements">
  ## Placement
</div>

Placement 在 Aftersell Checkout 编辑器中创建，允许你在同一 checkout 页面上运行多个同类型的小组件。

例如，如果你想在同一页面上展示两个 upsell 优惠，每个优惠必须分配到不同的 placement。

<div id="available-placements">
  ### 可用 placement
</div>

* **Default placement**：主 placement。每种小组件类型都从这里开始。
* **Additional placement 1**：第二个 placement 位置，用于在同一页面上展示另一个同类型小组件。
* **Additional placement 2**：第三个 placement 位置，用于进一步区分。

你也可以在 Aftersell 中直接从 placement 下拉菜单选择 **+ Add new placement** 来创建新的 placement。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Aftersell Checkout 编辑器在 Upsells 列表和预览上方显示 placement 下拉菜单" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### 何时使用多个 placement
</div>

在以下情况下使用多个 placement：

* 在单个 checkout 页面上展示多个同类型小组件
* 在页面的不同区域显示小组件
* 用不同的优惠定向不同的受众
* 运行触发条件相似或重叠的小组件

Aftersell 使用优先级系统。你不能在同一 placement 内运行触发条件完全相同的多个小组件。如果同一 placement 中的两个小组件共享相同的触发条件，则只有一个会根据优先级显示。

要使用相似的触发条件，请将每个小组件分配到不同的 placement，使它们能够独立运行而不发生冲突。

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## 在 Shopify Checkout 编辑器中匹配 placement
</div>

Aftersell 中的每个 placement 都对应 Shopify Checkout 编辑器中的一个独立应用区块。在 Shopify 中选择的 placement 必须与 Aftersell 中设置的 placement 一致。

例如，如果某个小组件在 Aftersell 中被分配到 **Additional placement 1**，那么 Shopify 中的应用区块也必须设置为 **Additional placement 1**。

如果 placement 不匹配，小组件可能不会显示，或可能显示在错误的位置。

\*\*重要：\*\*placement 不匹配是小组件无法显示的最常见原因之一。如果某个小组件没有出现，请先确认 Aftersell 和 Shopify 中的 placement 一致，再进行进一步排查。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Shopify Checkout 编辑器 Upsell Widget 区块设置中 Placement 下拉菜单设为一个 additional placement" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

在 checkout 过程中向客户推荐产品，以提高平均订单价值（AOV）。

**配置选项：**

**小组件模式：**

* \*\*Single Product Upsell：\*\*展示一个带有 Add to Cart 按钮的产品
* \*\*Multi-Product Upsell：\*\*以堆叠或轮播布局展示多个产品，允许客户接受多个优惠
* \*\*Checkmark Upsell：\*\*展示一个带复选框而非 Add to Cart 按钮的产品（非常适合运费保障等低价附加项）

**产品选择方式：**

* \*\*Specific Products：\*\*手动选择要推荐的单个产品
* \*\*Collection：\*\*选择一个产品系列并随机展示最多 5 个产品（已在购物车中的产品会自动排除）
* \*\*Automatic upsell(s)：\*\*根据购物车内容自动推荐产品
* \*\*Most Expensive Product：\*\*自动推荐购物车中最贵的产品
* \*\*Spend threshold：\*\*推荐能帮助客户达到奖励门槛的产品（仅当同一 upsell 小组件启用了 **Show rewards bar** 后才可选）
* \*\*Strategy：\*\*使用基于规则的定向动态选择产品。仅在启用了 [Strategies](/zh/aftersell/strategies_overview) 的商店中显示

**其他功能：**

* 直接在小组件内添加折扣
* 将订阅计划锁定为特定选项
* 显示产品评价星级（需要兼容的评价应用）
* 设置每个小组件可接受优惠的最大数量（仅限 Single 和 Multi upsell 类型）

[了解更多 upsell 小组件](/zh/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

允许客户直接在 checkout 页面上修改购物车。

**可用控制项：**

* \*\*Variant selector：\*\*更换为另一个有货的变体
* \*\*Quantity selector：\*\*调整产品数量
* \*\*Remove item：\*\*Show Remove Item Button 可从购物车中移除 upsell 产品。配套设置 **Allow Removal of Non-Upsell Products**（默认关闭）可将移除范围扩展到购物车中的所有商品
* \*\*Subscription selector：\*\*更改订阅频率
* \*\*Subscription upgrade：\*\*将一次性购买升级为订阅
* \*\*Custom text：\*\*在商品行下方添加自定义文本

**产品定向：**

* 应用于购物车中的所有产品
* 仅应用于选定的产品
* 应用于除选定产品之外的所有产品

**其他功能：**

* 为购物车内的产品显示评价星级

[了解更多购物车控制](/zh/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

显示进度条，让客户了解距离获得奖励还有多远。

**配置选项：**

* 奖励依据：**Cart total** 或 **Item count**
* 金额依据（针对 Cart total）：**Order total (includes shipping and tax)**、**Subtotal (before discounts)** 或 **Subtotal after discounts (excludes tax and shipping)**
* 奖励消息和样式
* 进度条颜色和设计

**最佳实践：**

* 与 upsell 小组件搭配使用，帮助客户达到奖励门槛
* 在 upsell 中使用 spend threshold 产品类型，自动推荐能填补差额的产品
* 在 Shopify 中使用自动折扣（用于折扣奖励）或运费规则（用于免运费）创建奖励
* 在提供免运费时，使用 **Subtotal after discounts (excludes tax and shipping)** 作为金额依据，以便在应用折扣码时进度条与 Shopify 自身的门槛判定保持一致

[了解更多奖励](/zh/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

通过自定义图标和文本建立信任，提升 checkout 转化率。

**配置选项：**

* 徽章布局：垂直堆叠或水平展示
* 每个徽章的自定义图标和文本
* 样式和间距选项

**最佳实践：**

* 突出安全特性（安全 checkout、SSL 加密）
* 展示保障承诺（退款保证、免费退货）
* 显示配送优势（免运费、快速送达）

[了解更多信任徽章](/zh/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonials
</div>

直接在 checkout 上展示客户评价以建立信任。

**配置选项：**

* \*\*Flex Testimonials（推荐）：\*\*自动从你的评价应用（Judge.me、Klaviyo、Okendo 或 Yotpo）拉取真实评价
* 选择模式：Manual（选择特定评价）或 Dynamic（根据购物车内容自动获取评价）
* 展示类型：水平轮播或垂直堆叠
* 最低星级过滤

**设置要求：**

* 在 Settings > Product Reviews 中配置评价应用凭据
* 评价会在 24 小时内自动同步，之后每周同步一次

[了解更多评价](/zh/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

允许客户为订单添加备注。

**配置选项：**

* 手动备注：供客户输入的自由文本字段
* 预设备注：礼品包装或环保包装等选项的复选框

[了解更多备注](/zh/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

在你的 checkout 中上传并展示自定义图片。

**配置选项：**

* 图片上传
* 宽度调整滑块
* 无最小尺寸要求

[了解更多图片](/zh/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Text
</div>

在你的 checkout 中插入带自定义文本的横幅。

**配置选项：**

* **Container Style：** **Plain Text**（默认）或 **Badge**。只有选择 Badge 后，下方的横幅颜色才会出现
* **Banner Type**（仅限 Badge）：
  * \*\*Info (Blue)：\*\*蓝色背景配信息图标
  * \*\*Success (Green)：\*\*绿色背景配对勾图标
  * \*\*Warning (Yellow)：\*\*黄色背景配警告三角图标
  * \*\*Critical (Red)：\*\*红色背景配感叹号图标
* **Body** 字段的文本大小（Small 或 Base）—— Heading 字段没有大小控制
* Heading 和 Body 字段均可设置对齐方式
* 间距：None、Extra Tight、Tight、Base、Loose 或 Extra Loose

[了解更多文本](/zh/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## 疑难解答
</div>

<div id="widgets-not-displaying">
  ### 小组件未显示
</div>

如果设置后小组件没有显示：

1. 验证小组件已在 Aftersell 后台启用
2. 检查应用区块已在 Shopify Checkout 编辑器中添加
3. 确认应用区块已在 Shopify Checkout 编辑器中保存
4. 验证已选择正确的 placement。在 Shopify Checkout 编辑器中添加应用区块时，你必须选择匹配的 placement，例如 Default placement、Additional placement 1 或 Additional placement 2。如果选错 placement，小组件可能不会显示或显示在错误的位置。请移除应用区块并重新添加，确保选择了预期的 placement。
5. 针对 Shop Pay：验证已勾选"Include app block in Shop Pay"
6. 清除浏览器缓存或尝试无痕模式
7. 等待几分钟让更改生效

<div id="shop-pay-widgets-not-showing">
  ### Shop Pay 小组件未显示
</div>

要在 Shop Pay checkout 中显示小组件：

1. 在 Shopify Checkout 编辑器中打开该小组件
2. 在 Checkout behaviour 下勾选 **Include app block in Shop Pay** 选项
3. 保存你的更改

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Shopify Checkout 编辑器侧边栏在 Main 下显示 Aftersell Upsell Widget 应用区块" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[了解更多 Shop Pay 小组件](/zh/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## 后续步骤
</div>

* [了解 checkout 触发器](/zh/aftersell/checkout_triggers)，按条件展示小组件
* [设置 checkout A/B 测试](/zh/aftersell/checkout_a_b_testing)，优化 placement
* [配置 checkout 品牌设置](/zh/aftersell/checkout_branding_settings)，与你的商店设计保持一致
* [探索高级 upsell 策略](/zh/aftersell/best_practices)，最大化 AOV