官網『Cart Drawer 滑出式購物車』設計完整攻略：中小企業如何用一個從側邊滑出的小視窗，把訪客的『加了就走』變成『加了再逛』
客戶點了加入購物車就跳頁、順手就關掉分頁走人？Cart Drawer 滑出式購物車讓「加了繼續逛」變成自然的事——從 5 個關鍵元素、5 個常見錯誤到進階加碼技巧完整攻略。
你是不是也遇過這種情況：客戶在你的官網逛了半天，好不容易點了「加入購物車」，畫面卻整個跳到購物車頁面，那個當下他原本想繼續逛的心情就斷了、順便就把整個瀏覽器分頁關掉。
這個看起來不起眼的小體驗，其實正是很多中小企業電商漏單最痛的破口。而現在幾乎所有做得好的電商，都已經改用「Cart Drawer 滑出式購物車」——不跳頁、不打斷、從畫面右側輕輕滑出來一個側欄，讓客戶「加了就繼續逛」變成一件自然的事。
Photo by Clay Banks on Unsplash
為什麼「跳頁到購物車」正在讓你漏單？
先講一件反直覺的事：多數中小企業的官網購物車頁面，其實根本不是「成交頁」，而是「離開頁」。原因很單純——當客戶被強制帶到一個獨立的購物車頁面時，他的購物節奏被打斷了，會出現三種常見反應：
第一種，他想確認一下車內品項對不對、卻順手就按了「結帳」，結果因為金額還沒湊到免運、或者他還想再看兩件商品，結帳到一半又跳回去，結果整段流程斷斷續續。第二種，他看到購物車頁面才想起「其實只是先加著看」，一個猶豫就關掉分頁走人。第三種，最慘：他點了加入購物車、頁面重整、他忘了自己剛剛在看哪一個商品，索性也不看了。
Cart Drawer 之所以現在變成主流，就是因為它把「加入購物車」跟「繼續逛」這兩件事解耦。客戶點下加入之後，右邊滑出一個側欄，畫面主體還在，他可以確認品項、按 X 收起來、再繼續往下滑。這個「不打斷」的體驗，把加購率、平均訂單金額（AOV）、以及最終結帳的完成率都拉起來。
一個好的 Cart Drawer 應該有哪些關鍵元素？
Cart Drawer 看起來簡單，其實有很多細節會決定它是「加分」還是「扣分」。以下 5 個是最不能省的：
1. 明確的商品縮圖、名稱、規格、數量與小計。客戶滑出來第一眼要能一秒認出「我剛剛加的是這件對吧」。圖片要清楚（建議 60-80px 見方）、規格（顏色、尺寸）要標示、數量可以直接 +/- 調整，不要逼客戶跳到別的頁面才能改。
2. 即時的價格計算與免運提示。這一塊最容易被忽略。很多網站的 Drawer 只顯示小計，卻沒有把「還差 XXX 元就免運」寫出來——這是把免運進度條放在 Cart Drawer 裡的絕佳位置，因為此刻客戶最有加購衝動。
3. 一個主要 CTA、一個次要選項。最下面通常會有兩顆按鈕：「前往結帳」（主色、大顆、明顯）跟「查看購物車」（次要色或文字連結）。主要 CTA 就是要導客戶結帳，次要選項留給那些習慣先看完整頁面的人。不要放三顆以上按鈕，會讓客戶陷入選擇困難。
4. 可以直接刪除商品。每個品項旁邊要有一個小小的 X 或垃圾桶圖示，讓客戶可以在不離開 Drawer 的情況下移除品項。不要讓他為了刪一件商品跳到購物車頁面、然後就再也沒回來過。
5. 「加入成功」的視覺回饋。當客戶按下「加入購物車」的那一瞬間，Drawer 要有一個小小的滑出動畫（建議 200-300ms），或者在剛加入的品項旁顯示一個綠色勾勾。這個微互動非常重要——它讓客戶「相信」東西真的加進去了，不會半信半疑再點一次變成加了兩件。
Photo by Hal Gatewood on Unsplash
Cart Drawer 常見的 5 個致命錯誤
看過不少中小企業的官網，Cart Drawer 有做，但做得讓客戶反感，反而把加購率壓低。以下這幾個是最常見的地雷：
錯誤一：Drawer 覆蓋整個畫面，等於變成第二個購物車頁。正確做法是側欄寬度控制在 380-420px 之間（桌機版），讓客戶還能看到後面主頁面的商品，維持「繼續逛」的心理連結。
錯誤二：加入之後自動跳到結帳頁。這是最粗暴的錯誤設計，等於直接殺掉客戶再看兩件的可能性。把「跳結帳」的權力還給客戶，讓他自己按。
錯誤三：關閉 Drawer 的方式不直覺。右上角的 X 要夠大、要在視覺熱區、點外面空白處也要能關。有些網站甚至只能點很小的 X 才能關，行動版更是災難。
錯誤四：載入速度太慢。Drawer 滑出來如果超過 500ms 才顯示內容，客戶會以為當機。所有商品資料要在點下加入的當下就備妥，不要用「打開才去 API 撈」的作法。
錯誤五：行動版沒有針對觸控優化。手機上 Drawer 建議從底部往上滑（Bottom Sheet 型）比從右側滑出更符合大拇指使用習慣，且要支援下滑手勢關閉。這一點很多網站直接把桌機版縮小，結果客戶連 X 都點不到。
Cart Drawer 裡可以做的「進階加碼」
Cart Drawer 的黃金功能是「客戶已經拿定主意要買了」，這是全站最能推加購的時機。除了基本功能，還可以加碼：
免運進度條：如購物車小計 800 元、免運門檻 1000 元，就顯示「再加 200 元免運，看看還有什麼要一起帶？」下面直接放 2-3 個推薦商品的橫向卡片，一鍵加入。
買一送一 / 滿額贈提示：如果客戶符合條件，Drawer 內直接跳「恭喜！你已符合滿 1500 送隨行杯資格」，讓他「感覺到」自己賺到，會更捨不得刪東西。
「有客戶正在看這個商品」的社會證明：適度使用，過度就變垃圾。像是「這件今天有 12 個人也加進購物車」這種資訊，可以稍微推一把猶豫的客戶。
優惠碼欄位：如果你有做行銷檔期，把優惠碼輸入框放在 Drawer 內、而不是等到結帳頁才給，會讓客戶當下就感受到折扣、成交意願更高。
WordPress、Shopify 到自架站怎麼實作？
如果你用的是 WooCommerce（WordPress 電商外掛），主流佈景主題如 Astra、Flatsome、Woodmart 都內建 Cart Drawer 功能，只要開啟即可。也可以用 CartFlows、Fluent Cart、或專用外掛如 XT WooCommerce Side Cart 來實作，開通後在後台就能自訂側欄樣式、免運進度條、推薦商品。
用 Shopify 的話更簡單，多數新版佈景主題（Dawn、Sense、Refresh）預設就是滑出式購物車，只要在 Theme Customizer 裡確認「Cart type = Drawer」就好。要加免運進度條或推薦商品可以裝 Slide Cart Upsell 這類 App。
如果是純客製化開發（例如用 Nuxt / Next.js 寫的官網），Cart Drawer 就是一個從 fixed right / bottom 定位的元件，配合狀態管理（Pinia、Zustand）處理購物車資料、CSS transform + transition 做滑出動畫。技術實作不難，重點是設計上的細節要落實到位。
給中小企業老闆的行動建議
Cart Drawer 不是一個大改造，但是一個 CP 值超高的優化。如果你的官網目前還是「加入購物車就跳頁」的舊模式，強烈建議在下一次改版或功能調整時直接改成 Drawer 型。
三個立刻可以做的事：第一，打開自己的官網、假裝當一次客戶下單，感受一下那個「跳頁的斷點」有多明顯。第二，去看 3-5 個你覺得做得好的電商網站（無印良品、Uniqlo、蝦皮、樂天、DR.WU 台灣官網等），觀察他們的 Cart Drawer 是怎麼設計的。第三，把上面 5 個關鍵元素、5 個常見錯誤列成 checklist，交給工程師或外包廠商當作驗收標準。
官網的每一個看似小小的體驗細節，累積起來就是轉換率的差距。Cart Drawer 也許只是幾百像素寬的一塊側欄，但它決定了客戶「加了就走」還是「加了再逛」——這中間的差距，往往就是一家店有沒有辦法把流量真的變成營收的關鍵。