Shopify Plus Checkout 可扩展性：自定义结账体验

Shopify 的结账转化率平均为 15%，在电子商务领域名列前茅。该统计数据就是 Shopify 历来限制结账定制的原因：他们的结账经过了很好的优化，定制修改往往会减少转化。但商家有正当理由进行定制：忠诚度积分显示、送货偏好、礼品消息、B2B 采购订单字段以及标准结账无法满足的合规性要求。

Checkout 可扩展性是 Shopify Plus 针对这种紧张局势的解决方案。它允许有意义的结账定制，同时保持 Shopify 优化的结账架构完整，并随着 Shopify 平台的发展保持自动更新。每次 Shopify 更新结账时，已弃用的 checkout.liquid 方法就会失效。扩展在设计上是安全升级的。

要点

• Checkout Extensibility 取代了已弃用的 checkout.liquid — 所有 Plus 商家必须在 2025 年之前迁移（已经过去）
• UI 扩展将 React 组件添加到特定的结账槽，而无需覆盖 Shopify 的核心结账模板
• 结帐功能启用自定义服务器端逻辑以进行折扣、运输和付款方式过滤
• 扩展在沙盒环境中执行 - 它们无法访问渲染目标之外的 DOM
• 品牌 API 允许对结帐颜色、版式和角半径进行完全可视化定制
• 购买后扩展在订单确认后添加一键追加销售优惠（最高转化排名）
• 感谢页面和订单状态页面现在可以通过扩展完全自定义
• 性能：扩展在 Shopify 基础设施中在服务器端呈现 - 没有客户端性能损失

---

结账扩展性架构

了解技术架构可以帮助您更好地决定构建什么以及如何构建。

扩展点（插槽）

Shopify 的结帐 UI 具有预定义的扩展点 - 您可以在其中注入自定义 React 组件的特定位置。将它们视为结帐模板中接受批准组件的结构化插槽：

扩展沙箱

扩展在隔离的 JavaScript 环境中运行。它们通过标准化 API（@shopify/ui-extensions 包）而不是直接 DOM 操作与 Shopify 的结帐进行通信。这意味着：

• 扩展程序无法读取或修改结帐页面的其他部分
• 扩展程序无法访问浏览器 cookie、localStorage 或外部 JavaScript
• 来自扩展程序的网络请求必须通过 Shopify 批准的端点
• 扩展程序可以通过 API 读取结账数据（购物车内容、客户信息、运输选择）

这种沙箱就是扩展程序可以安全升级的原因：Shopify 可以在不破坏扩展程序集成的情况下更新结帐模板。

---

设置您的扩展开发环境

先决条件

• 具有开发商店访问权限的 Shopify Plus 商店
• Node.js 18+ 和 npm/pnpm
• Shopify CLI 3.x

初始设置

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

这将在您的 Shopify 应用目录中创建一个结帐扩展脚手架。

扩展文件结构

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

最小扩展 (TypeScript/React)

显示自定义消息的结帐扩展程序：

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

注意：代码示例是说明性的；实际的 Shopify UI 扩展 API 不断发展 - 始终参考当前的 Shopify 开发人员文档。

---

高价值扩展用例

1.忠诚度积分显示和兑换

显示客户当前的忠诚度积分余额并允许他们使用积分作为折扣：

该扩展程序从结账上下文中读取客户的 ID，通过 Shopify 的 fetch 代理调用忠诚度平台的 API（Smile.io、LoyaltyLion），显示余额，并在确认后通过 Shopify 的折扣 API 应用折扣代码。

这取代了一个常见的摩擦点：想要兑换忠诚度积分但必须离开结账台才能找到代码的客户，这通常会导致放弃购物车。

预期转化影响：看到可用积分的忠诚度计划会员的结账完成率提高 3-8%。

2.礼品信息和包装选项

添加礼品消息字段和礼品包装选项以结帐。扩展名：

• 显示“这是一份礼物”切换
• 启用后，显示礼物消息的文本字段
• 可选择显示礼品包装追加销售（固定价格作为订单项添加）
• 将消息保存为可在包装工作流程中访问的订单属性

预期影响：2-5% 的订单使用礼品消息；追加销售创造了增量收入。

3. B2B 采购订单编号字段

B2B 买家需要为其采购系统提供 PO 编号。如果没有此字段，B2B 结账摩擦会很大：

该扩展添加了“采购订单号”文本输入字段，将其标记为 B2B 客户所需（通过客户标签检测），并将 PO 号保存为订单属性。 PO 编号显示在发票和订单管理中。

实现注意事项：通过使用 useCustomer 挂钩检查客户标签来检测 B2B 客户。

4.交货日期偏好

对于提供多种送货速度选项的商家来说，在送货选项旁边显示预计送货日期可以减少决策的不确定性并增加优质的送货选择：

该扩展挂钩到 purchase.checkout.shipping-option-item.render-after 以在每个运输选项下注入交货日期计算。日期计算使用当前日期 + 运输运输天数（从承运商 API 获取或按运输区域硬编码）。

预期影响：显示准确的交货日期后，加急运输选择增加 8-15%。

5.结账时追加销售/交叉销售

“完成订单”按钮之前的产品追加销售块 - 购买前增加 AOV 的最后机会：

该扩展程序读取购物车内容，调用您的推荐引擎 API，并通过一键添加到购物车显示 1-2 个相关附加产品。通过扩展程序添加的商品会实时更新 Shopify 结帐总额。

预期影响：5-12% 的买家从结账追加销售区块添加商品。

---

购买后延期：投资回报率最高的机会

