官網『免運進度條』(Free Shipping Progress Bar) 設計完整攻略：中小企業如何用一條會動的進度條，把「還差 250 元免運」變成「再加一件的下單理由」
免運進度條是台灣中小企業電商最被低估的成本效益元件。這篇拆解位置、門檻、文案五種狀態、加購推薦、後端細節與衡量指標，兩天做完就能撐開客單價。
你有沒有過這種經驗？在網路上買東西，購物車已經放了兩件，結帳頁看到「未滿 1,000 元、運費 90 元」的那一刻，突然多加了一個原本沒有要買的東西，就是為了湊到免運。
這個「差 XX 元就免運」的橫條，就是我們今天要拆解的主角：Free Shipping Progress Bar（免運進度條）。它看起來只是頁面上方一條會動的長條，卻是台灣中小企業電商官網最被低估、但成本效益最高的一個介面元件——因為它幾乎不用花錢加購物流方案，只要一段前端邏輯，就能讓客單價（AOV）往上跳一個檔次。
一、為什麼台灣中小企業一定要有免運進度條？
先講一個常見的觀察：台灣消費者對運費的敏感度，比多數老闆想像的高。看過幾份電商產業報告都指出，訂單結帳頁看到「另加運費」的那一刻，跳出率會明顯上升，這對本來就辛苦養流量的中小電商來說，是相當可惜的一件事。
但這件事反過來看也是機會。既然客戶討厭付運費、又願意為了免運多買，那你只要把「還差多少可以免運」這個資訊，從結帳頁往前搬到加入購物車的那一秒，讓他在還沒失望之前就先看到「再加 250 元就免運」，客單價的天花板就會被撐開。
這就是免運進度條做的事：把「運費是成本」重新包裝成「湊免運是遊戲」。同一件事，訊息設計不同，客戶的心理感受完全不一樣。
二、免運進度條到底該長什麼樣？
常見的呈現位置有三個，中小企業建議一次全部都做：
1. 網站最上方 Announcement Bar：一條橫跨螢幕、只有一行字的通知列。訪客一進站就看到「單筆滿 990 元免運」——這是建立「有免運門檻」的初步印象。
2. 側滑購物車（Cart Drawer）頂部：這是重頭戲。客戶點「加入購物車」的那一秒，購物車面板從右邊滑出，最上方就是那條會動的進度條，寫著「再加 250 元即可免運」，下方還帶一顆「去逛更多商品」的按鈕。
3. 結帳頁上方：最後一道防線。如果客戶還沒湊到免運就直接進結帳，這裡再提醒一次，並提供「回購物車再加購」的返回連結。
三個位置的差別在於：Announcement Bar 是告知、Cart Drawer 是誘導行動、Checkout 是最後補救。三個都做，才能把整條漏斗補齊。
三、免運門檻怎麼訂才對？
這是最多老闆卡關的地方。定太低，等於白白送運費；定太高，客戶湊不到反而放棄結帳。一個常見的抓法是：
免運門檻 = 平均客單價 × 1.3 到 1.5 倍
舉個例子。假設你的官網目前平均客單價是 700 元，那免運門檻抓 900 到 1,050 元最剛好。這個區間有兩個好處：一是絕大多數猶豫的客戶「再加一件小的」就能達成，湊起來心理負擔低；二是即使湊到，你也因為多賣了一件商品，把運費補貼的成本吃回來還有得賺。
如果你抓到 1,500 元、平均客單只有 700 元，那客戶要多買一整倍才免運，多數人會直接放棄。反之，如果抓 750 元、幾乎人人都達標，那你根本沒撐開客單價，只是白送運費。
Photo by Donald Giannatti on Unsplash
四、文案設計：五種狀態、五種說法
很多網站做免運進度條只寫一句話：「還差 XX 元免運」。這是浪費。同一條進度條，隨著金額不同，應該有不同的文案來強化不同情緒：
狀態 A：購物車空的
「單筆滿 990 元免運費」——單純告知，不要嚇人。
狀態 B：加入第一件、離免運還遠（差 500 元以上）
「不錯的選擇！再加 620 元即可免運」——先肯定，再引導。不要用「還差」開頭，太負面。
狀態 C：接近門檻（差 300 元以內）
「快到囉！再加 180 元就免運！」——語氣加溫，可以加一個小小的 emoji 或動畫。
狀態 D：接近門檻（差 100 元以內）
「差一點點！再加 60 元立即免運」——這時可以順便推薦一顆「熱賣加價品」的按鈕，直接放一個 89 元的小配件在旁邊，一鍵加入。
狀態 E：達標
「恭喜！您的訂單已享免運 🎉」——這句話一定要出現，不能只是進度條變綠。客戶要那個「我贏了」的心理獎勵。
這五段文案的差別，實測影響非常大。光是把「還差 XX 元」改成「再加 XX 元」，加購率就可能出現差距——因為前者強調「不夠」，後者強調「機會」。行銷心理學的框架效應，在這個小地方就用得上。
五、進階做法：加購推薦區塊
免運進度條的天花板做法，是把「差多少」變成「這幾件剛好可以湊到」。
做法是：當進度條偵測到目前金額「差 300 元以內」，就在進度條下方自動列出 3 件單價介於差額 100% 到 130% 之間的商品，附一鍵加入按鈕。
舉例：客戶差 250 元免運，系統就自動推薦 3 件單價 250 到 320 元的商品——可能是熱賣的濕紙巾、小零件、周邊配件。客戶心裡想的是「反正都要付運費」，但實際上你多賣了一整件商品，還把運費成本抵掉。
這種「湊免運推薦」的加購轉換率，業界常見的落點大約在單位數到雙位數之間。看起來不高，但它是純加購、純毛利，因為這些單本來就會下單，只是原本會少賣一件。
六、後端邏輯：三個細節不能漏掉
做前端的邏輯很簡單，但很多網站會在後端漏掉幾個關鍵處理，導致客戶湊了老半天發現運費還是照收，反而更生氣：
1. 折扣碼要在計算後才判斷免運：如果客戶湊到 1,000 元、但用了 200 元折扣碼變成 800 元，你要決定免運門檻是看「原價」還是「折後價」。實務上多數電商採用「折扣後未達門檻仍收運費」，並且要在結帳頁明確告訴客戶。
2. 特殊品項要排除：像大型家具、冷凍配送、外島訂單，這些本來運費結構就不同，不能算進免運計算。需要在購物車面板下方註明「部分商品不適用免運方案」，避免糾紛。
3. 不同運送方式要分開計算：如果你同時提供宅配、超商取貨、店到店，每一種都有自己的免運門檻。進度條要顯示「目前運送方式的門檻」，而不是全站最低的那個，否則會誤導。
Photo by CardMapr.nl on Unsplash
七、怎麼衡量它有沒有用？
做完免運進度條，建議追蹤三個指標：
客單價（AOV）：這是最直接的指標。上線後對比前後 4 週的平均客單價，若沒明顯提升，代表門檻設得不對，需要往下調。
購物車放棄率：這個指標是反過來看。如果客單價上升、但購物車放棄率也大幅上升，代表你抓的門檻太高，逼走了原本會下單的客戶。
湊免運相關商品的加購率：如果你有做加購推薦區塊，直接看這些商品的加購次數，就知道推薦邏輯有沒有效果。
八、結語：小元件、大效益
免運進度條在整個電商官網裡，開發成本可能只佔一個小工程，前後端加起來 2 到 3 天就能完成。但它的營收貢獻，通常是「不做這個」的官網想不到的一個乘數。
如果你的官網目前還是「單一免運金額寫在頁尾」的做法，那你等於把一個能主動提升客單價的機會，藏在客戶根本不會看的地方。花一個週末的時間把它做出來，你會在下個月的營收報表上看到差別。
對中小企業來說，官網要進化不用大改版，重點是把每一個「客戶會決定要不要多買」的關鍵時刻，用對的訊息接住他。免運進度條，就是這種關鍵時刻裡最好用的一顆按鈕。