升级您的在线结账

已于 Apr 26, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/checkout-settings/checkout-upgrade。

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

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

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

本页相关主题

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

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

步骤：

  1. 在 Shopify 后台中，转至结账升级页面，然后点击预览结账。
  2. 从列表中选择您的当前模板，然后点击预览。
  3. 通过以客户身份继续完成结账流程来创建测试结账。

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

解决错误

步骤：

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

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

  1. 打开 checkout.liquid 文件。

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

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

升级到新的 Shopify 结账页面

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

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

步骤：

  1. 在结账升级页面，点击升级结账（此按钮位于该页面底部）。

  2. 如果您在首次预览模板时遇到错误，请首先确保已解决这些错误（请参阅上文的解决错误）。然后，发布更新后的复制模板：

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

Shopify 结账的新增内容

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

订阅

Shopify 结账页面已添加多个部分，以便您可以在维护结账自定义项的同时提供订阅产品。利用这些部分，您将可以直接在 Shopify 结账页面销售订阅产品并处理定期付款。

完成结账升级后，您可以通过从 Shopify App Store添加订阅应用来提供订阅，也可以使用新的订阅 API 开发自定义应用。

在 Shopify 帮助中心了解有关订阅的详细信息。

  • 启用订阅后，用于订阅的发货方式会与用于一次性购买的发货方式分开显示。
  • .product_description_variant Span.product_description_selling_plan 在有与产品关联的订阅的情况下显示为附加的订单项目属性。
  • 订单摘要中的总金额下方会显示带有附带工具提示的定期总计。
  • 当订单中包含订阅产品时，会显示订阅发货选项。

增销

Shopify App Store中提供了新的售后增销应用。这些应用会直接在 Shopify 结账页面中向您的客户提供购后优惠，并修改他们已完成的订单以添加增销产品，而无需重新输入任何账单或运费信息。

此结账升级包括对结账文件的更改，这些文件使售后增销可以与您的自定义结账一起使用。

详细了解售后增销。

  • 当 Shopify 后台中安装了有效的售后应用后，客户将收到购后优惠。

注：对售后页面的自定义是在第三方增销应用中完成的。无法使用 checkout.liquid 进行自定义。

结账时收取小费

使用小费选项可以让客户在其在线订单中添加小费，也可以收集捐款而不是小费。启用小费后，结账的付款方式步骤会显示添加小费部分。添加小费部分中除了输入自定义小费金额的字段外，还包括三个预先选择的小费选项。

详细了解如何提供小费选项。

  • 启用小费后，结账的付款方式步骤会显示添加小费部分。

取货和本地配送

到店取货和本地配送是新的配送方式，可让客户在本地收到订单。启用这些配送方式后，客户可以在结账的发货步骤中选择到店取货或本地配送。

了解如何启用到店取货和本地配送。

  • 当客户启用和选择本地配送时，会显示本地配送的附加字段。
  • 如果已启用到店取货，则在结账的信息页面上会向客户显示配送方式部分。如果运费不可用，则仅显示取货信息。

  • 配送方式显示为不同的选项卡。

    • 选择发货会提示客户输入其发货信息，并在点击继续发货后显示可用的发货方式。
    • 选择取货会显示取货地点列表。客户点击所需取货地点的单选按钮，然后点击继续付款。

  • 如果客户在结账的发货步骤中选择取货，则不会收集发货信息。客户需要在结账的付款步骤中输入付款信息。

  • 订单状态页面上会显示本地配送说明。这些说明可以通过 Shopify 后台中的设置 > 发货和配送来进行编辑。在到店取货部分中，找到要编辑的地点，然后点击管理。

  • 订单状态页面已更新，以显示配送和取货的进度。在以下情况下会显示消息：

    • 已准备好订单，可供配送。
    • 配送已完成。此消息还会提供一个用于重新订购相同商品的链接。
    • 取货订单已确认，这表示客户在可供取货时会收到一封电子邮件。
    • 取货订单可供取货。
    • 取货订单已取货。

其他国际字段

有些国家/地区有独特的运输法规，您需要满足这些法规才能将货件运达客户。对于具有独特运输法规的国家/地区，现在可以使用其他字段。这些新字段会显示在结账的付款方式步骤中。

详细了解其他国际字段。

  • 其他结账字段仅对巴西、韩国、意大利和中国的客户显示。

使用 Shop 按钮跟踪订单

订单状态和感谢页面上的使用 Shop 跟踪订单按钮已使用新设计进行了更新。

详细了解 Shop 应用。

  • 已添加一个文本按钮，提示客户在 Shop 应用中跟踪他们的购买。
  • 已添加参数，以显示 Shop Pay 跟踪情况。
  • 在以下情况下，呈现使用 Shop 跟踪订单按钮：
    • 未成功配送
    • 确认
    • 已送达
    • 失败
    • 运输中
    • 不可发货
    • 正在配送

订单状态页面更新

订单状态页面已进行多个更新。

  • 已创建用于礼品卡信息的专用部分，该部分在购买礼品卡时显示。
  • 已添加订阅信息。
  • 已删除类 icon-svg--align-text-bottom。
  • data-step="thank-you" 已更改为 data-step="thank_you"。如果您使用此属性来标识客户所在的结账页面，请改用 Shopify.Checkout.page JavaScript 对象。
  • 已添加订单状态卡。