客户完成结帐后，购买后扩展会立即显示在订单确认页面上。顾客处于最积极的状态——他们只是买了他们想要的东西。这是追加销售优惠转化率最高的展示位置。

一键式购买后追加销售

购买后扩展可以提供产品附加组件，通过客户已授权的付款方式收费，而无需新的结账流程：

1. 客户完成订单#1234
2. 出现扩展：“完成购买 - 添加 [产品]，价格为 19 美元（一键点击，无需重新输入付款信息）”
3. 客户接受或拒绝
4. 如果接受：创建新费用和新订单行项目
5. 客户被重定向到最终订单状态页面

预期影响：在正确的价格点上配置良好的购买后报价的接受率为 8-20%（对于 100 美元以上的主要订单，报价为 10-30 美元）。

感谢页面定制

除了追加销售之外，感谢页面扩展还可以：

• 显示从此订单获得的忠诚度积分
• 显示带有预先填充的分享链接的推荐计划 CTA
• 为消耗品一次性购买者提供订阅升级
• 要求社交媒体关注并给予奖励
• 为首次购买该类别的买家展示产品保养说明

---

校验功能：服务器端逻辑扩展

结账功能比 UI 扩展更强大——它们修改核心结账计算逻辑本身。它们在服务器端作为已编译的 WebAssembly 运行，这意味着它们速度很快并且无法被客户端操作绕过。

折扣功能

实现 Shopify 原生折扣引擎不支持的复杂折扣逻辑：

运输功能

修改 Shopify 计算和显示运输选项的方式：

• 根据购物车内容隐藏某些运输方式（超大物品没有标准运输）
• 从您的物流提供商处注入自定义运费
• 对远程送货地址收取运费附加费
• 一旦购物车达到阈值（实时计算），提供免费送货

支付定制功能

控制显示哪些付款方式：

• 隐藏国际订单的“货到付款”
• 仅显示 10,000 美元以上订单的银行转帐
• 隐藏特定产品类别的 PayPal（合规原因）
• 显示自定义付款方式说明或图标

---

品牌 API：视觉结账定制

Checkout Branding API 允许全面的视觉定制，而无需触及结账逻辑：

您可以定制什么

通过 Shopify 管理员 → 设置 → 结帐和客户帐户 → 自定义结帐进行配置，或直接通过品牌 API 进行跨多个商店的编程配置。

---

从 checkout.liquid 迁移

如果您的 Shopify Plus 商店使用 checkout.liquid（2024 年 8 月已弃用，强制迁移完成），您需要将自定义重建为扩展。常见的 checkout.liquid 自定义及其等效扩展：

相对于 checkout.liquid 的限制

扩展无法复制任意 JavaScript 注入或完整模板操作。如果您的 checkout.liquid 包含复杂的条件逻辑或深度自定义的 UI 布局，则某些功能可能需要使用 Checkout Functions 重建，或者可能根本无法在扩展框架中复制。

---

常见问题

Checkout 扩展性功能适用于移动设备和桌面设备吗？

是的。 UI 扩展使用 Shopify 的 UI 组件进行渲染，这些组件本质上是响应式的。 Shopify 的结帐处理布局响应能力 - 您的扩展程序在其指定的插槽中呈现，该插槽会自动适应屏幕尺寸。您不需要编写单独的移动和桌面布局。

扩展程序会降低结账体验吗？

UI 扩展在 Shopify 的基础设施内进行服务器渲染 - 它们不需要客户端 JavaScript 执行来进行初始渲染。但是，进行 API 调用（以获取忠诚度余额、推荐数据等）的扩展会增加网络延迟。通过缓存响应和优化端点，将 API 调用保持在 200 毫秒以下。 Shopify 会检测到持续减慢结账速度的扩展程序，并可能将其禁用。

在上线之前如何测试 Checkout Extensions？

使用 Shopify 的开发商店来测试扩展，而不影响您的生产结账。 Shopify CLI 提供本地开发服务器，可在真实的 Shopify 结账环境中预览您的扩展。扩展还可以以“隐藏”状态部署到您的生产商店，仅通过预览 URL 可见 - 对于利益相关者在公开发布之前进行审查非常有用。

构建 Checkout 扩展程序需要哪些技术技能？

UI 扩展需要 React 和 TypeScript 知识。结帐功能需要 Rust 或 JavaScript（通过 Shopify 提供的工具链编译为 WebAssembly）。大多数具有 React 经验的开发人员可以在查看 Shopify 的文档后构建 UI 扩展。结账功能对技术要求更高——具有后端经验的高级开发人员适合完成重要的功能。

Checkout Extensions 是否适用于 Plus 以外的 Shopify 套餐？

所有 Shopify 套餐均提供购买后扩展和感谢页面扩展。结帐 UI 扩展（结帐中自定义）仅适用于 Plus。结帐功能仅限 Plus。用于结帐视觉定制的品牌 API 仅适用于 Plus（尽管基本主题编辑器结帐定制可在所有计划中使用）。

---

后续步骤

Checkout 可扩展性是 Shopify Plus 功能集中技术上最复杂的功能。投资回报率很明确——忠诚度兑换、B2B 领域、购买后追加销售和交付日期透明度都已记录转化影响。该实现需要 React 开发技能并熟悉 Shopify 的扩展 API。

ECOSIRE 的 Shopify Plus 团队 为从 DTC 品牌到 B2B 分销商等商家构建和维护 Checkout Extensions。我们的开发人员是 Shopify Plus 认证合作伙伴，在 Checkout 可扩展性、Checkout 功能和品牌 API 方面拥有丰富的经验。

联系我们讨论您的结账定制要求 — 我们将评估您的需求并设计一个扩展架构，在不影响结账性能的情况下提高转化率。