Shopify Checkout 可扩展性：2026 年完整指南

Shopify 通过结账处理的年度 GMV 超过 2350 亿美元。随着 checkout.liquid 的弃用和 Checkout Extensibility 的全面推出，每个 Shopify 商家都需要了解新系统的工作原理、它支持什么以及如何在不损失转化的情况下进行迁移。

本指南涵盖了 Shopify Checkout 扩展性的每个主要组成部分：UI 扩展、Shopify 功能、品牌 API、结帐块、支付和运输定制以及将结帐转变为竞争优势的策略。

要点

• Checkout Extensibility 将 checkout.liquid 替换为基于 UI 扩展和 Shopify 功能的安全、升级安全的架构
• Checkout UI 扩展在沙盒环境中运行，使用通过 checkout 目标呈现的基于 React 的组件
• Shopify Functions 让您可以在服务器端自定义折扣逻辑、支付方式过滤和运费操作，无需外部 API 调用
• Checkout Branding API 提供对颜色、排版、间距和布局的精细控制，无需触及扩展代码
• Shopify Plus 商家必须从 checkout.liquid 迁移，并且应进行系统规划以避免转化率下降
• 通过适当的用户体验测试实施时，自定义结帐流程可以将转化率提高 8-15%

什么是结帐扩展性？

Checkout Extensibility 是用于自定义结账体验的 Shopify 框架。它用围绕三个支柱设计的系统取代了传统的 checkout.liquid 方法：

1. 结帐 UI 扩展 --- 基于 React 的组件，在结帐流程中的特定位置呈现
2. Shopify Functions --- 在 Shopify 基础架构中运行的服务器端逻辑，用于自定义业务规则
3. Checkout Branding API --- 用于控制结账视觉外观的 GraphQL API

与 checkout.liquid 不同的是，checkout.liquid 为商家提供了完整的 HTML/CSS/JS 控制权，但会带来升级和安全风险，Checkout Extensibility 在受控环境中提供自定义功能，Shopify 可以继续优化该环境。

检查 UI 扩展

他们是如何工作的

Checkout UI 扩展是使用 Shopify UI 扩展框架构建的。它们在结账流程中呈现在预定义的扩展目标（也称为扩展点）内。每个目标对应于一个特定位置：运输方式选择器之前、订单摘要之后、付款部分内部等等。

扩展程序使用 Shopify 提供的一组有限的 UI 组件：

|组件|目的|常见用例 | |------------|---------|-----------------| |横幅|显示提醒或促销 |免运费门槛，限时优惠| |块堆栈/内联堆栈|布局容器|组织自定义字段和内容 | |文本字段 |文字输入集合|礼品留言、定制说明| |复选框|布尔选择 |时事通讯注册、条款接受 | |选择|下拉选择|交货日期偏好 | |标题/文字|版式|节标题、帮助文本 | |图片|视觉内容|信任徽章，品牌元素| |分频器|视觉分离|分节符 |

结账流程中的扩展目标

结账流程提供了数十个按部分分组的扩展目标：

整个结帐之前和之后 --- buy.checkout.header.render-after 和 buy.checkout.footer.render-after 允许您在整个结帐周围添加内容。

送货地址部分 --- 使用 buy.checkout.shipping-address.render-before 和 render-after 目标在送货地址表单之前或之后渲染内容。

送货方式部分 --- 在送货选项列表之前或之后添加横幅、信息或自定义 UI。

付款方式部分 --- 在付款方式选择器周围插入信任徽章、付款信息或自定义字段。

订单摘要 --- 在购物车订单项和订单总额旁边添加追加销售、交叉销售或信息内容。

构建结账 UI 扩展

典型的结账 UI 扩展项目是使用 Shopify CLI 和 checkout_ui 扩展类型构建的。扩展入口点使用reactExtension函数在结帐流程中的特定目标位置注册组件。

例如，免费送货横幅扩展将使用 useCartLines 挂钩来计算购物车小计，将其与免费送货阈值进行比较，并呈现横幅组件，显示成功消息或客户需要添加多少。此单一扩展通常会使平均订单价值增加 5-12%。

扩展 API 挂钩

Shopify 提供了一组丰富的钩子用于访问结账状态：

