Skip to main content
本指南将引导你在 Aftersell 中配置和放置 checkout 小组件，从启用小组件到优化其在 Shopify Checkout 中的位置以实现最大转化率。 **注意：**由于 Shopify 的 Checkout Extensibility API 限制，checkout 小组件仅对 Shopify Plus 商家可用。

​
第 1 步：在 Aftersell 中启用你的小组件

在将小组件添加到 checkout 之前，你需要在 Aftersell 后台启用它们。
  1. 前往 Aftersell 后台的 Checkout 标签页
  2. 选择你想配置的小组件类型（Upsells、Cart Controls、Rewards、Trust Badges、Testimonials、Notes、Images 或 Text）
  3. 点击 Create 构建新小组件，或选择现有小组件进行编辑
  4. 配置你的小组件设置（参见下方的小组件类型和配置）
  5. 点击小组件设置右上角的 Enable 开关
  6. 对于受限或高级 upsell，请确保在继续之前启用自定义触发器

​
第 2 步：打开 Shopify Checkout 编辑器

有两种方式可以访问 Shopify Checkout 编辑器： 方式 1：从 Shopify 后台
  1. 前往 Shopify 后台的 Settings
  2. 点击左侧导航中的 Checkout
  3. 点击目标 checkout 配置文件旁的 Customize
方式 2：从 Aftersell
  1. 点击 Aftersell Checkout 编辑器页面右下角的 Open Shopify Checkout Editor 按钮
💡 **提示：**方式 1 让你能更好地控制正在编辑的 checkout 配置文件。我们建议先在草稿版本上测试，然后再将其上线。 Shopify 后台首页高亮显示用于打开 checkout 编辑器的 Settings 链接

​
第 3 步：将应用区块添加到你的 checkout

  1. 在 Shopify Checkout 编辑器中，点击 Add app block
  2. 从可用小组件列表中选择你需要的 Aftersell 小组件
  3. 为你的小组件选择正确的 placement（参见下方的可用 placement）
  4. 如果你希望小组件在 Shop Pay checkout 中显示，勾选 Include app block in Shop Pay 选项
  5. 点击右上角的 Save
Shopify Checkout 编辑器中箭头指向侧边栏的 Add block 按钮

​
第 4 步：放置你的小组件

  1. 将应用区块拖放到所选 placement 区域内你想要的位置
  2. 点击右上角的 Save
Shopify Checkout 编辑器区块列表旁的实时 checkout 预览显示 Aftersell 小组件

​
小组件类型和配置

​
Placement

Placement 在 Aftersell Checkout 编辑器中创建，允许你在同一 checkout 页面上运行多个同类型的小组件。 例如，如果你想在同一页面上展示两个 upsell 优惠，每个优惠必须分配到不同的 placement。

​
可用 placement

  • Default placement：主 placement。每种小组件类型都从这里开始。
  • Additional placement 1：第二个 placement 位置，用于在同一页面上展示另一个同类型小组件。
  • Additional placement 2：第三个 placement 位置，用于进一步区分。
你也可以在 Aftersell 中直接从 placement 下拉菜单选择 + Add new placement 来创建新的 placement。 Aftersell Checkout 编辑器在 Upsells 列表和预览上方显示 placement 下拉菜单

​
何时使用多个 placement

在以下情况下使用多个 placement：
  • 在单个 checkout 页面上展示多个同类型小组件
  • 在页面的不同区域显示小组件
  • 用不同的优惠定向不同的受众
  • 运行触发条件相似或重叠的小组件
Aftersell 使用优先级系统。你不能在同一 placement 内运行触发条件完全相同的多个小组件。如果同一 placement 中的两个小组件共享相同的触发条件，则只有一个会根据优先级显示。 要使用相似的触发条件，请将每个小组件分配到不同的 placement，使它们能够独立运行而不发生冲突。

​
在 Shopify Checkout 编辑器中匹配 placement

