個人化購物車和支付體驗

個人化購物車過渡

透過設定班次來調整購物車啟動和結束的方式 光滑度 和 期間 對於動畫。您可以在預覽模式下嘗試效果。

設計不同的購物車狀態

現在您已經確定了購物車的顯示方式，您可以在其 3 種模式中對各種元素進行樣式化：

1. 預設（購物車概覽）
2. 空（當購物車有零件商品時）
3. 錯誤（如果結帳受阻）。

您可以在這些模式之間切換 購物車容器設置.

發現更多： 購物車因素

依不同狀態客製化購物車

為了 預設 狀態，您可以指定要在購物車概覽中顯示的商品數量。

為了 錯誤 狀態，調整付款失敗期間可能出現的錯誤通知。選擇 錯誤訊息 文字區塊來訪問 錯誤訊息設定。點選 鉛筆圖示 將滑鼠懸停在設定中的錯誤訊息旁邊顯示以進行修改。

你可以 恢復預設 中的錯誤訊息 編輯錯誤訊息.

購物車的樣式和定製完成後，將其關閉，就像您在 元素設定面板 > 啟動購物車.

設計購物車容器

打開購物車後，頁面上的購物車會被半透明的覆蓋層包圍。這被稱為“購物車包裝器”。

若要變更包裝器的背景顏色：

1. 選擇 購物車包裝紙 （您可以使用 航海家 為了準確起見）
2. 改變背景色調 風格面板
3. 選擇純色並引入一些透明度以表明它是當前頁面上的彈出模式

您可以隨時透過從購物車包裝器的背景顏色特性中消除套用的樣式來恢復為預設樣式。

理解支付流

從產品頁面或產品清單中，買家可以 加入購物車 或直接前往結帳 現在買 選擇。

評論：由於 PayPal 結帳遵循獨特的流程， 現在買 僅對啟用 Stripe 的商店有效。

發現更多：添加到購物車並立即購買 

付款程序

當顧客將商品加入購物車後，他們可以根據您的商店設定透過 3 種方法完成付款：

1. 繼續前往 支付 頁面以完成使用信用卡的付款。在付款頁面上，他們還可以應用促銷代碼和/或提供有關購買的其他詳細資訊。 提醒：這個選擇需要Stripe.
2. 利用 網上支付 （例如 Apple Pay 或 Google Pay），可跳過原始支付方式進行快速結帳 結帳頁面. 提醒：此功能需要 Stripe 和 啟動線上付款選項.
3. 選擇 貝寶結帳這將打開一個新的彈出窗口，買家可以在其中授權 PayPal。然後買家將被引導至 結帳（貝寶） 頁面來完成購買、兌換優惠券並提供更多詳細資訊。如果您啟動了 PayPal，請確保您已自訂該頁面。

提醒: 您也可以插入 網上支付 和 貝寶按鈕 在預設的頂部 查看 頁面，以便在客戶離開購物車後為他們提供更多選擇。

修改結帳頁面

線上客戶將商品加入購物車並準備下訂單後，他們將打開購物車，選擇繼續結帳，然後登陸結帳頁面 (/checkout)。

‍

這是您可以調整的初始電子商務實用程式頁面。它位於 頁面面板 並帶有預設元素。您也可以選擇修改所有電子商務頁面，其中包括：

• 查看
• 結帳 (PayPal) – 只有在啟用 PayPal 時才需要客製化
• 訂單確認

您可以根據需要重新排列和設計組件和元素來個性化結帳頁面。請記住，刪除或隱藏帶有必填欄位的組件可能會破壞結帳表格。您可以隨時添加回來 訂購商品, 訂單匯總， 和 網上支付 來自 新增面板 於 結帳頁面.

結帳表格

包含結帳頁面表單的所有範本元素。如果您希望恢復為預設結帳頁面模板，則可以包含它。

訂購商品

顯示購物車中的所有商品和變體。買家可以在完成結帳流程之前確認這些是他們想要購買的商品。

訂單匯總

顯示購物車的小計、任何稅費和運費以及訂單的總費用。這有助於買家了解他們支付的金額的細目。

網上支付

讓您的客戶能夠繞過標準結帳流程，並使用他們的數位錢包（例如 Apple Pay 或 Google Pay）快速完成從您商店的購買。

了解更多關於 啟動線上支付.

附加資訊

顯示在結帳期間收集的任何附加資訊欄位中輸入的資料。提醒：確保更新訂單表單和結帳確認，因為它們具有單獨的標籤和字段，不會自動同步。

設計建議：您也可以在此頁面上引入導覽列和頁腳，包括引導使用者返回主商店頁面的「繼續購物」按鈕。

個人化 PayPal 結帳

如果您希望使用 PayPal，則必須設計一個獨特的結帳 (PayPal) 範本頁面。 

如果您無意在您的網站上加入 PayPal，則無需關注此頁面。如果不啟用 PayPal 為付款提供者，則無法存取 PayPal。

在現場使用 PayPal 時，使用 PayPal 的購買順序將如下所示：

1. 買家選擇 貝寶結帳 來自 大車 或（標準） 結帳頁面
2. PayPal支付模式出現，引導買家登入或輸入付款詳情和送貨地址
3. 買家返回 結帳（PayPal）頁面 PayPal 驗證後
4. 買家選擇送貨方式 結帳（PayPal）頁面 （如適用）
5. 買家完成購買
6. 買家登陸 訂單確認頁面 購買結束後

