商品頁怎麼設計，才能降低跳出？

先讓人看懂商品，再讓人快速完成選擇。商品圖片、名稱、價格、規格與加入購物車按鈕要在同一個決策區內清楚可見；運費、到貨時間與退貨規則則要在下決定前找得到。這樣的安排能減少「我還要再找資料」的中斷感。

為什麼商品頁是電商轉換的關鍵頁？

商品頁是訪客決定是否購買的位置。Baymard Institute 的產品頁研究指出，使用者在此評估商品，而介面可用性問題會造成放棄購買；其 344 個電商網站的基準測試中，51% 的商品頁表現仍落在普通或更差的區間。這不代表照著某個版型就能保證轉換率，而是提醒我們：商品頁的資訊排序要被當成真正的銷售流程。

1. 用圖片先回答「商品到底長什麼樣子」

首圖要快速辨認商品，接著用不同角度、使用情境、尺寸比例與材質近拍補足疑問。服飾要有上身比例；家具要有空間尺度；3C 配件則要讓接頭、按鍵與相容裝置看得清楚。不要只放一張乾淨的棚拍圖，卻把關鍵細節藏在文字規格裡。

若有經營 Google 商品搜尋，圖片也要當成產品資料的一部分。Google 建議產品圖片維持高解析度，並提供 16:9、4:3 或 1:1 等比例版本，以利不同呈現情境使用。

2. 把價格、規格、庫存與 CTA 集中在購買決策區

商品名稱下方應依序放置價格與折扣、主要賣點、顏色或尺寸、庫存狀態，再接明確的「加入購物車」按鈕。選項一改變，價格、圖片與可售狀態也要同步更新。若商品有組合、加購或不同規格，不要要求使用者自己推理最後會買到什麼。

按鈕文字應直接描述行動，例如「加入購物車」或「立即預購」；避免只寫「送出」或使用只靠圖示辨識的按鈕。手機版尤其要讓 CTA 在捲動後仍容易回到視線內。

3. 在按下按鈕前交代運費、到貨與退貨

價格不透明會讓人延後決定。把運費門檻、免運條件、預計到貨時間、退貨期限與例外規則放在價格或 CTA 附近，並以可展開的簡短說明處理較長的條款。Baymard 的產品頁研究也將配送、退貨與信任資訊列為購買區的重要內容。

4. 把顏色、尺寸等選項做成人人都能操作的表單

變體選項需要清楚的文字標籤，點選範圍要足夠大，選取後要有明確狀態；缺貨或必填未選的情況，也要用可理解的錯誤提示說明下一步。W3C 的表單無障礙指引建議將相關欄位分組，提供說明與驗證回饋；這些做法同時也能減少一般使用者誤選、漏選的機會。

5. 讓搜尋引擎取得一致的產品資料

商品頁前台呈現的價格、庫存與運送資訊，要與產品結構化資料一致。Google 說明，符合條件的 Product 標記可讓商品搜尋結果呈現價格、供貨狀態、運送與退貨資訊；新模板上線後，應用 Rich Results Test 驗證並持續觀察成效。不要只在前端漂亮地呈現資料，卻讓搜尋引擎讀到過期或不完整的內容。

上線前的 5 分鐘商品頁檢查

1. 不看說明文字時，首圖能否辨識商品與主要差異？
2. 價格、規格、庫存與加入購物車按鈕是否在同一個決策區？
3. 運費、到貨與退貨是否不必跳到另一個頁面才能知道？
4. 用手機單手操作時，選項與按鈕是否容易按、容易看懂？
5. 價格與庫存異動後，前台與 Product 結構化資料是否同步？

常見問題

商品頁一定要把所有內容都放在首屏嗎？

不用。首屏的任務是幫使用者理解商品並開始選購；詳細規格、使用方式與常見問答可以往下安排，但連結與段落標題要容易找到。

加入購物車按鈕要固定在畫面上嗎？

手機版可在使用者看過價格與選項後，提供固定或容易回到的 CTA。前提是不要遮住規格、錯誤提示或系統導覽。

商品結構化資料能直接提升排名嗎？

不能把它當成排名保證。它的用途是協助搜尋引擎理解產品資訊，並在符合資格時取得更完整的商品呈現。

下一步：先做一頁商品頁健檢

先挑出流量最高、卻最常被放棄的商品頁，依本文檢查表走一遍。通常不必立刻重做整站，只要先補齊決策區、費用資訊與選項回饋，就能讓後續的 A/B 測試有更清楚的起點。

延伸閱讀：電商網站設計服務、網站改版流程、SEO 結構化資料。