官網『商品數量選擇器』(Quantity Selector) 設計完整攻略：中小企業如何用一個 +/- 小按鈕，把訪客的『買一個』變成『買三個』
商品頁那個 +/- 小按鈕看起來不起眼，卻直接決定客單價。五個設計細節與行動版三個坑，一次講清楚。
做電商官網很多老闆都會忽略一個地方——「數量選擇器」。就是商品頁上那個讓客戶選擇「要買幾個」的小小 +/- 按鈕跟數字欄位。看起來只是個小元件，但它其實決定了兩件事：客戶會不會一次多買幾個、以及客戶會不會在結帳前突然分心跳走。
我們幫客戶做電商網站時常常遇到一個狀況：老闆花了大錢做首頁大圖、拍精美商品照、寫詳細介紹，結果數量選擇器隨便丟一個文字欄位讓客戶自己輸入。結果就是購物車平均筆數永遠停在 1，客單價拉不上去。
今天這篇文章，我會用中小企業老闆聽得懂的方式，講清楚數量選擇器要怎麼設計，才能讓「一顆小按鈕」變成客單價的推手。
Photo by Umut Hasanoglu on Unsplash
為什麼「數量選擇器」是被低估的成交關鍵？
先講一個數據觀念。假設你的官網平均每 100 個訪客會有 3 個下單、每筆平均買 1 件、單價 500 元，那月營收大概就是流量 × 1.5%。但如果你能把「每筆平均買 1 件」變成「每筆平均買 1.5 件」，營收馬上多 50%——而且你完全不需要多花一毛廣告費。
這就是為什麼很多做電商轉換率優化的顧問，會把數量選擇器放在優先改的清單前面。它成本低、改動小、但影響直接打在客單價上。
更關鍵的是，一個設計不好的數量選擇器，反而會造成反效果。常見的錯誤包括：欄位太小、按鈕不明顯、可以輸入負數、輸入英文不會擋、按了 + 沒反應、數量改了但小計沒同步更新。這些細節每一個都會讓客戶產生「這網站怪怪的」的印象，進而放棄下單。
五個必須做對的設計細節
1. 一定要有 +/- 按鈕，不要只給輸入框
很多剛做電商的老闆會覺得「留一個空格讓客戶輸入數字就好」，但這其實違反了使用者行為。手機時代，客戶更習慣「點一下」而不是「打字」。給他一個 + 號按鈕，他點三下就是 3；但要他打字，就多了一個心理門檻。
建議的做法是：+/- 按鈕跟數字框並排，按鈕明顯可點、字級不要太小（至少 44×44 px 以符合 Apple 的觸控建議）。數字框可以編輯，但預設互動方式是按鈕。
2. 即時反映庫存與最大限制
假設庫存只剩 5 個，客戶按 + 按到 6 卻沒任何提示，等他填完地址、選完付款方式才跳出「庫存不足」，這就是災難級的體驗。
正確做法：+ 按鈕在達到庫存上限時要變灰、不能再按；同時在數字框旁邊或下方，用小字提示「剩 5 件」。這個做法還有個附帶好處——「稀缺感」會推促客戶盡快下單。
3. 小計金額必須同步更新
客戶按 + 之後，商品頁的「合計金額」或「加入購物車後的價格預覽」一定要即時更新。這聽起來像基本功，但實務上多數中小企業官網都沒把這件事做好。
技術上這用 JavaScript 幾行程式碼就能解決，但很多網站是靜態頁 + 後端計算，改一次數量整頁重整，體驗直接毀掉。如果你的官網現在是這樣，這是第一個該修的地方。
Photo by Branden Skeli on Unsplash
4. 擋掉不合理輸入
常見的漏洞：客戶在數字框裡輸入 0、負數、小數點、英文字母、甚至一串 999999，網站居然照吃、送到後端才報錯。這種細節不但影響體驗，還有安全隱憂（有人會故意輸入奇怪字串測試你的網站）。
前端要處理的規則至少包括：只允許正整數、有最小值（通常是 1）、有最大值（庫存或單筆限購）、輸入空白時自動補 1。這些規則簡單但很多人漏掉。
5. 移除鍵「-」按到 0 時的處理
當客戶把數量減到 1 之後再按 -，該怎麼辦？兩種常見做法：一是 - 按鈕變灰不能按（安全但保守），二是自動變成「移除商品」的垃圾桶圖示（進階體驗，但客戶要熟悉這個模式）。
對中小企業來說我會建議先做第一種，等客戶有反應再迭代。畢竟「按錯把商品刪掉」這種事一發生，客戶不會怪自己，會怪你的網站。
加購型 vs 定量型：不同商品用不同邏輯
不是所有商品都適合讓客戶自由選數量。舉幾個例子：
加購型商品（如零食、飲料、日用品）：完全開放 +/-，鼓勵多買，甚至可以加上「滿 3 件 9 折」的提示，把數量選擇器直接變成促銷工具。
定量型商品（如手機、家電、訂閱制服務）：通常一個人只會買一個，這時候直接把數量選擇器隱藏或鎖定為 1，反而讓頁面更乾淨。多留一個「+」按鈕給客戶看，只會讓他猶豫「我是不是要買兩個？」
套組型商品（如禮盒、組合包）：可以設計成下拉選單而不是 +/-，選項用「一組 / 兩組 / 三組（超值價）」這種語言，把價格心錨打進去。
順便講講「批發下單」的隱藏商機
如果你的商品有 B2B 或大量採購的需求，數量選擇器可以再進化一層。實務上常見的做法是把數量選擇器拆成兩段——「一般購買（例如 1 到 10 件）」用 +/- 按鈕，「大量採購（超過 10 件以上）」則跳出一個小視窗提示「請洽業務報價」或「輸入數量後自動套用批發價階梯」。
這樣做的好處是：一般消費者的體驗完全不受影響，但大量採購的 B2B 客戶會被自然引導到專門的詢問管道，成交金額直接跳一個級距。這種小小的分流設計，往往就是官網從「純零售」變成「B2B 也接得到」的關鍵。
Photo by Julio Lopez on Unsplash
行動版設計三個容易踩的坑
台灣電商流量七成以上來自手機，行動版的數量選擇器設計特別關鍵。三個常見錯誤：
坑一：按鈕太小。手機螢幕上的 +/- 按鈕如果小於 40 px，客戶用大拇指按會很容易誤觸。給它一個大方的觸控範圍，寧可看起來「有點大」，也不要讓客戶按錯。
坑二：數字欄位跳出數字鍵盤要設對。HTML 上要用 `inputmode="numeric"`（不是 `type="number"`，因為那個會出現小箭頭在手機上很醜），讓數字鍵盤直接跳出，不用切換英文鍵盤。
坑三：「加入購物車」按鈕要跟數量選擇器離得夠遠。有些設計把數量選擇器跟加入購物車擠在一起，客戶想按 + 卻按到加入購物車，就會誤把數量 1 就送出。行動版建議至少留 16 px 以上的間距。
簡單的改版檢核清單
如果你手上已經有電商官網，可以拿這份清單快速檢查：
第一，商品頁的 +/- 按鈕點下去有反應嗎？點快十下會不會爆炸？
第二，數字框可以輸入 0 或負數嗎？可以打字母嗎？
第三，改變數量後，總價會即時更新嗎？
第四，庫存快沒了會提示嗎？
第五，手機上按鈕會不會太小、誤觸機率高不高？
第六，有加購優惠時，數量選擇器有沒有搭配文案提醒？
這六個問題你回答完，就能知道自己的官網數量選擇器有沒有把該做的做對。
結語：小地方做對，才是專業感的來源
中小企業做網站最容易犯的錯，就是把資源全花在「看得見的大東西」上——首頁大圖、精美影片、酷炫動畫。但真正決定客戶會不會下單的，反而是這些「看不見的細節」：數量選擇器、加入購物車確認、結帳流程、載入速度。
下次你檢視自己的官網時，不妨從商品頁的那個小小 +/- 按鈕開始看起。因為客戶就是從這裡按下去的——按對了成交、按錯了跑掉。差別就在幾行 CSS 跟 JavaScript 而已。
如果你的官網目前還沒做電商功能，或現有的商品頁點下去總覺得怪怪的，這種細節通常就是問題所在。與其自己一個一個試錯，找個懂電商轉換率的團隊做完整體檢，往往更省時間也更省錢。