升级您的在线结账

您可以自定义在线结账,以扩展您的品牌、更改消息传递情况、提供报价,并对客户体验进行其他改进。为了确保您的自定义设置与 Shopify 正在进行的更改兼容,您需要定期更新结账页面。

若要为此升级做好准备,您需要执行以下操作:

  1. 预览新结账页面并测试面向客户的结账体验。根据您对结账所做的自定义,您可能需要更改 checkout.liquid 文件,然后才能升级。
  2. 对更改感到满意后,升级您的商店以使用新的 Shopify 结账。

预览结账页面并测试以发现错误

在升级商店以使用新版结账页面之前,请确保已预览更改。

预览结账

假装您是客户并创建测试结账。如果您在这些测试期间发现任何错误,则表示您的一些结账自定义项与新版本中的其他改进存在冲突。如果是这种情况,则您需要更改您的 checkout.liquid 文件,然后才能升级。

解决错误

步骤:

  1. 在 Shopify 后台中,转到在线商店 > 模版
  2. 勾选操作,然后单击复制
  3. 更多模版中,找到您已复制的模版,然后单击操作 > 编辑代码。执行编辑操作,然后使用此复制且未发布的模版版本测试所编辑的内容。

注:每当您更改或测试模版时,请创建一个副本并使用该副本。如果您在处理副本时出错,则可以删除该副本并从原始模版创建其他副本(不会影响客户)。

  1. 打开 checkout.liquid 文件。

  2. 在使用新 Shopify 结账的复制模版中预览 checkout.liquid 文件:

    1. 转到 Shopify 后台的结账升级页面,单击预览结账,然后选择复制的模版。
    2. 在预览中完成测试订单

如果在结账时遇到错误或发现结账页面存在显示问题,您需要通过编辑 checkout.liquid 文件来解决它们。

升级到新的 Shopify 结账页面

升级您的结账分为两步进行,首先您需要升级 Shopify 结账,然后使用包含更改内容的副本替换当前已发布的模版。

备注:在进行此升级之前,请确保已预览结账页面。您需要确保此升级不会影响客户的结账体验,并且他们仍然可以通过新的结账页面支付订单。

选择一天中比较空闲的时段来进行升级(例如清晨、深夜或周末的时间),从而在最大限度上避免可能出现的中断。

步骤:

  1. 结账升级页面,单击升级结账(此按钮位于该页面底部)。

  2. 如果您在首次预览模版时遇到错误,请首先确保已解决这些错误(请参阅上文的解决错误)。然后,发布更新后的复制模版:

    1. 在您的在线商店中,单击模版
    2. 找到您复制的模版并单击操作 > 发布

您的结账已升级,您复制的模版现在是您当前的模版。

Shopify 结账页面的新内容

新版 Shopify 结账页面包含以下更改和新功能:

  • 折扣 liquid 变量
  • 桌面版 Arrive
  • 订单编辑
  • 可访问性改进
  • 已删除填充
  • 付款方式显示
  • 已删除占位符字符串
  • 已保存的客户地址显示
  • 3D Secure 验证
  • “其他 Google Analytics JavaScript”字段更改
  • CSS 更改
  • 错误消息传递

折扣 liquid 变量

在整个结账流程中引入了与折扣显示相关的几个新 liquid 变量。这些更改有助于呈现基于脚本的自动折扣,更易于客户理解。

新 liquid 变量表
变量 定义
checkout.cart_level_discount_applications 返回针对结账的一组任何特定于购物车的折扣应用。
line_item.discount_allocations 返回所有折扣分配列表,包含折扣金额和对父级折扣应用的引用。line_item.discount_allocations 用于购物车、结账、订单和草稿订单中的订单项目。
line_item.final_line_price 返回订单项目中所有产品的总计价格,等于 line_item.final_price 乘以 line_item.quantity
line_item.final_price 返回订单项目的价格,包括所有订单项目级别的折扣金额。
line_item.line_level_discount_allocations 返回订单项目特定的折扣分配列表,包含折扣金额和对父级折扣应用的引用。line_item.line_level_discount_allocations 用于购物车、结账、订单和草稿订单中的订单项目。
line_item.total_discount 返回应用于订单项目的所有折扣总额。如果使用的是脚本编辑器应用,此属性只有一个值。

桌面版 Arrive

订单状态页面中添加了专门的电话号码字段。系统会提示客户输入手机号码以通过短信接收发货更新信息。短信中还包含 Arrive 应用的链接。

显示输入 Arrive 电话号码以进行订单跟踪的选项的图片

订单编辑