Aftersell 中的每个 placement 都对应 Shopify Checkout 编辑器中的一个独立应用区块。在 Shopify 中选择的 placement 必须与 Aftersell 中设置的 placement 一致。 例如，如果某个小组件在 Aftersell 中被分配到 Additional placement 1，那么 Shopify 中的应用区块也必须设置为 Additional placement 1。 如果 placement 不匹配，小组件可能不会显示，或可能显示在错误的位置。 **重要：**placement 不匹配是小组件无法显示的最常见原因之一。如果某个小组件没有出现，请先确认 Aftersell 和 Shopify 中的 placement 一致，再进行进一步排查。 Shopify Checkout 编辑器 Upsell Widget 区块设置中 Placement 下拉菜单设为一个 additional placement

​
Upsells

在 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 的商店中显示
其他功能：
  • 直接在小组件内添加折扣
  • 将订阅计划锁定为特定选项
  • 显示产品评价星级（需要兼容的评价应用）
  • 设置每个小组件可接受优惠的最大数量（仅限 Single 和 Multi upsell 类型）
了解更多 upsell 小组件

​
Cart Controls

允许客户直接在 checkout 页面上修改购物车。 可用控制项：
  • **Variant selector：**更换为另一个有货的变体
  • **Quantity selector：**调整产品数量
  • **Remove item：**Show Remove Item Button 可从购物车中移除 upsell 产品。配套设置 Allow Removal of Non-Upsell Products（默认关闭）可将移除范围扩展到购物车中的所有商品
  • **Subscription selector：**更改订阅频率
  • **Subscription upgrade：**将一次性购买升级为订阅
  • **Custom text：**在商品行下方添加自定义文本
产品定向：
  • 应用于购物车中的所有产品
  • 仅应用于选定的产品
  • 应用于除选定产品之外的所有产品
其他功能：
  • 为购物车内的产品显示评价星级
了解更多购物车控制

​
Rewards

显示进度条，让客户了解距离获得奖励还有多远。 配置选项：
  • 奖励依据：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 自身的门槛判定保持一致
了解更多奖励

​
Trust Badges

通过自定义图标和文本建立信任，提升 checkout 转化率。 配置选项：
  • 徽章布局：垂直堆叠或水平展示
  • 每个徽章的自定义图标和文本
  • 样式和间距选项
最佳实践：
  • 突出安全特性（安全 checkout、SSL 加密）
  • 展示保障承诺（退款保证、免费退货）
  • 显示配送优势（免运费、快速送达）
了解更多信任徽章

​
Testimonials

直接在 checkout 上展示客户评价以建立信任。 配置选项：
  • **Flex Testimonials（推荐）：**自动从你的评价应用（Judge.me、Klaviyo、Okendo 或 Yotpo）拉取真实评价
  • 选择模式：Manual（选择特定评价）或 Dynamic（根据购物车内容自动获取评价）
  • 展示类型：水平轮播或垂直堆叠
  • 最低星级过滤
设置要求：
  • 在 Settings > Product Reviews 中配置评价应用凭据
  • 评价会在 24 小时内自动同步，之后每周同步一次
了解更多评价

​
Notes

允许客户为订单添加备注。 配置选项：
  • 手动备注：供客户输入的自由文本字段
  • 预设备注：礼品包装或环保包装等选项的复选框
了解更多备注

​
Images

在你的 checkout 中上传并展示自定义图片。 配置选项：
  • 图片上传
  • 宽度调整滑块
  • 无最小尺寸要求
了解更多图片

​
Text

在你的 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
了解更多文本

​
疑难解答

​
小组件未显示

如果设置后小组件没有显示：
  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. 等待几分钟让更改生效

​
Shop Pay 小组件未显示

要在 Shop Pay checkout 中显示小组件：
  1. 在 Shopify Checkout 编辑器中打开该小组件
  2. 在 Checkout behaviour 下勾选 Include app block in Shop Pay 选项
  3. 保存你的更改
Shopify Checkout 编辑器侧边栏在 Main 下显示 Aftersell Upsell Widget 应用区块 了解更多 Shop Pay 小组件

​
后续步骤