官網『浮動加購列』(Sticky Add to Cart Bar) 設計完整攻略：中小企業如何用一條黏在螢幕底部的橫桿，讓訪客滑到頁面最下面也能一鍵下單

為什麼客戶滑到最下面就消失了？

你有沒有仔細觀察過自家官網的商品頁？一位訪客點進來、看完照片、往下滑閱讀規格、翻到評價、看到常見問題，然後——手指還停在螢幕上，就這樣關掉分頁走掉了。那顆「加入購物車」按鈕明明就在頁面最上面，可是他早就滑過了。要再往上捲回去按一次？很多人真的不會回頭。

這不是客戶懶，而是使用習慣的問題。手機時代大家滑得比想像中快，只要「決定要買」跟「按下購買」中間多一個動作，成交就會流失。中小企業的官網，尤其是產品資訊比較豐富、頁面比較長的類型，最常在這一步漏掉客人。今天要聊的「浮動加購列」（Sticky Add to Cart Bar）就是為了解決這個問題的元件。

Photo by Clay Banks on Unsplash

浮動加購列到底是什麼？

簡單講，就是當使用者滑到頁面下半段，主要那顆加入購物車按鈕已經捲出畫面之後，會從螢幕邊緣「跳出」一條細細的橫桿，裡面通常會有：商品縮圖、商品名稱、目前價格，還有一顆隨手可按的加入購物車或立即購買按鈕。桌機通常黏在畫面最上緣或最下緣，手機幾乎清一色都是黏在螢幕最下面，因為那裡剛好是拇指最容易按到的區域。

它跟一般的 Sticky Header 有點像，但角色完全不同。Sticky Header 是幫助訪客「重新導航到別頁」，浮動加購列則是幫訪客「不用捲回去就能下單」，兩者可以並存，但目的要拆清楚，不要塞在一起變成一整條資訊擁擠的橫桿，反而讓人看不到重點。

為什麼中小企業更需要這個小元件？

大品牌的商品頁通常做得很精簡，一張大圖、一個標題、一顆買按鈕就結束，因為他們的品牌力已經幫商品說話了。中小企業不一樣，你要在同一頁裡塞產品特色、規格表、材質說明、保養方式、Q&A、實拍照，甚至還要放推薦搭配。頁面自然就長，一長就會有客人「滑到底才決定要買」的情境。

再加上台灣中小企業的客單價很多落在 800～5,000 元這個「稍微猶豫得起、也稍微猶豫得掉」的區間。這個級距的客人特別容易在最後一秒被生活打斷——小孩喊媽媽、老闆走過來、瓦斯行按門鈴——只要決定買的當下沒把商品加入購物車，等他再想起來時，通常已經是隔天在別家買了。浮動加購列的價值，就是把「決定要買」到「按下按鈕」的距離縮到最短。

國外幾個大型電商平台的公開觀察都指出，加入浮動加購列之後，商品詳情頁的加入購物車率會有可感的提升，尤其是頁面長度超過三個滑動螢幕、以及行動流量佔比高於七成的網站，改善幅度會更明顯。這兩個條件，正是絕大多數台灣中小企業官網的現況。

設計時最容易踩雷的五個地方

1. 一開始就跳出來，反而讓客人反感

常見的錯誤是頁面一載入，浮動列馬上就在螢幕下方黏著。訪客連商品照片都還沒看清楚就被塞一顆「加入購物車」按鈕，感覺被推銷、體驗差、跳出率反而上升。合理做法是：等訪客把主要的「加入購物車」按鈕滑出畫面之後才浮出。這代表他「至少已經看過一次商品資訊」，這時候提醒他還可以買，就順理成章多了。

2. 手機版蓋到系統手勢區

iOS 底部有一條 Home Indicator，Android 部分機型也有手勢返回區。如果浮動加購列的按鈕直接壓在最底邊，手指常常會誤按到系統、或是根本點不到按鈕。實作時要留一段安全距離（CSS 的 env(safe-area-inset-bottom) 就是給這件事用的），該讓一段就讓一段，不然按鈕位置很尷尬。

3. 資訊塞太多，變成第二層商品資訊卡