設計結帳 (PayPal) 頁面

這 結帳（PayPal）頁面 啟動電子商務時自動產生。

提醒：對於在包含 PayPal 之前啟用電子商務的項目，在新增 PayPal 按鈕後會自動產生該頁面 大車 或者 結帳頁面。如果您找不到此頁面，請嘗試將 PayPal 按鈕新增至購物車。

類似 結帳頁面，Paypal頁麵包含預設元素，您可以透過以下方式補充和替換： 新增面板. 

‍

上的模組 支付網關 (PayPal) 頁面 功能與那些相同 支付頁面，但這兩個部分並不互相關聯。您必須手動確保它們具有可比較的佈局和外觀。

如果您想僱用 折扣 或聚集 額外細節 在結帳時，請記住將這些組件合併到兩個 支付 和 支付網關 (PayPal) 頁面.

PayPal Checkout 頁面與 Checkout 的區別特徵

• 由於購物者透過 PayPal 付款，因此沒有用於輸入付款詳細資訊的欄位。
• 購物者在此頁面上期望獲得的唯一資訊是首選運輸方式。
• 如果訂單僅包含不需要運送的商品，則無需選擇運送方式。在這種情況下，該頁面的操作更像是完成購買之前的最終確認。

筆記：PayPal 不會將購物者的完整帳單地址傳輸至 Webflow — 在已發佈的網站上， 付款詳情部分 僅顯示姓名和帳單地址所在國家。

個人化支付頁面錯誤通知

如果結帳時發生錯誤，購物者將遇到各種錯誤訊息。您可以透過選擇來預覽和個人化這些訊息 付款方式 組件並切換到 錯誤 配置面板中的狀態。

接下來，選擇 錯誤訊息 組件來訪問 錯誤訊息配置。瀏覽設定以查看畫布上的每個訊息。若要編輯訊息，請將滑鼠懸停在設定中的訊息上，直到出現鉛筆圖標，表示您可以對其進行編輯。

筆記：如果您的商店使用 PayPal，您需要在 支付網關 (PayPal) 頁面 也。

瞭解訂單確認頁面和相關元素

提交訂單後，線上買家將被引導至訂單確認頁面。這是另一個電子商務實用程序 頁面面板 > 電子商務頁面部分.

這 訂單確認頁面 具有您可以完全修改和設計的預設佈局。不像 支付頁面，此頁面上的所有元件都可以從 新增面板。您可以拖曳訂單確認元素將整個範本與所有部分合併。

您可以將以下元素單獨整合到訂單確認容器中： 

• 訂單確認
• 訂購商品
• 客戶資訊
• 運輸方式
• 付款詳情
• 訂單匯總
• 額外資訊
• 下載（測試版）

訂單確認

包含訂單確認頁面範本的所有元素。如果您想恢復預設頁面模板，請新增它。

訂購商品

顯示購物車中的所有產品和變體。買家可以在完成結帳流程之前確認這些是他們打算購買的商品。

客戶資訊

揭示了 電子郵件地址 和 送貨細節 由客戶在結帳表格中輸入。

運輸方式

表示 運輸方式 結帳時選擇的。

付款詳情

提出了 付款詳情 和 帳單地址 由顧客在結帳時提供。

筆記：對於 PayPal 交易，僅顯示姓名和帳單地址國家/地區，因為 PayPal 不會向 Webflow 提供完整的帳單地址。

訂單匯總

顯示 小計 購物車的任何 適用稅費 和 運送費，以及 全部的 訂單金額。這使購物者能夠了解付款明細。

額外資訊

幫助收集客戶訊息，例如電話號碼、禮品訊息和客製化說明。

下載（測試版）

列出訂單中的所有可下載檔案。了解有關數位下載的更多資訊。

設計提示：您可以選擇向此頁面附加導覽列和頁尾。此外，考慮新增一個按鈕以將使用者重新導向到主商店頁面或您的主頁。

掌握最小和最大交易金額的概念

支付處理商強制執行交易限制。如果購物者的訂單金額低於最低金額或超過最高金額，他們將在結帳時遇到錯誤訊息。 

這些交易門檻根據支付處理器和商店貨幣的不同而有所不同：

• 儘管 PayPal 用戶可能有交易限制，但 PayPal 規定最小值為 0.01。 查看 PayPal 的 documentation 以了解更多見解
• Stripe 的限制是基於商店的貨幣。例如，以美元計算，最小值為 $0.50。 請參閱 Stripe 的 documentation.

當訂單低於最低閾值時，購物者在結帳時會遇到“未達到最低訂單”錯誤，您可以對此進行調整。了解有關自訂錯誤訊息的更多資訊。

了解免費訂單

有時，由於贈品或 100% 折扣，購物者可能會下達零訂單。在這種情況下，Webflow 將在結帳後處理訂單，而不將其傳輸到支付處理器。

關於免費訂單的要點：

免費訂單將在您的 Webflow 訂單管理器中可見，但在您的 Stripe 或 PayPal 儀表板中不可見，因為這些訂單不會轉發到付款處理器。

由於PayPal 結帳在計算運費之前啟動，因此當運費小計為0 時，啟動PayPal 結帳是不可行的。 。 

我們建議僅使用 PayPal 的商店提供免費送貨或僅對不需要送貨的商品使用免費訂單。在這種情況下，購物者將使用本地 支付頁面 而不是 支付網關 (PayPal) 頁面.