官網『商品促銷徽章』(Product Badge) 設計完整攻略：中小企業如何用一顆掛在商品圖上的小標籤，把「隨便看看」變成「這個好像不錯」
商品促銷徽章是官網成本最低、效果最快的元件之一。這篇一次講清楚類型、視覺、後台管理、SEO 與常見錯誤，讓你半天就能拉高 CTR 與加購率。
你逛商品列表頁的時候，眼睛通常會先被什麼吸走？不是價格，也不是名字，而是那一顆貼在商品圖右上角、寫著「NEW」「HOT」「-30%」「最後 3 件」的小標籤。這種一眼就跳出來的視覺符號，在網頁設計裡叫做「商品促銷徽章」（Product Badge），也是最小成本就能把「隨便看看」變成「這個好像不錯」的官網元件之一。
但很多中小企業的官網，要嘛完全沒放徽章、要嘛整頁商品全部貼「熱銷」——熱銷變成背景，訪客連看都不看。這篇把商品徽章的設計邏輯、常見錯誤、和實作重點一次講清楚，讓你花不到一個下午就能把 CTR 和加購率往上拉一段。
一、什麼是商品促銷徽章？為什麼中小企業一定要放
商品促銷徽章是掛在商品縮圖上（通常在左上或右上角）的小色塊，用一兩個字告訴訪客這件商品「有什麼特別」。它不是額外的功能，而是一個視覺捷徑——讓訪客不需要點進去、不需要讀敘述，就能在 0.3 秒內完成判斷。
對中小企業來說，商品徽章解決三個實務問題：
- 商品太多、賣點被稀釋。當商品列表頁有 20、30 件，訪客根本沒耐心一個一個看，徽章可以引導視線到「主打商品」。
- 庫存與促銷資訊沒地方講。限時、清倉、缺貨、預購這些狀態，寫在敘述裡沒人看，貼在圖上一目瞭然。
- 建立稀缺感和信任感。「限量」「最後 X 件」是稀缺，「Bestseller」「編輯精選」是信任，兩種心理效應都能被一個徽章觸發。
Photo by Tamanna Rumee on Unsplash
二、常見的六種徽章類型，先想清楚要用哪一種
不是所有徽章都長一樣、也不該全部混著用。把你的商品和促銷情境對回下面這六類，會比較好決定：
- 促銷型（Promotion）：「-30%」「省 500」「買二送一」。直接把價格利益寫在徽章上，最能刺激衝動購買。
- 狀態型（Status）：「NEW」「新上架」「即將上市」。給喜歡追新品的訪客一個訊號。
- 庫存型（Stock）：「售完」「補貨中」「僅剩 3 件」「預購」。同時管理期望和製造稀缺感。
- 信任型（Social Proof）：「暢銷」「Top 10」「編輯精選」「回購率 80%」。用群體行為降低決策壓力。
- 認證型（Certification）：「有機認證」「MIT 台灣製造」「素食可食」。適合有規範或訴求的商品。
- 時效型（Time-limited）：「限時 24 小時」「本週限定」。加上倒數的話效果更明顯，但用得太密會被無視。
一個實務建議：同一個商品最多掛兩顆徽章，貼三顆以上，訪客的注意力會分散，反而什麼都記不住。
三、視覺設計的六個原則，設計師和老闆都要看
徽章看似簡單，但做不好會直接毀掉整頁商品的美感。以下六個原則是實作時最容易踩的坑：
1. 顏色要能區隔類型。促銷用紅或橘（緊迫感）、新品用藍或綠（新鮮感）、認證用金或黑（權威感）。同一顏色代表同一類型，訪客逛第二次就會建立「看到紅色 = 有折扣」的直覺。
2. 字數控制在 4 個中文字或 8 個英文字內。「限時特惠倒數三天」太長，改成「限時特惠」或「-30%」；行動裝置上的縮圖只有 150px 寬，字多了根本看不清楚。
3. 形狀要簡單。圓形、長方形、緞帶（Ribbon）三種最實用，太花俏的多邊形會跟商品圖搶戲。
4. 位置固定不要亂跳。統一放右上或左上，全站規範一致；否則每張圖徽章位置都不一樣，看起來像沒設計。
5. 大小要夠但不能蓋到商品重點。建議佔縮圖寬度的 20~30%。太小看不到，太大會遮到商品本體（尤其是化妝品、飾品這類細節多的品項）。
6. 對比度要足。白底商品配紅色徽章、深色商品配黃色徽章。做完把畫面轉成灰階看一次，如果徽章消失了，代表對比不夠。
Photo by Osarugue Igbinoba on Unsplash
四、後台管理：徽章不應該讓工程師改
做網站最容易被忽略的一件事：徽章是行銷會頻繁調整的東西。今天檔期結束、明天新品上架、後天要清庫存，每次都叫工程師改圖或改 code，你的官網會變成無法動彈的展示品。
正確的做法是讓後台可以：
- 每個商品獨立設定 1~2 顆徽章，選型別 + 填文字 + 選顏色。
- 批次套用：整個分類、整個品牌一鍵掛「限時 8 折」。
- 時間排程：檔期開始自動掛上、結束自動下架，不用半夜還要手動改。
- 條件自動化：「庫存 < 5 件」自動顯示「僅剩 X 件」、「上架 30 天內」自動顯示「NEW」。
如果現在後台做不到這些，值得花一次成本一次做到位。之後你行銷團隊每個月省下的來回時間，就能把這筆錢賺回來好幾次。
五、SEO 與資料層面的兩個小提醒
徽章雖然是視覺元件，但如果做成純圖片（用 Photoshop 貼在商品圖上），會有兩個副作用：
其一，Google 讀不到徽章文字。「限時 8 折」寫在圖裡等於沒寫。實務做法是用 HTML/CSS 疊在圖片上（浮在縮圖之上的 div），這樣不但 Google 看得懂，也能配合 Schema.org 的 PriceSpecification 或 availability 標記，讓搜尋結果直接顯示「特價中」的星等/紅字。
其二，A/B 測試會很難做。純圖片版本要換就要重新出圖，HTML 版本可以直接測試不同顏色、文字、位置，找出你商品最合適的組合。國外電商研究普遍指出，光是把模糊的「HOT」改成具體的「本週熱銷 Top 3」，點擊率就可能拉出可觀差距，這種微調成本近乎於零，非常值得測。
Photo by Vitaly Gariev on Unsplash
六、常見錯誤：這五種做法會讓徽章反效果
1. 全部商品都貼「熱銷」。當每一件都是熱銷，訪客的大腦就會把徽章當成背景，直接視而不見。徽章要保留給真正的重點，建議整頁只有 20~30% 的商品掛徽章。
2. 徽章文字騙人。寫「限時 24 小時」結果一個禮拜還在，或是「僅剩 3 件」但點進去有 300 件庫存。訪客一次上當，之後對你所有促銷都會打折扣。
3. 徽章遮住商品最重要的部位。賣戒指的把徽章貼在寶石上、賣衣服的把徽章貼在領口 logo 上，反而讓訪客看不到最想看的細節。
4. 顏色跟品牌完全不搭。你官網是氣質莫蘭迪色系，結果貼一顆螢光紅徽章，整個質感瞬間掉了兩個檔次。可以低調但保持對比。
5. 手機版沒特別調整。PC 版看起來 OK 的徽章，到手機縮圖上可能整顆糊掉、或蓋掉半張商品圖。RWD 一定要獨立驗證手機版。
七、實作起手式：三個小時就能上線的簡化版
如果你官網用的是 WordPress（WooCommerce）、Shopify、Shopline 這類 CMS，市面上有現成的徽章外掛可以先用起來，成本低到幾百塊台幣一年就能搞定。等到你發現徽章對業績的貢獻明確後，再考慮客製化做更精細的排程和條件自動化。
如果是全客製化的官網，第一版可以先只做「新品」「特價」「售完」三種，這三種能覆蓋超過 80% 的使用情境。剩下的等到有實際業務需求再加，不要一次做齊十種然後每一種都沒人用。
結語：小改動、大差別
商品促銷徽章可能是官網裡最不起眼、卻最能立即看到效果的元件之一。它不用改架構、不用重寫程式、也不用等下一次改版，只要在後台把 20 件主打商品掛上徽章，這週的加購率和 CTR 就會有肉眼可見的變化。
如果你手邊剛好在檢視官網，可以先問三個問題：我有沒有明確的主打商品？我的徽章有沒有讓訪客一眼看出「這件不一樣」？我的行銷團隊每次改徽章要不要找工程師？三個問題只要有一個答不出來，這篇的內容就值得動手改一次。
官網不是做給老闆看的展示品，是每天替你接客戶的員工。讓它學會用一顆小徽章講清楚「哪個賣點值得看」，你會發現轉換率的天花板其實比想像中還高。