官網『商品詳情頁』(Product Detail Page / PDP) 設計完整攻略：中小企業如何用一頁把商品從『看看』變成『下單』

「網站流量明明有進來，商品頁看了半天卻沒有人加購物車、也沒有人來詢問。」這是中小企業做電商或做展示型官網最常遇到的卡點。首頁跟分類頁多半是把訪客帶進來的入口，但真正決定「買不買」、「問不問」的分水嶺，其實是商品詳情頁（Product Detail Page，簡稱 PDP）。

PDP 是全站轉換率最高的頁面之一，也是最多老闆放最少心思在上面的一頁——照片隨便貼、規格寫得不清楚、價格藏在角落、加入購物車按鈕小到看不見。今天這篇整理中小企業把商品詳情頁做對的完整攻略，從版面結構、內容元素到轉換設計，一次講清楚，讓你的商品從「看看」變成「下單」。

Photo by Jonathan Cosens Photography on Unsplash

一、為什麼商品詳情頁決定成敗

訪客不是笨蛋，他們在 PDP 停留的每一秒都在心裡問三件事：這東西是什麼？值不值這個價？我會不會後悔？如果這三個問題沒被回答清楚，他們就會關掉分頁去看別家。

電商業界一個公開的資料是：優化良好的 PDP，跟隨便放照片加規格的 PDP，轉換率可以差到 3 到 5 倍。同樣是每天 100 個訪客到商品頁，前者一天可能收 5 張訂單，後者可能整週都沒有一張。差距就在於：你有沒有把該講的講清楚、該讓客戶放心的地方做到位。

展示型官網（例如工程行、機械廠、農產品品牌）也一樣。就算不做線上結帳，客戶點進「產品介紹」頁後如果找不到型號規格、看不到實際使用照、也沒有明顯的詢問按鈕，他們就會直接離開，連詢問單都不會填。

二、商品詳情頁必備的 8 個區塊

把 PDP 拆解，其實不管賣什麼，該有的區塊就那幾個。以下是最基本、也最有效的結構：

1. 商品主圖區（含縮圖切換或輪播）：至少 5 張以上，涵蓋正面、側面、使用情境、細節放大、尺寸比對。手機時代主圖建議做成可點放大、可左右滑動。
2. 商品標題與副標：標題寫商品名+關鍵賣點（例：「304 不鏽鋼保溫瓶 500ml｜24 小時保冷」），副標補一句情境或差異化說明。
3. 價格區（含優惠、分期、原價劃線）：字要大、位置要顯眼，如果有折扣就把原價劃線放旁邊，讓客戶看到「省了多少」。
4. 規格選項區：顏色、尺寸、容量、口味等，用色塊或膠囊按鈕呈現，避免用下拉選單（下拉選單多一次點擊，多一次流失）。
5. 主要行動按鈕（Add to Cart / 立即購買 / 詢價）：這是全頁最重要的按鈕，顏色要跳、位置要好按（滑到底也還看得到最好）。
6. 商品描述與規格表：分為「故事型描述」跟「條列型規格」兩塊。前者講賣點跟情境，後者放尺寸、材質、產地等冷冰冰的事實。
7. 信任元素：客戶評價、星等、實拍照、專業認證徽章、退換貨政策、運費說明。
8. 相關商品或搭配推薦：讓客戶就算不買這件也有下一件可以看，減少關掉分頁的機率。

三、商品照片：一張好照片抵得上十行文案

PDP 的照片是全頁最貴重的資產，也是最容易被中小企業省略的地方。很多老闆會拿手機隨便拍幾張、光線也不對、背景也雜亂，然後上傳到網站就當交差。結果是：訪客看不出商品的質感、也看不出實際大小，自然不敢下單。

建議的照片組合：白底去背主圖 1 張、45 度角商品照 1 張、細節近拍 2 張、使用情境照 1 張、尺寸比對照 1 張。如果預算允許，再加一段 15 秒商品短片，把 360 度轉一圈的樣子錄下來，效果比十張照片還好。

白底照拿來當縮圖跟主圖，SEO 上也比較容易被 Google 圖片搜尋收錄。情境照是拿來讓客戶「腦補」把商品放進自己生活的樣子——例如賣保溫瓶，就拍一張放在辦公桌旁的樣子；賣戶外燈具，就拍晚上在庭院點亮的樣子。

Photo by Declan Sun on Unsplash

四、價格區與 CTA：讓客戶不用「找」按鈕

PDP 上最常見的災難，就是加入購物車按鈕跟一般連結長得一樣。訪客滑到規格選項下面，找不到明顯的按鈕，遲疑一下就滑走了。

幾個實務建議：
・主 CTA 用品牌的強調色，字體加大、按鈕留白多，避免旁邊塞太多次要按鈕搶注意力。
・按鈕文案要具體：「加入購物車」比「確認」好，「立即預約諮詢」比「送出」好。
・手機版建議做「Sticky Add to Cart」（黏在螢幕底部的加購鈕），這樣客戶滑到頁面最下面看評價時，還能一鍵下手。
・價格旁邊放三個小資訊：庫存狀態（「剩 3 件」）、配送時間（「今日下單 24 小時內出貨」）、退換貨政策（「7 天鑑賞期」）。這三個東西合起來，就是打消猶豫的三支箭。

