Cart drawer 在加入商品後從側邊或底部開啟，讓顧客確認品項、金額並繼續購物。它適合目錄瀏覽與快速回饋，但不是所有商店都比完整 cart page 好。商品需要大量設定、B2B 採購、禮品資訊或複雜配送時，小抽屜可能塞不下必要內容。
先用顧客任務決定容器，再設計動畫和加購。
適合使用 drawer 的情境
商品選擇相對簡單、顧客常一次瀏覽多件、加入後希望留在原位置，drawer 可以降低來回跳頁。它應快速確認圖片、variant、數量、價格、折扣摘要和下一步，並提供「繼續購物」與「前往結帳」。
Drawer 載入不能依賴慢速推薦才顯示。核心 cart 先可用，推薦與運費進度可延後載入。
完整 cart page 更適合的情境
大量 line items、組合關係、禮品訊息、配送選擇、報價、公司 PO 或可編輯屬性，需要較大空間與可分享 URL。Cart page 也較容易呈現政策、錯誤與詳細 cost breakdown。
可以 drawer 作快速確認，再保留「查看完整購物車」。不要讓 drawer 成為唯一入口，導致複雜顧客無法管理品項。
直接 checkout 要非常克制
Buy now 或加入後立即前往 checkout，適合單一明確商品與高意圖情境。它會縮短瀏覽，也可能阻止比較、加購和確認 variant。不能用自動跳轉迫使所有顧客離開商品頁。
若提供 accelerated checkout，仍顯示價格、配送與取消路徑，並測登入、市場和付款可用性。
Drawer 必須處理完整狀態
包含空 cart、載入、加入成功、數量更新、刪除、缺貨、限購、價格改變、折扣失效、API timeout 和重新嘗試。更新時鎖定相關控制，不讓快速點擊產生重複 mutation；完成後以 server cart 為準。
關閉 drawer 後焦點回到觸發按鈕。開啟時 focus 留在 dialog，背景不可操作，Escape 和明確 close 都能關閉。狀態變更使用 live region 適度宣布。
手機版避免多層覆蓋
Drawer、cookie banner、chat 和 sticky add-to-cart 同時出現會壓縮 viewport。手機可用 full-height sheet，保留安全區、可見標題與結帳按鈕。軟體鍵盤開啟優惠碼或備註時不能遮住 submit 和 error。
詳細真機案例可納入 Shopify 手機版驗收。
加購不應搶走主要任務
推薦放在品項確認之後，數量有限並說明互補關係。加入推薦後立即更新 cart 和總額；商品不適用或缺貨時移除。不要用預選加購、難關閉 popup 或多層 drawer 阻擋 checkout。
指標要涵蓋錯誤與交易
追蹤 add-to-cart success、drawer open、quantity error、remove、cart view、checkout 和 purchase，依 device、商品與新舊客分群。Drawer checkout click 提升，若 purchase、毛利或客服沒有改善，不能單獨判勝。
技術實作以伺服器購物車為準
加入、改數量與刪除都可能在慢網路下重疊。前端可以先提供忙碌狀態，最終價格、折扣、庫存與 line key 要以 Cart API 回傳內容重新渲染。不要只在畫面上把數字加一，卻讓伺服器仍保留舊數量。Bundle、selling plan、line item property 與多幣別也要放進測試矩陣。
同一商品從商品頁、快速瀏覽與推薦區加入時，事件命名與 cart 結果應一致。API 失敗要保留原品項、顯示可行動的錯誤並允許重試；不可清空整個 drawer 或假裝加入成功。第三方折扣與贈品 App 若會重寫 cart，需測 mutation 順序和失效時的退路。
發布前跑完整任務清單
用新訪客、回訪者、登入會員與不同 market 測單品、多品、缺貨、限購、折扣、免運門檻和 accelerated checkout。行動版至少涵蓋 Safari 與 Chrome，並以鍵盤和讀屏完成開啟、修改、刪除、關閉與前往結帳。
發布採小比例或單一市場開始，監看 cart error、checkout start、purchase 和前端例外。若 error 超過基準，先回退 drawer 變更，不要等待轉換率累積。這份驗收清單也能幫團隊分辨設計選擇與實作故障。
先用 prototype 和真機任務測試，再小範圍發布。比較 drawer、cart page 與原流程時保持運費、促銷和流量一致，並用 商品頁轉換診斷排除上游問題。