常规文件更改

  • div.content-box__row 现在为 role="table"。
  • 如果客户正位于感谢步骤，并且拥有二维包，则会添加 show_qr.js。
  • 已添加一项检查，以确保客户能够访问结账页面。
  • 礼品卡现在显示 checkouts/order_status/gift_cards。
  • 已使用 enforce_content_directionality 修复了联系信息指令。
  • 发货信息已移至 checkouts/web/checkouts/contact_information/pickup。
  • 现在支持在订单摘要侧边栏中显示多个发货项目。
  • tr.total-line 仅在有更新的总计时显示。
  • 现在支持通用付款行。
  • 现在支持在结账期间更改货币。

  • #payment-gateway-subfields 现在有以下类：

    • .radio-wrapper content-box__row .content-box__row--secondary
    • .card-fields-container

  • 信用卡工具提示已进行调整，目前处于 div.field__icon 状态。

  • 已从运费完整说明中删除 Aria 标签。

  • 运费表单字段已移至 checkouts/web/checkouts/shipping_method/shipping_rate_additional_fields。

框架/加载状态

结账页面的加载状态已更新，添加了页面加载时可见的框架，或者有选择地隐藏某些元素直至加载完成。这些更改会缩短加载时间。

  • 加载时隐藏的对象：

    • del.total-recap__original-price
    • .total-line__price span.payment-due__currency
    • span.order-summary__emphasis

  • 加载时显示框架的对象：

    • Span.total-recap__final-price
    • .product__price del.order-summary__small-text
    • .product__price del.order-summary__emphasis
    • .total-line__price span.payment-due__price
    • .total-line__price span.order-summary__emphasis
    • .total-line__price span.visually-hidden
    • .total-line__price.total-line--subtotal span.order-summary__emphasis

错误消息传递

结账中已添加新的错误消息。

  • 地址字段中已添加公民编号警告。
  • 说明没有可用于购物车、目的地或国家/地区的运费的警告已分为两条不同的警告消息：一条警告消息说明没有可用于购物车或目的地的运费，另一条单独的警告说明没有可用于国家/地区的运费。
  • 在开发商店中尝试完成购买时，在结账页面中添加了警告横幅。
  • 添加了一条通知，该通知会在结账时不向客户收费时显示。
  • 添加了一条警告横幅，说明身份验证更改错误。
  • 添加了一条错误消息，说明结账的发货步骤中发货方式何时无法使用。

数据属性更改

Trekkie 已从以下对象中删除：

  • Continue_shipping_button
  • Get_shipping_updates_button
  • Shipping_updates_handle_field
  • Shipping_updates_submit_button
  • Change_shipping_address_link
  • breadcrumb_cart_link
  • apply_discount_button
  • Have_an_account_login_link
  • Email_or_phone_field
  • Email_field
  • buyer_accepts_marketing_field
  • Change_billing_address_link
  • Change_contact_method_link
  • Change_payment_method_link
  • Change_pickup_method_link
  • Change_shipping_address_link
  • 结账输入字段：
    • {type}_address_field
    • {type}_firstname_field
    • {type}_lastname_field
    • {type}_company_field
    • {type}_address1_google_autocomplete_field
    • {type}_address1_field
    • {type}_address2_field
    • {type}_city_field
    • {type}_country_field
    • {type}_province_field
    • {type}_zip_google_autocomplete_field
    • {type}_phone_field

可访问性改进

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

  • 为以下内容对 ul 添加了 role="list"：

    • u.breadcrumb
    • ul.payment-method-list
    • ul.os-timeline
    • ul.policy-list

  • 已从 telephone_field 的 aria-labelledby 中删除此工具提示。

  • 在 Shop 中，输入标签已更改为指向手机。

  • 在等待税费时添加了 h3 标题。

  • 重定向时添加了 h3 标题。

  • 加载发货方式时，p 标签已更改为 h3 标签。

  • 自动完成现在是指 mobile tel 而不是 phone。

  • 通过添加 role="region" 更新了 div[data-processing-order]。

  • 已更新 div[data-announce-change]，内容如下：

    • 已添加 role="region"
    • 设置了 aria-labelledby 以便与标头元素的 ID 匹配
    • 设置了 aria-describedby 以便与内容容器元素的 ID 匹配

  • 已更新 div.content-box blank-slate，内容如下：

    • 已添加 role="region"
    • 设置了 aria-labelledby 以便与标头元素的 ID 匹配

  • 快速结账网格已改进为使用 ul 和 li 元素，而不是 div。

  • 已更新订单摘要，内容如下：

    • 更加明确了促销价和常规价格
    • 已将范围更改为 dl 标签
    • 已将 del 标签更改为 dt 和 dd 标签。

  • 已更新付款详细信息方法，内容如下：

    • span.radio__label__accessory 已更改为 div.radio__label__accessory
    • span.visually-hidden 已更改为 h3.visually-hidden
    • span.payment-icon-list__more 已更改为 li.payment-icon-list__more
    • span.content-box__small-text 已更改为 small.content-box__small-text

相关链接

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

免费试用