升级您的在线结账

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

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

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

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

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

步骤:

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

备注:某些支付服务提供商对测试结账设置了最低价格。对于 Shopify Payments,这一价格为 0.50 加拿大元或 0.35 美元。其他支付服务提供商可能具有不同阈值。

如果您收到错误消息,表明目前无法处理付款,请在几分钟后重试,请尝试提高测试订单的价格,或使用免费商品完成测试结账。

如果您在这些测试期间发现任何错误,则表示您的一些结账自定义项可能与新版本中的其他改进存在冲突。如果是这种情况,则您需要更改您的 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 结账页面包含以下更改和新功能:

订阅

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

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

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

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

增销

Shopify 应用商店中提供了新的售后增销应用。这些应用会直接在 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_fieldaria-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 匹配
  • 快速结账网格已改进为使用 ulli 元素,而不是 div

  • 已更新订单摘要,内容如下: - 更加明确了促销价和常规价格

    • 已将范围更改为 dl 标签
    • 已将 del 标签更改为 dtdd 标签。
  • 已更新付款详细信息方法,内容如下: - 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 进行销售了吗?

免费试用