商品頁設計怎麼做？圖片、價格、規格、評價到運送退貨的完整檢查清單

廣告點擊有了、分類頁也逛了，顧客卻在商品頁停留幾秒就離開，這通常是商品頁設計出了問題。實體店的顧客可以摸材質、試穿、問店員；網路上，這些動作全部要靠一頁內容來代替。只要有一個問題找不到答案，例如「這個包包裝得下 13 吋筆電嗎？」「運費多少？」「不合可以退嗎？」，顧客就會回到搜尋結果，去別家找答案。

這篇文章綜合 Baymard Institute 的商品頁使用性研究、Shopify 官方的商品頁指南與 Google 的商品結構化資料文件，拆解一張好商品頁必備的六大區塊：圖片、購買區、規格選擇、商品描述與規格表、評價、運送與退貨。每一段都附上台灣電商常見的做法與容易踩的雷。

為什麼商品頁值得優先投資

商品頁是購買決策真正發生的地方。Baymard Institute 在 2026 年 3 月更新的商品頁研究指出，幾乎所有使用者都會在決定是否購買之前瀏覽商品頁；同一份基準評比中，歐美主要電商網站的桌機版商品頁只有 48% 被評為「尚可」或「良好」，手機版更只有 38%。換句話說，連大型網站都還有很大的改善空間，中小品牌只要把基本功做好，就有機會拉開差距。

商品頁同時也是 SEO 的重要入口。搜尋「品牌＋型號」「某商品 評價」的人購買意圖很強，如果頁面內容完整、有結構化資料，就有機會在搜尋結果中顯示價格與評分。這部分可以搭配電商 SEO 完整攻略一起規劃。

商品圖：顧客第一個看的地方

Baymard 的測試觀察到，56% 的受測者進入商品頁後的第一個動作，就是開始瀏覽商品圖片（Baymard，2017）。圖片不只是裝飾，而是顧客用來「檢查商品」的工具，因此要回答以下問題：

• 長什麼樣子：乾淨背景的主圖，讓商品輪廓一目了然。
• 有多大：Baymard 發現 42% 的使用者會試著從圖片判斷商品尺寸，因此至少要有一張「比例圖」，例如拿在手上、放在桌面、背在模特兒身上。2026 年的評比中，仍有 37% 的網站沒有提供這類圖片。
• 細節與材質：特寫布料紋理、拉鍊、接縫或保養品質地。
• 怎麼使用：情境圖示範商品在生活中的樣子。
• 包裝內容：盒內有哪些配件，避免收到時覺得「少東西」。

穿戴類商品（服飾、包包、飾品、彩妝）特別需要真人模特兒圖；Baymard 2026 年的評比指出，仍有 23% 的網站沒有提供。圖片要支援放大，手機版要能用手勢左右滑動。拍攝與規格細節，我們在電商商品攝影與商品圖規格有完整說明。

購買區：價格、規格選擇與加入購物車

購買區（Buy Box）是商品頁最關鍵的一塊。Shopify 的商品頁指南建議把品名、評分、價格、規格選擇、庫存狀態與主要按鈕集中在頁面上方，讓顧客不用捲動就能完成選購。

價格要說清楚

• 原價與特價並列時，標示清楚哪個是現在的售價，不要讓顧客自己算。
• 多入組或不同容量：Baymard 2026 年評比指出 81% 的網站沒有在需要時顯示單位價格。台灣常見「買 2 送 1」「3 入組」，加註「每入約 NT$ 233」能降低比價負擔。
• 切換規格時價格要即時更新：選了大尺寸卻還顯示小尺寸的價格，是很常見的錯誤。

規格選擇用按鈕，不要藏在下拉選單

顏色、尺寸建議用按鈕或色塊直接列出。Baymard 2026 年的研究指出，57% 的網站沒有用按鈕呈現尺寸選項；用按鈕的好處是缺貨的規格可以直接顯示為灰色，顧客不必一個一個點開才發現沒貨。缺貨規格建議保留並加上「貨到通知」，不要直接隱藏。

加入購物車按鈕

按鈕要是頁面上最醒目的元素，文字直接寫「加入購物車」或「立即購買」。手機版可以讓按鈕在捲動時固定在畫面下方。按鈕的文字、顏色與位置，都值得透過 A/B 測試持續調整。

商品描述與規格表：回答顧客的問題

描述的任務不是堆砌形容詞，而是預先回答顧客會問的問題。建議分成兩層：

1. 重點賣點：3–5 個條列，放在購買區附近，例如「防潑水面料」「可放 14 吋筆電」「重量 680g」。
2. 完整說明與規格表：尺寸、材質、產地、保固、保存期限、適用對象。規格用表格呈現比長段文字更好掃讀，單位要統一（公分、公克），不要混用英制與公制。