Shopify Plus 商家使用订单编辑时,将可使用 Shopify 结账获取已编辑订单的其他未结付款。结账页面发生了一些更改,旨在确保结账按预期工作:

  • 客户无法更改其联系信息、收货地址和发货方式。
  • 指示订单总额和已付款金额的其他订单项目。
  • 完成购买按钮更改为立即付款总额更改为待付金额
  • 客户将看到一个可折叠横幅,其中详细说明订单的其他信息,而不会看到显示客户在结账流程中所处位置的页面路径信息: - 额外付款金额。
    • 从订单中添加或删除的产品。
    • 订单号。

显示需要额外付款时结账页面的图片

这些更改仅在编辑订单时生效,并且需要您的客户提供额外付款。

如果您的结账自定义项使用页面路径来标识结账的当前步骤,则应改为使用 Shopify.Checkout.step 对象。请参阅步骤标识了解详细信息。

可访问性改进

结账流程进行了几项更改,以确保符合 Web 可访问性标准。这使使用可访问性技术(例如屏幕阅读器)的客户能够更轻松地导航结账流程。

  • 在所有结账步骤中,页面路径现在都包装在 nav 元素中。aria-current 属性已从 span 元素移至 li 元素。
  • 订单摘要现在位于 aside 元素中。
  • 在所有结账步骤中,移动客户的折扣码字段 ID 已从 checkout_reduction_code 更改为 checkout_reduction_code_mobile
  • 可访问性属性已添加到感谢订单状态页面的映射中。映射现在包含 role=regionaria-label 以及收货地址。
  • stepstep__section 包装器 div 已添加到订单状态库存不足感谢页面。
  • 已将语义 HTML5 元素引入结账流程,并且 role 属性已更新。 - 订单摘要现在位于 aside 元素中。
    • .main__header 的 div 现在是带有 role=banner 的标头元素。
    • .main__content 的 div 现在是带有 role=main 的主要元素。
    • .main__footer 的 div 现在是带有 role=contentinfo 的页脚元素。
    • banner 的 div 现在是带有 role=banner 的标头。

已删除填充

订单状态库存不足感谢页面中已删除商店名称和订单编号之间的空白。div.section.section--page-title 部分中已删除此类额外填充。

付款方式显示

现在,在付款方式部分的订单状态页面上向客户显示订单总金额。

显示了总订单金额的订单状态页面的图片

已删除占位符字符串

已从模版设置中的语言选项中删除邮箱占位符邮箱或电话号码占位符字段。您可以分别在邮箱标签邮箱或电话号码标签字段中进行任何必要的更改。要访问这些字段,请转到在线商店 > 模版,然后单击操作 > 编辑语言 > 结账和系统

已保存的客户地址显示

更改了在结账时为已登录客户显示已保存地址的方式。

显示已保存地址列表的图片

地址选项按以下顺序显示:

  1. 默认保存的地址。
  2. 最近添加的地址,从近期到早期排列。
  3. 使用新地址的选项。

下拉菜单最多显示五个地址。

3D Secure 验证

3D Secure 技术提供了一层额外安全保障,客户在完成购买前需要完成此项验证,该技术还为以下服务提供支持,如 Verified by Visa、Mastercard Identity Check 或 Amex SafeKey。结账期间,某些客户可能会被重定向到其银行门户,以进行额外身份验证。有关详细信息,请参阅了解 PSD2 和强客户身份验证

位于欧洲经济区 (EEA) 的商家可以使用 Cardinal 提供 3D Secure 结账。请参阅 Cardinal 3D Secure 了解详细信息。

哪些结账需要额外验证由银行决定,无法通过 Shopify 后台进行控制。无需执行任何操作即可启用此更改。

“其他 Google Analytics JavaScript”字段更改

以前输入到 Shopify 后台的在线商店 > 偏好设置中的其他 Google Analytics JavaScript 部分中的 JavaScript 已作为非可见 iFrame 添加到结账流程中。这不会影响用于分析目的的 JavaScript,但会阻止对结账流程进行其他更改。如果出于其他原因要向结账流程添加自定义 JavaScript,请直接将其添加到 checkout.liquid 文件中。

CSS 更改

heading-*text-container CSS 类已添加到所有结账步骤中。

错误消息传递

添加了错误横幅,用于通知客户所选的快速结账付款方式不可用。此横幅显示在结账流程中联系信息步骤的顶部。

图片

移动了通知客户先前运费不再有效的错误横幅。此横幅现在直接显示在可用发货选项上方。

图片

相关链接

准备好开始使用 Shopify 进行销售了吗?

免费试用