浮動加購列的空間非常小，塞的東西越多，訪客要處理的資訊越多、按下去的速度反而越慢。基本上「小縮圖 + 商品名稱一行 + 價格 + 一顆按鈕」就是上限。至於折扣說明、庫存狀況、剩餘時間，那些留在商品資訊區塊裡就好，浮動列的任務是「臨門一腳」，不是把商品頁再抄一次。

Photo by Jonas Lee on Unsplash

4. 有規格要選的商品，忘了處理「還沒選規格就按下去」的流程

賣衣服的 M/L/XL、賣家電的顏色、賣配件的長度，這類商品在浮動列直接按「加入購物車」時，一定要導出「請選擇規格」的互動——最常見的做法是彈出一個小視窗讓客人在裡面選完就直接加入購物車，不用捲回去。很多網站沒處理這一段，客人按下去只跳一個錯誤訊息，體驗直接崩壞。

5. 桌機版跟手機版當同一件事處理

手機幾乎都是黏底部，因為拇指在那；桌機黏底部的效果並不好，因為滑鼠通常在畫面中間或上方。桌機版更適合黏在頂端，或做一個右下角浮動小卡片。同一個元件，兩種尺寸下的位置、大小、資訊密度，是應該分開設計的，不能一套 CSS 硬套。

視覺與文案的小細節，會決定按鈕會不會被按

浮動列的按鈕顏色，建議跟主要「加入購物車」用同一個高對比色，維持品牌一致性，讓客人一眼就認出「這是那顆買按鈕」。字樣不要用「送出」或「確認」這種曖昧的用語，直接寫「加入購物車」、「立即購買」、「加入 $XXX」，把行為跟金額直接說白。

另外一個非常有效的小技巧是把價格顯示在按鈕旁邊或按鈕文字裡。客人在滑頁的過程中，有時候會忘記商品到底多少錢，把價格再露出一次，等於幫他重新確認「這個價位可以接受」，決策成本會低很多。

如果你有做限時折扣，浮動列可以在按鈕左邊補一個原價劃線、現價高亮的比對，一目瞭然。但注意不要放太多倒數計時、剩下幾件之類的刺激性文案，那些放在商品資訊區就好，浮動列的角色永遠是「乾淨、明確、按下去」。

什麼類型的商品頁最該優先做？

不是每個網站都非做不可，資源有限的話，優先順序建議這樣排：第一，頁面長度超過三個螢幕的商品頁；第二，行動裝置流量佔比超過六成；第三，客單價在 800～5,000 元、屬於「想一下就會買」的產品。反過來說，如果你賣的是很貴、需要洽詢報價、或本身就是一頁式短頁面的商品，這個元件的效益會比較有限，可以放後面再優化。

Photo by David Clarke on Unsplash

怎麼衡量到底有沒有用？

做完之後別急著開心，記得追蹤幾個指標：商品詳情頁的「加入購物車率」、「浮動列被點擊的比例」、「按下浮動列後真的完成結帳的比例」。如果加入購物車率有上升、跳出率沒有變高，那就是成功的。

比較容易被忽略的是要追「浮動列被關掉的比例」——有些設計會給使用者一個關閉小 X，如果超過三成的人一看到就關掉，那大概是元件太搶戲、資訊太多、或跳出時機太早，這時候要調整，不是繼續放著讓它擋人。

結語：一條橫桿，能拉起一整段被浪費掉的滑動距離

官網優化很常見的陷阱，就是把時間花在「重寫首頁」、「換首圖」、「調 Logo」這種讓自己看了爽、但客人根本不會多買的地方。真正影響轉換率的，通常是這些不起眼、離結帳很近的小元件——像浮動加購列這種，一次做好，未來每一位滑到底的訪客都會受惠。

如果你正在盤點官網哪裡需要優化，建議打開自己商品頁在手機上滑一次，滑到你自己覺得「這頁怎麼那麼長」的地方，然後問自己一個問題：如果我這時候決定要買，是不是還要滑回頂端才能按下購買鍵？如果答案是「對」，那浮動加購列就是你下一個該做的功能。花不了幾天，效益卻可能會出現在你未來每一份月報上。