• useCartLines() --- 访问购物车中的所有商品及其价格、数量和产品元数据
• useBuyerJourney() --- 拦截并验证结账进度，阻止无效提交
• useShippingAddress() --- 读取条件逻辑的送货地址
• useApplyDiscountCodeChange() --- 根据条件以编程方式应用折扣代码
• useApplyMetafieldChange() --- 在订单上存储自定义数据以用于履行工作流程
• useExtensionApi() --- 访问完整的扩展 API，包括本地化和会话令牌

实际扩展示例

礼物消息集合：将 TextField 组件放置在 Shipping-address.render-after 目标中。使用 useApplyMetafieldChange 将消息存储为订单元字段。履行团队在打包过程中读取元字段。

交货日期选择器：使用选择组件，其中的可用日期是根据运输承运商 SLA 数据计算得出的。将所选日期存储为元字段并将其用于履行计划。

忠诚度积分显示：向回头客显示他们可用的忠诚度积分，并让他们使用 useApplyDiscountCodeChange 将积分作为折扣应用。

Shopify 功能

Shopify 功能取代了什么

在 Shopify Functions 之前，自定义业务逻辑需要外部 API 调用，这会增加结账时的延迟和故障点。函数直接在 Shopify 基础设施内运行，执行时间不到 5 毫秒，没有网络开销。

函数类型

|功能类型 |它定制什么 |示例| |----------------|--------------------|---------| |产品折扣 |产品自动折扣 |买2送1，层级逻辑复杂 | |订单折扣 |整个订单折扣 |消费超过阈值，可节省 15% 的除外 | |运费折扣 |运费折扣 |忠诚会员免运费| |支付定制 |付款方式可见性和订购 |隐藏大额订单的 COD | |交付定制|运输方式名称和排序 |重命名运营商，按优先级重新排序 | |购物车变换 |修改购物车内容 |自动捆绑产品、扩展套件 | |履行限制|限制履行选项 |高价值物品需要签名 |

函数如何工作

函数是用 Rust（编译为 WebAssembly）或 JavaScript 编写的。每个函数接收一个包含相关结帐数据的输入对象，并返回一个描述要应用的更改的操作数组。

对于支付自定义，该函数接收所有可用的支付方式和购物车数据，然后根据您的业务规则返回特定方法的隐藏或重新排序操作。对于送货定制，功能可以重命名送货选项，按优先级重新排序，或根据购物车内容或送货地址隐藏它们。

函数限制

• 执行时间：最长 5 毫秒
• 内存：最大 10MB
• 输入大小：受函数输入查询限制
• 无网络调用：函数无法发出 HTTP 请求
• 无持久状态：每次调用都是无状态的

这些限制是有意为之的。即使有数十种活动功能，它们也能确保结账性能保持一致。

查看品牌 API

Checkout Branding API 提供可视化定制，无需构建扩展。它控制：

颜色 --- 主要和次要品牌颜色、背景颜色、文本和链接颜色以及错误、成功和警告的状态颜色。

版式 --- Shopify 字体库中的字体系列或自定义字体、标题、正文和标签的字体大小，以及字体粗细和行高。

布局和间距 --- 按钮、输入和容器的圆角半径、部分之间的间距和边框样式。

徽标和图标 --- 带有位置和大小控件的结帐标题徽标。

品牌 API 是通过 checkoutBrandingUpsert GraphQL 突变访问的。您传递一个配置文件和品牌输入对象来指定您的设计系统：配色方案、排版设置和圆角半径值。这将视觉品牌与功能定制分开，因此您可以更新结帐外观而无需修改扩展代码。

从 checkout.liquid 迁移

为什么迁移是强制性的

Shopify 已为 checkout.liquid 设定了严格的弃用时间表。所有 Shopify Plus 商家都必须迁移到 Checkout 可扩展性。

1. 安全：checkout.liquid 允许在结账时执行任意 JavaScript，从而产生 XSS 和数据泄露风险
2. 性能：未优化的 checkout.liquid 自定义会减慢页面加载速度
3. 升级路径：当商家覆盖整个结帐模板时，Shopify 无法推出结帐改进

迁移清单

| checkout.liquid 功能 |结账可扩展性等效 | |------------------------------------|------------------------------------------------| |自定义 CSS 样式 |结帐品牌 API | |信任徽章图像|带有图像组件的 Checkout UI 扩展 | |礼物留言栏 |使用 TextField 结账 UI 扩展 | |自定义折扣逻辑 | Shopify功能（折扣型）| |付款方式隐藏 | Shopify功能（支付定制）| |运送方式重命名 | Shopify功能（发货定制）| |订单备注字段 |使用 TextField + 元字段查看 UI 扩展 | |分析脚本 |网络像素（客户事件）| |自定义验证 |带有验证逻辑的 useBuyerJourney 挂钩 |

