升級線上結帳作業

您可以自訂線上結帳以延伸品牌、變更訊息、提供優惠,並改善客戶體驗。若要確保自訂內容與 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 變數
  • 選擇加入 Shop
  • 編輯訂單
  • 提升無障礙網頁功能
  • 移除邊框
  • 顯示付款方式
  • 移除預留位置字串
  • 顯示已儲存的顧客地址
  • 3D 安全驗證機制
  • 其他 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 傳回套用至商品項目的所有折扣總金額。若您並未使用 Script Editor 應用程式,此屬性的值為零。

選擇加入 Shop

系統已在訂單狀態頁面新增專用的電話號碼欄位,並以文字提示顧客輸入手機號碼以接收運送狀態的最新資訊。文字中也包含Shop 應用程式的連結。

編輯訂單

開放 Shopify Plus 商家編輯訂單時,系統將同時允許商家使用 Shopify 結帳功能擷取已編輯訂單的其他未付款項。為了確保系統如同預期運作,結帳頁面有幾項變更:

  • 顧客無法變更他們的聯絡資訊、運送地址或運送方式。
  • 新增額外商品項目以標示訂單的總金額和已付金額。
  • 完成購買程序」按鈕變更為「立即付款」。「總計」變更為「付款金額」。
  • 顧客不會在結帳流程看到顯示在頁面路徑的資訊,而是看見涵蓋訂單其他詳細資訊的可收合橫幅: - 額外付款金額。
    • 從訂單新增或移除的產品。
    • 訂單編號。

需要額外款項時在結帳頁面顯示的圖片

只有在有人編輯訂單,並且顧客需要額外付款時,變更才會生效。

若您的結帳自訂項目使用頁面路徑來識別目前結帳流程的步驟,您應改用 Shopify.Checkout.step 物件。請參閱「步驟識別」以瞭解更多資訊。

提升無障礙網頁功能

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

  • 目前頁面路徑在所有結帳步驟中都包含在 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. 使用新地址的選項。

下拉式選單顯示最多 5 個地址。

3D 安全驗證機制

3D 安全驗證技術提供額外的安全防護,顧客需要在完成購買程序之前達成驗證,並加強諸如 Visa、Mastercard 身分驗證或美國運通 SafeKey 等服務。結帳期間,部分顧客可能會需要重新導向至其他銀行的入口網站進行額外驗證。若要深入瞭解,請參閱瞭解 PSD2 及強大客戶驗證

位於歐洲經濟區 (EEA) 及英國地區的商家可以使用 Cardinal 提供 3D 安全結帳功能。請參閱 Cardinal 3D 安全驗證以瞭解更多資訊。

結帳作業是否需要額外驗證將由銀行判斷,無法透過 Shopify 管理員介面控制。您無須採取任何動作即可啟用這項變更。

其他 Google Analytics (分析) JavaScript 的欄位變更

在 Shopify 管理員介面上「線上商店」>「偏好設定」中的「其他 Google Analytics (分析) JavaScript」區段輸入的 JavaScript 將作為不可見的 iFrame 新增至結帳作業。這不會影響用於分析的 JavaScript,但會中斷系統對結帳作業進行的其他變更。若您因為其他理由要新增自訂 JavaScript 至您的結帳作業,請直接將其新增至 checkout.liquid 檔案。

CSS 變更

heading-*text-container CSS 類別已新增至結帳流程的所有步驟。

錯誤訊息

系統已新增錯誤橫幅,告知顧客無法使用所選的「快速結帳」付款方式。這條橫幅會顯示在結帳流程的「聯絡資訊」步驟的頂端。

通知顧客先前的運費費率不再有效的錯誤橫幅,並已移到別處。目前此橫幅會顯示可用運送選項的正上方。

相關連結

準備好開始透過 Shopify 銷售商品了嗎?

免費試用