升級線上結帳作業

此頁面列印時間為 May 20, 2024。如須最新版本，請至 https://help.shopify.com/zh-TW/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 管理介面中安裝有效的售後應用程式後，顧客就會收到後售後優惠。

在結帳時給予小費

可以使用小費選項，讓顧客能在線上訂單中加入小費，或以募集捐款取代小費。若已啟用小費功能，「加入小費」區段會顯示在結帳頁面的付款方式步驟中。在「加入小費」區段中，除了一個可輸入自訂小費金額的欄位外，亦有三個預先選取的小費選項。

深入瞭解有關提供小費選項的內容。

  • 若已啟用小費功能，「加入小費」區段會顯示在結帳頁面的付款方式步驟中。

取貨和當地配送

到店取貨和配送是新的配送方式，讓顧客能在當地收到其訂單。在啟用這些配送方式後，顧客便可在結帳頁面的運送步驟中選取到店取貨或配送。

瞭解如何啟用到店取貨和當地配送。

  • 啟用當地配送服務並經顧客選取後，系統便會顯視當地配送的其他欄位。
  • 若已啟用到店取貨，則結帳頁面中的「資訊」頁面將會向顧客顯示配送方式區段。若沒有適用的運費，則僅會顯示取貨資訊。

  • 配送方式以不同的分頁來顯示。

    • 選取「運送」會提示顧客輸入運送資訊，並在點擊「繼續前往運送」後顯示運送方式。
    • 選取「取貨」會顯示取貨地點的清單。顧客在點擊選項按鈕選取所需的取貨地點後，再點擊「繼續前往付款」。

  • 若顧客在結帳頁面的運送步驟中選取「取貨」，則系統將不會收集運送資訊。顧客必須在結帳頁面的付款步驟中輸入帳單資訊。

  • 當地配送指示會顯示在訂單狀態頁面上。可以前往 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"。
  • 如果顧客已到達「感謝」步驟，且具有 QR 套裝，則系統會新增 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

提升無障礙網頁功能

為確保符合無障礙網頁標準，結帳流程有幾項變更。讓使用螢幕閱讀器等輔助工具的顧客能以更輕鬆的方式熟悉結帳流程。

  • 為了執行以下程式碼，在 ul 新增 role="list"：

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

  • 已在 telephone_field 的 aria-labelledby 移除工具提示。

  • 在 Shop 中，輸入標籤已將其參照變更為電話。

  • 等待稅金時，已新增 h3 標題。

  • 重新導向時，已新增 h3 標題。

  • 載入運送方式時，p 標籤已變更為 h3 標籤。

  • 自動完成的參照現為 phone，而非 mobile tel。

  • 藉由新增 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。

  • 更新以下項目來更新訂單摘要：

    • 改善售價和一般價格的分別
    • 將 span 變更為 dl 標籤
    • 將 dt 標籤變更為 dd 和 del 標籤。

  • 更新以下付款詳細資訊的付款方式：

    • 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 銷售商品了嗎？

免費試用