網站製作2026 年 8 月 21 日8 分鐘閱讀

官網『商品規格選擇器（顏色／尺寸 Swatch）』設計完整攻略：中小企業如何用一排會亮起來的小方塊，讓客戶三秒鐘看懂『有幾種可以挑』，把猶豫直接變加入購物車

把商品的下拉選單換成一排可視化的顏色 / 尺寸 swatch，加入購物車率通常能提升 15-30%。五個 PDP 破口今天就能檢查。

「這件衣服有黑色嗎？」「這個包有其他尺寸嗎？」如果你的官網每天都有客戶用 LINE 或客服信問這種問題，代表兩件事：一，他快下單了；二，你網站上那個規格選擇的地方，他找不到、看不懂，或根本不敢按。

商品規格選擇器（Product Variant Selector），也就是俗稱的「Swatch」，是商品詳情頁（PDP）上排在標題和價格下方的那一排小方塊、小圓點或下拉選單。看起來只是幾個按鈕，實際上是整個電商 PDP 上最容易被做爛、也最容易一改就把加入購物車率往上拉的關鍵元件。

我們幫中小企業做網站的經驗裡，這個地方最常見的錯誤不是「沒做」，而是「做得像 2010 年的規格下拉選單」——客戶點進去要滑一長串「S / M / L / XL / 深藍色 / 黑色 / 米白色 / 卡其色」的文字，找不到自己要的，也看不出來哪個缺貨，最後乾脆關掉頁面。

一、下拉選單是罪魁禍首，能不用就不用

很多 WordPress + WooCommerce 的預設佈景還在用「請選擇顏色」的下拉選單。這是 PDP 上最傷轉換的元件之一，理由很簡單：客戶看不到選項有幾個、也看不到長什麼樣子，得多按一次滑鼠或多滑一次手指才能知道。

正確做法是把選項全部「攤在檯面上」：顏色用實際色塊呈現，尺寸用一排方塊，材質用小縮圖。訪客一眼就能看出「這款有 4 個顏色、3 個尺寸可以選」，決策速度會快非常多。實務上把下拉換成 swatch 之後，加入購物車率提升 15% 到 30% 都算常見範圍。

唯一適合下拉的情境，是同款超過 8 個選項（例如 20 種花色的窗簾布）——這時全部攤開反而干擾，用下拉搭配預覽圖是折衷。

客戶最討厭的體驗，是選了顏色、選了尺寸、按下加入購物車，才被告知「這個規格已售完」。這代表你的 swatch 沒有把庫存狀態視覺化。

合格的 swatch 應該用三種狀態呈現：正常可購買（原色 + 邊框）、缺貨（打斜線 / 灰階 / 半透明）、目前選中（粗邊框或勾勾）。客戶掃一眼就知道「這個顏色已經沒了、那個尺寸還有」，也不會浪費時間點選缺貨規格。

進階一點的做法，是把「剩幾件」直接顯示在 swatch 旁邊，例如「M 剩 2 件」。這對於高單價、限量、季節性商品特別有效——製造稀缺感的同時，也讓客戶自然而然願意提早下決定。

如果一件商品同時有「顏色」和「尺寸」兩個維度，順序很重要。實務上通常是：先選顏色，再選尺寸。因為顏色決定商品外觀主圖，換色時應該同步換掉上方的商品圖；而尺寸只影響庫存與價格。

更關鍵的是，選完顏色之後，尺寸的庫存狀態要立刻更新。舉例：黑色的 M 缺貨，但白色的 M 有貨，那客戶點到黑色的時候，M 就要變成打叉；再點白色，M 又要恢復可選。這個動態聯動如果沒做好，客戶就會遇到「按下加入購物車才知道缺貨」的爛體驗。

另一個常被忽略的細節：客戶點選色塊時，主圖應該平滑淡入切換到對應顏色的照片，而不是整頁閃一下重新載入。這需要前端預先把所有變體圖片載入或懶載入處理，是設計和工程要一起搞定的細節。

「深藍」到底是海軍藍還是牛仔藍？「卡其」是接近土黃還是接近淺灰？只用文字標籤而不放色塊，是逼客戶自己想像。想像不出來的結果就是——不下單。

顏色 swatch 應該直接用該顏色的實際色碼繪製小圓點或小方塊；有特殊材質（例如皮革、絨面、亮面、霧面）的話，用該材質的一小張縮圖代替純色塊。滑鼠移上去（hover）時，再顯示文字說明「經典黑」「霧面銀」給需要文字確認的客戶。

特別提醒：白色、米白、象牙白之類接近背景的顏色，色塊一定要加一圈邊框，不然客戶會以為那個位置是空的、沒有這個選項。

台灣電商七成以上流量來自手機，但很多網站的 swatch 在手機上小到只有 20px、間距又擠。用手指點會誤按到隔壁的顏色，或根本點不到。

Apple 和 Google 的設計指南都建議：任何可觸控元件，實際點擊區域至少要 44×44px（約手指指腹大小）。色塊本身可以視覺上小一點（例如 32px），但外圍留白要湊到 44px 以上；尺寸選擇的方塊建議直接做到 48px。這樣手機客戶才不會邊選邊煩躁，最後放棄下單。

不用大改版，今天就可以拿手機打開自己的 PDP 走一次以下清單：

顏色是不是用實際色塊呈現、不是純文字下拉？缺貨的規格是不是一眼看得出來（打叉或灰階）？選完顏色，尺寸的庫存有沒有跟著更新？換顏色時，主圖有沒有跟著換？色塊的點擊區在手機上是不是有 44px 以上？如果以上有任何一項答不出來或答「沒有」，你的 PDP 就有一個正在流失訂單的破口。

商品規格選擇器不是華麗的設計，是每個電商 PDP 都應該做對的基本功。它不會讓網站看起來多炫，但會實實在在把「有意願下單但看不到選項」的客戶接住。對中小企業來說，這種每一頁都在幫你賺錢的細節，比大改版重要一百倍。

如果想確認自家官網的 PDP 有沒有這些破口，或需要協助把 WooCommerce 的預設下拉換成好用的 swatch，歡迎聯絡奧隆——我們幫台灣中小企業檢查 PDP、優化轉換路徑，一起把已經到頁面的訪客好好接住。

不論是快速上線的模板建站、客製官網或後台系統，留個訊息，我們會回你「能做＋報價＋時程」。