五、規格選項別讓客戶動腦

選顏色、選尺寸、選規格這一段是流失率最高的地方。設計原則只有一個：選項要一眼看得懂、一次點得到。

顏色選擇用色塊呈現（不要用文字下拉），尺寸用膠囊按鈕（S/M/L 直接排出來），已售完的選項要用刪除線或灰階明顯標示，不要讓客戶點了才發現「這個沒貨」。如果選項組合會影響價格或庫存，選完之後主圖跟價格要即時更新，讓客戶清楚知道「我選的是這個」。

另外一個常被忽略的：選項如果需要「試穿建議」或「尺寸對照表」，一定要放在旁邊。不要放在頁尾也不要藏在下拉，因為客戶正在猶豫要選 M 還是 L 的當下，才是他最需要這張表的時候。

六、信任元素：真實評價比廣告詞有用十倍

訪客不認識你這家公司，也沒摸過你這件商品，他要下單前一定會找一個「別人買了覺得好」的證據。這個證據就是客戶評價、實拍照、以及第三方認證。

做評價區塊時建議：
・顯示星等平均分數（例：4.7 / 5，共 128 則評價）。
・讓客戶可以按「有幫助」排序，把最實用的評價浮上來。
・展示帶照片的評價（客戶自拍實物照的可信度遠高於商家自拍）。
・如果有負評，不要刪，也不要壓下去。適當回覆一句「感謝反饋，已改善」反而讓其他訪客覺得你很誠實。
・如果商品剛上架還沒評價，可以先放公司理念、品牌故事、退換貨承諾這類「軟性信任」內容補位。

認證徽章例如 SGS、ISO、有機認證、原廠授權等，可以放在價格旁邊或規格區下方。徽章不需要做很大，只要小小一排出現，訪客就會下意識覺得「這家有在做事」。

Photo by Alan Jiang on Unsplash

七、商品描述：先講賣點，再講規格

很多商品頁把描述寫成「規格表 + 官方冷冰冰的介紹」，讀起來像產品說明書，訪客看兩行就滑走。比較好的寫法是「故事 + 規格」兩段式。

故事段落用 3 到 5 句話講清楚：
・這個商品解決什麼問題？
・跟同類商品比，有什麼不同？
・什麼樣的人最適合買？
・使用時是什麼感覺？

規格段落再用條列式列出：材質、尺寸、重量、產地、保固、內容物、注意事項。條列式的好處是客戶可以「掃描式閱讀」——不用真的讀完，眼睛掃過就能找到他要的資訊。

另外一個小技巧：把常見問題（FAQ）直接放在商品頁下方。例如「這件會縮水嗎？」「可以送禮嗎？」「洗滌方式？」訪客的每個疑問你都提前回答了，就少一次去找客服的機會，也少一次因為沒得到答案而放棄的機會。

八、手機版最容易被忽略的細節

台灣現在超過七成的電商流量來自手機。但很多 PDP 是拿電腦版直接縮小到手機顯示，結果字太小、按鈕太擠、照片要滑半天。這是致命的。

手機版 PDP 該做對的幾件事：
・照片區改成可左右滑動的輪播，不要做成上下堆疊要滑很久。
・價格跟主 CTA 之間不要塞太多內容，讓客戶滑一次就能看到。
・「加入購物車」按鈕做成 Sticky 黏底，滑到哪都按得到。
・規格選項按鈕加大，手指按得準（每個按鈕至少 44px x 44px）。
・數量選擇器不要用微小的 + / − 按鈕，改成可以直接輸入或彈出滾輪選數字。

九、SEO 加分：讓 Google 也「看得懂」你的商品頁

PDP 除了給人看，也要給 Google 看。做對 SEO 之後，你的商品可能會出現在「XX 商品 推薦」的搜尋結果第一頁，帶來免費流量。

重點做法：
・商品標題要包含「商品類別 + 品牌 + 型號 + 關鍵屬性」。
・URL 用有意義的英文或商品編號，不要用亂碼。
・加上 Schema.org 的 Product 結構化資料（Google Search Console 有教學），讓搜尋結果直接顯示價格、星等、庫存狀態。
・每張商品圖都加 ALT 文字，描述商品是什麼。
・如果同款商品有多個規格頁面，記得用 canonical 標籤指定主頁，避免被 Google 判定為重複內容。

結語：從一個商品頁開始改，看數字說話

PDP 的優化不是一次改完就完事的，是持續 A/B 測試出來的。建議選一個銷量最好或流量最高的商品頁當試驗品，先做以下三件事：換掉主圖、加大主 CTA 按鈕、把客戶評價往上移。兩週後看數據，加入購物車率跟結帳完成率有沒有動，再決定下一步。

如果你的網站現在的商品頁看起來就是一張圖、一段描述、一個小小按鈕，別擔心，這代表你還有很大的優化空間。把上面這 9 個區塊逐一補上、把 3 個手機版細節做對，通常兩週內就能看到轉換率明顯提升。

對台灣中小企業來說，商品詳情頁不是設計問題，是營收問題。花時間把它做對，比多投一萬塊廣告更划算。從今天開始，打開你的網站找一個商品頁，對照上面的清單一個一個檢查——你會發現，改善的機會其實比想像中還多。