Baymard 也提醒，從供應商直接匯入的規格資料常有格式不一、縮寫難懂的問題，上架前應該整理成顧客看得懂的說法。至於版面，常見的做法有分頁籤、可收合區塊與一頁長捲動；不論選哪一種，都要確保重要資訊不會被藏到顧客找不到的地方。描述文案的寫法，本系列另有專文說明賣點與規格的整理方式。

評價與問答：讓其他顧客幫你說話

評價是商品頁上最有說服力的內容。設計時注意：

• 評分摘要放在品名附近，顯示平均分數與評價數量，點擊可跳到評價區。
• 提供篩選與排序：依星等、最新、有照片篩選，讓顧客快速看到負評在抱怨什麼。
• 顧客照片可以瀏覽：Baymard 2026 年評比指出 63% 的網站沒有讓使用者在不同評價的照片之間連續瀏覽。
• 回應負評：同一份評比中，89% 的網站沒有回應負評。店家用不同樣式標示的官方回覆，說明處理方式，反而能建立信任。

切記評價必須真實，不可自己灌評或只顯示好評。合法收集評價的方法可以參考商品評價與 UGC。

運送、付款與退貨：在商品頁就先講清楚

很多店家把運費與退貨規定藏在頁尾的「購物須知」，顧客要到結帳時才看到，結果就是放棄。Baymard 的調查顯示，額外費用（運費、稅金、手續費）過高是美國消費者在結帳時放棄的最主要原因。商品頁上建議顯示：

• 運費或免運門檻：例如「全館滿 NT$ 1,200 免運，超商取貨 NT$ 60」（金額為假設範例）。Baymard 2026 年評比指出 67% 的網站沒有在購買區附近提供訂單總成本的估算。
• 出貨與到貨時間：「現貨，下午 3 點前下單當日出貨」比「盡快出貨」更讓人安心。
• 取貨方式：宅配、7-ELEVEN／全家等超商取貨、門市自取。
• 付款方式：信用卡、行動支付、貨到付款等，用小圖示呈現即可。
• 退換貨規定：用一兩句白話說明，並連到完整政策頁。依消保法，通訊交易原則上享有 7 天猶豫期（法定例外除外），這點不要寫得模糊。Baymard 的評比中，44% 的網站沒有從商品主要內容連到退貨政策。

這些資訊同時也是信任訊號，能讓第一次造訪的顧客更放心下單。

商品頁設計檢查清單

上線或改版前，可以用這份清單逐項檢查：

常見問題

商品頁一定要放影片嗎？

不一定。影片適合需要示範操作、材質會動或難以用照片說明的商品。Baymard 的研究提醒，很多使用者會略過影片，因此影片應該是照片的補充，不能取代比例圖與細節圖。

商品頁的資訊很多，要用頁籤還是一頁捲到底？

兩種都可行，重點是顧客找得到資訊。手機上常用可收合區塊，但要讓標題清楚寫出內容，例如「尺寸與材質」「運送與退貨」，而不是只寫「更多資訊」。

新商品還沒有評價怎麼辦？

可以先用常見問題、詳細規格與實測照片補足說服力，並在顧客收貨後主動邀請留下評價。不要自己撰寫假評價，這會損害信任，也可能違反相關法規。

商品頁要不要放推薦商品？

可以，但不要干擾購買區。搭配購買或相似商品建議放在描述與評價之後，並確實和目前商品相關。

結語：把每一個「為什麼不買」都先回答

好的商品頁設計，本質上就是把顧客會猶豫的理由一個一個先回答：看不清楚、不知道尺寸、不確定運費、擔心不能退。先用上面的清單盤點熱銷前十名的商品頁，通常就能找到最值得修的地方。想了解從平台選擇到上線行銷的全貌，可以回到電商網站架設完整指南。

如果你想重新規劃商品頁版型，網軍行銷的電商網站建置服務可以協助從資訊架構、版面到技術實作一起檢視。

參考資料

• Baymard Institute，Product Page UX 2026: 10 Pitfalls and Best Practices：https://baymard.com/blog/current-state-ecommerce-product-page-ux
• Baymard Institute，Product Page UX: Provide at Least One "In Scale" Image：https://baymard.com/blog/in-scale-product-images
• Baymard Institute，Product Details Page UX Research：https://baymard.com/research/product-page
• Baymard Institute，Cart Abandonment Rate Statistics：https://baymard.com/lists/cart-abandonment-rate
• Shopify，Product Page: Examples + Best Practices：https://www.shopify.com/blog/product-page