電子商務購物車頁面設計的 8 個最佳示例

您的購物車頁面設計可以促成或破壞轉化。 數據顯示，購物車的可用性直接影響轉化率。

在本文中，我們將向您展示頂級在線商店品牌如何戰略性地設計其購物車頁面。 但首先，讓我們介紹一下有關購物車頁面的基礎知識。

您的電子商務購物車允許訪問者購買產品或服務。 客戶還可以查看您的產品詳細信息、輸入優惠券代碼並選擇他們的付款方式以進行結帳。

儘管購物車對在線商店的利潤非常重要，但我們發現許多購物車頁面設計不佳。

以下是令人印象深刻的電子商務購物車的真實示例，可幫助您改造商店。 目標始終是客戶的體驗。

我們來看一下！

你想看更多的例子嗎？ 下載我們的免費滑動文件並從 26 個購物車示例中獲得靈感。

目錄

8個電子商務購物車設計示例

您需要了解的電子商務購物車最佳實踐

如何減少購物車放棄並增加銷售額

令人高興的是，我們對流行電子商務網站的研究並不全是壞消息。 我們發現了幾家具有創新購物車頁面設計的在線商店，這些設計推動了轉化。 將這些視為模板並根據您的品牌風格更改規格。

這裡有八個鼓舞人心的購物車設計。

1. B&H
2. 蒂莉的
3. 全鳥
4. 永遠21
5. 耐克
6. 絲芙蘭
7. 稀有美女
8. 露露檸檬

乍一看，B&H 的“添加到購物車”屏幕與任何其他銷售電子產品的網站相似。 但是，當您單擊“添加到購物車”按鈕時，客戶可以在其簡單的設計中執行數量驚人的操作。

例如，該頁面顯示與所選產品完美搭配的配件——讓客戶有理由將更多商品添加到他們的購物車中。

此外，該頁面還提示客戶考慮其產品的保修。

單擊購物車圖標會將客戶重定向到更標準的頁面。 它提醒他們那些相關的產品推薦。

這讓他們有另一個機會將這些物品添加到他們的購物車中，以防他們忘記了這些物品或改變了主意。

Tilly 的在線服裝店簡單易用。 該頁面僅顯示最必要的信息以及大量引人注目的圖片以吸引訪問者。

他們巧妙的“加入購物車”設計改善了客戶的購物體驗。

當客戶將產品放入購物車時，“迷你購物車”會在右側展開。 它讓用戶一目了然地跟踪他們的項目。

當他們完成時，它還有一個“結帳”按鈕。 因此客戶可以毫不費力地直接結賬。 這個“加入購物車”示例展示了一種鼓勵衝動購買的好方法。

側消息是從屏幕左側或右側滑動的網站元素。 當您需要顯示需要大量空間的重要信息時，您可以使用它。

Allbird 的購物車側面板設計與網站的整體主題融為一體。 它顯示了客戶需要知道的一切。

這是彈出的消息：“恭喜！ 您可以獲得免費的標準送貨服務。” 這是從一開始就反對放棄購物車的好方法。 他們告訴客戶運費不會意外變化（這是潛在客戶留下購物車的最大原因之一）。

在該消息下方，購物車頁面顯示添加的產品及其價格。 它還統計小計並推薦其他類似項目。

Forever 21 的“添加到購物車”的免費送貨標準是透明的。 但是，他們要求購物者花費一定的金額才能獲得免費送貨的資格。 您可以看到，這輛購物車距離免費送貨的資格僅 10.01 美元。

他們還有一個大的優惠券代碼字段，可以輕鬆添加折扣。

即使在客戶進入結賬頁面之前，這兩個省錢功能也會培養一種積極的情緒。 結果：更高的銷售額。

當購物者點擊耐克網站上的“加入購物車”按鈕時，他們會在屏幕右上角收到一個小通知。

迷你購物車窗口中有兩個選項：查看您的包或直接結帳。

這是一個鼓勵客戶立即購買或繼續瀏覽網站的選擇。

耐克還發布了諸如“僅剩幾件，立即訂購”之類的信息，以指導購物者完成結賬流程。 以這種方式吸引顧客的注意力可以帶來更多的銷售，因為沒有人願意失去一雙好鞋。 這被稱為 FOMO 或害怕錯過策略。

耐克購物車頁面的另一個亮點是預計發貨日期。 它讓購物者有機會在特定日期想像自己穿著新鞋。 諸如此類的細節很重要！

Sephora 的購物車通知系統結合了購物車頁面設計功能的大量最佳實踐。