分步迁移过程

1. 审核当前的 checkout.liquid --- 记录每个自定义、脚本和视觉更改
2. 对每个定制进行分类 --- 映射到 UI 扩展、功能、品牌 API 或 Web 像素
3. 在开发中构建和测试 --- 使用 Shopify CLI 针对开发商店在本地测试扩展
4. 增量部署 --- 首先在测试商店上启用 Checkout 可扩展性，然后推广到生产环境
5. 监控转化率 --- 比较迁移前后至少两周的结账完成率
6. 迭代 --- 使用 A/B 测试来优化扩展放置和消息传递

付款和运输定制

支付定制策略

• 基于区域的付款方式：根据送货地址显示本地付款方式（荷兰的 iDEAL、巴西的 PIX）
• 订单价值阈值：隐藏低价值或极高价值订单的“先买后付款”
• 客户标签过滤：仅显示标记的 B2B 客户的批发付款条件
• 基于产品的限制：禁用数字产品或订阅的某些付款方式

运输定制策略

• 承运商重命名：将技术承运商名称替换为“快速交付（3-5 个工作日）”等品牌名称
• 费率排序：将首选运输方式推至列表顶部
• 有条件的可用性：隐藏超大物品或农村地址的快递运输
• 预计交货日期：使用交货自定义功能在每个运输选项旁边显示预计交货日期

转化优化技巧

减少结账摩擦

• 使用地址自动完成功能（内置于 Shopify checkout 中）并确保其适用于所有目标市场
• 为回头客启用 Shop Pay --- 最多可将结账时间缩短 4 倍
• 最小化自定义字段的数量；每增加一个字段，完成率就会降低 3-5%

在结账时建立信任

• 将安全徽章和信任信号放置在结账页脚区域
• 在付款部分附近显示清晰的退货政策摘要
• 显示客户评论计数或满意度评级

利用购买后扩展

• 使用感谢页面呈现目标进行追加销售优惠
• 在订单确认页面显示订阅注册提示
• 购买后立即收集NPS反馈

常见问题

Checkout 扩展性是否适用于所有 Shopify 套餐？

所有 Shopify 套餐均提供 Checkout UI 扩展和 Shopify 功能。但是，一些高级功能（例如完整结账品牌定制）仅限于 Shopify Plus。所有计划均可通过主题编辑器使用基本品牌（颜色和字体）。

我的 checkout.liquid 自定义功能会停止工作吗？

是的。 Shopify 已为 checkout.liquid 设置弃用时间表。尚未迁移的 Shopify Plus 商家将自动转换为默认结账体验。立即规划您的迁移，以保持对结帐的控制。

我可以在 Checkout 扩展性中使用第三方 JavaScript 吗？

不可以。Checkout UI 扩展在沙盒环境中运行，无法加载外部脚本。这是一项安全措施。如果您需要外部服务集成，请使用 Shopify Functions 进行服务器端逻辑或使用 Web Pixels 进行分析跟踪。

Shopify 功能如何影响结账速度？

Shopify Functions 在 Shopify 基础设施中的执行时间不到 5 毫秒。它们比它们所替代的外部 API 调用要快得多。从脚本迁移到函数后，大多数商家都看到了结账性能的提高。

迁移后我可以回滚到 checkout.liquid 吗？

在迁移期间，您可以在商店设置中在 checkout.liquid 和 Checkout Extensibility 之间切换。但是，一旦 Shopify 完全弃用您商店的 checkout.liquid，就无法再进行回滚。

改变您的 Shopify Checkout

Checkout 可扩展性代表了 Shopify 商务的未来。无论您需要从 checkout.liquid 迁移、构建自定义结账流程还是优化转化率，新框架都提供了工具来创建符合您的品牌和业务需求的结账体验。

ECOSIRE 专注于Shopify 商店设置、自定义主题开发 和转化优化。有关 Shopify Plus 上的高级结帐自定义，请探索我们的 Shopify Plus 服务。

准备好升级您的结账体验了吗？ 联系我们的 Shopify 专家 讨论您的结帐扩展性项目。