它們顯示一個預總金額。 它還向客戶展示了他們需要花費多少才能獲得免費送貨的資格。 他們還為每位客戶提供個性化的產品推薦。

Sephora 通過在購物車通知頁面上提供易於訪問的鏈接提供免費樣品（以及獎勵和促銷），超越了這些其他網站。

客戶最多可以選擇兩個免費樣品添加到他們的購物車。 這是為客戶提供附加值的絕佳解決方案，並鼓勵他們嘗試新產品。

Rare Beauty 是另一個在網上佔有重要地位的化妝品牌。 像絲芙蘭一樣，他們為客戶提供與訂單相同的免費商品。

它們還顯示需要向訂單添加多少資金。 然後購物者知道他們何時有資格獲得免費送貨。

Rare Beauty 非常規地使用大 X，因此客戶可以輕鬆地從購物車中取出商品。 這使得編輯他們的訂單變得容易。

您可以了解他們的客戶為什麼喜歡在線購買——這是一種快速、輕鬆的結賬方式。

在 Lululemon 的購物車中，您首先註意到的是頂部的大信息：“您的品味很棒。”

這樣的消息讓用戶想要點擊購物車圖標！

讚美您的客戶是感謝他們在購物車中添加商品的好方法。 並表現出善意。 這對 Lululemon 尤其有效，因為它們具有積極和肯定的品牌形象。

Lululemon 的結賬按鈕很大且顏色鮮豔。 它吸引了用戶的眼球，他們推薦互補的產品，以鼓勵客戶“繼續購物”。

創建在線購物車頁面時：從多個不同角度考慮挑戰。

出色的購物車設計需要顯示客戶的訂單摘要。 但這也應該讓他們感到舒服，要么繼續購物，要么立即結賬。

您可以像上面的示例一樣獲得出色的結果，並通過我們的最佳實踐提高您的轉化率。

以下是電子商務購物車頁面設計的基礎知識摘要：

• 向用戶顯示您支持的購物車的總成本、運輸詳情和付款方式。
• 推薦更多與客戶購物車中已有產品相匹配的產品。
• 網站用戶應該能夠毫不費力地了解如何定制他們的購買（通過選擇顏色、數量、尺寸等）。
• 通過在購物車中使用大型、高質量的產品圖像來減少混淆。
• 清楚了解運費將花費多少或客戶必須花費多少才能獲得免費送貨。
• 突出顯示您的網站接受哪些支付網關。
• 顯示證明您的付款流程安全可靠的符號。
• 添加促銷代碼框以承諾真正的價值。

您需要設計從產品瀏覽到將商品添加到購物車，再到實際結賬的無縫過渡。 這是轉化率優化的一個關鍵方面。

即使有最好的購物車設計，也不能保證顧客會完成他們的結賬過程。

研究人員發現，2019 年的平均購物車放棄率達到了驚人的 77.13% 。

正在改進其購物車頁面的企業在其電子商務報告中發現，彈出窗口往往是鼓勵訪問者結賬的最有效方式之一。

例如，雅芳在採用 OptiMonk 的購物車放棄預防系統後，其購物車放棄率下降了 16.5% 。 它檢測商店訪客何時可能放棄他們的購物車，並向他們發送一個彈出窗口，鼓勵購物者完成購買。

讓我們從最好的彈出示例開始。

購物車放棄彈出窗口的 3 個示例

1. 推廣不可抗拒的報價

您可以使用彈出窗口在有限的時間內提供免費送貨或其他店內折扣。

由於購物者對其訂單的運費非常敏感，因此這是減少購物車放棄的最佳方法之一。

查看 OptiMonk 的彈出模板庫，找到一個非常適合您的商店設計和結帳頁面設計的模板。

2.通過限時優惠增加緊迫感

使用時間壓力感可以說服網站訪問者結賬。 讓購物者知道他們對產品可用性的看法。 這增加了他們購買決定的緊迫感。

例如，SwissWatchExpo 是一家銷售二手豪華手錶的商店。 他們使用彈出窗口明確表示手錶只會為他們保留 15 分鐘。 這種緊迫感導致轉化率提高了 25% 。

3.推薦相關產品重新獲得關注

如果用戶在沒有結賬的情況下離開，很可能他們只是在瀏覽您的商店時將商品保存為可能的購買選項。

您可以通過顯示替代產品的彈出窗口來吸引他們的注意力——類似於他們在購物車中的產品。 您可以通過讓他們快速查看商店中的更多選項來提高轉化率。