畫面・功能Product detail page・商品頁
商品詳情頁
商品詳情頁是把單一商品的照片・價格・選項・配送・退換貨說明集中在一起,讓客人下定決心購買的頁面。
就像店員在門市拿著商品一項項為客人說明。在線上,這個頁面代替店員開口。
再多說一點
客人購買前會問的問題(尺寸・材質・配送時間・能否換貨),頁面要先一步回答。
用一整張長圖做成的商品頁很常見,但圖片裡的文字搜尋引擎和AI很難讀取。核心資訊最好也用文字寫出來。
網路銷售依商品種類,有規定必須告知的資訊(商品資訊提供公告)以及退換貨・退款說明。
商品詳情頁的資訊要依什麼順序放?
詳情頁從上面開始放「決定要不要買的資訊」,越往下放「用來確認的資訊」就對了。客人看了照片・價格・選項產生興趣後,才會往下捲去確認配送・換貨等細節。
易用性研究機構Nielsen Norman Group也強調,商品頁要讓客人能快速找到價格・選項・配送這類關鍵資訊。資訊如果散落在頁面各處,客人不是留言發問,就是直接離開。
在手機上,這個順序更重要。螢幕窄,如果照片下面沒有馬上看到價格・選項・購買按鈕,客人就算喜歡商品,也得花時間找要在哪裡買。
表格可以左右滑動查看
| 位置 | 要放的資訊 | 原因 |
|---|---|---|
| 最上方 | 主圖、商品名稱、價格、選項、購買按鈕 | 決定要不要買所需要的資訊 |
| 緊接在下方 | 一句話特色、三個主要優點 | 快速說明為什麼選這個商品 |
| 中段 | 細節照、使用情境、尺寸・材質說明 | 補足客人無法親眼看到的部分 |
| 下方 | 評論、常見問題 | 用其他客人的經驗減少猶豫 |
| 最下方 | 商品資訊提供公告、配送・換貨・退款說明 | 一定要告知的資訊完整放進去 |
商品資訊提供公告要寫哪些內容?
商品資訊提供公告是指韓國公平交易委員會訂定的《電子商務等商品資訊提供相關公告》,每一類商品都規定了必須告知的項目。例如服飾要寫材質・顏色・尺寸・製造者・洗滌方式,加工食品則要寫原料・容量・有效期限等項目。
先確認自己的商品屬於哪個商品類別,再把該類別的項目整理成表格就可以了。確切項目可以到國家法令資訊中心查閱公告原文。
賣家資訊和撤回購買(取消訂單)說明也要一併準備。《電子商務消費者保護法》規定要標示店名・負責人・營業登記號碼等賣家資訊,並以收到商品起7日內可撤回購買為基本原則。不過也有例外,請查閱原文或向專家確認。
商品詳情頁的照片要怎麼拍、怎麼挑?
照片要代替客人在店裡把商品拿在手上時會確認的地方。所以比起一張漂亮的主圖,好幾張各有用途的照片更實用。
修得和實際顏色不一樣的照片,是換貨・退貨最常見的原因之一。請在自然光下拍攝,顏色很重要的商品,也要附上「顏色可能因螢幕而略有差異」這類說明。
照片越多越好,但不能讓頁面變重。細節照依螢幕大小縮小,下方的照片設定成晚一點再載入,就算放很多照片,首屏也不會變慢。
如果自己拍有困難,至少主圖交給專業攝影師,細節・使用情境用手機拍也沒關係。重要的是每張照片的用途要清楚。
- 主圖:在明亮的背景下,讓商品全貌一目了然
- 細節照:材質、收邊、車縫・釉色這類近拍畫面
- 尺寸比較照:和手・杯子・尺這類能推估大小的物品一起拍
- 使用情境照:實際使用或穿上的樣子
- 內容物照:盒子裡裝了哪些東西
商品詳情頁要依什麼順序製作?
正確的順序不是先從設計開始,而是先蒐集客人的問題。問題的答案整理好之後,照片和文案只要負責把答案呈現出來就好。
如果不知道文案怎麼寫,直接把客人的問題當標題、答案當內文也可以。像在「可以禮物包裝嗎?」這個問題下面寫「可以,我們會幫您包裝並附上留言卡」,就是一個好讀的詳情頁。
照片和文字分開上傳,日後價格或選項有變動時也比較好改。如果是一整張長圖,就算只改一個字,也得重做整張圖。
- 01蒐集10個左右客人在店裡・訊息中常問的問題。
- 02在商品資訊提供公告中,確認自己商品類別的必填項目。
- 03先用文字整理好問題和必填項目的答案。
- 04決定要用來呈現答案的照片清單,然後拍攝。
- 05依照上方表格的順序配置照片和文字。
- 06確認在手機上不用捲動就看得到價格・選項・購買按鈕。
- 07上線後依照收到的問題,持續補充到常見問題區。
怎麼讓搜尋引擎和AI正確讀懂商品資訊?
把關鍵資訊用文字寫出來,再用「結構化資料」多告訴一次就行了。結構化資料是把商品名稱・價格・庫存・評論評分這類資訊,用搜尋引擎容易讀取的格式寫在頁面裡的設定。
Google搜尋中心說明,加入商品結構化資料後,搜尋結果可能會一併顯示價格・庫存・評分等資訊。不過要不要顯示由Google判斷,加了不代表一定會出現;而且結構化資料的內容必須和頁面上實際看得到的資訊一致。
只用一整張長圖做成的詳情頁,在這方面比較吃虧。圖片裡的文字搜尋引擎和AI很難準確讀取,最好把同樣的資訊也用文字留下來。
AI搜尋介紹商品時,也是根據頁面上的文字來產生回答,所以把材質・尺寸・使用方式等資訊寫成句子,自家商品被正確介紹的機會就會提高。
各行業的商品詳情頁範例與常見錯誤有哪些?
小店家商品數量雖少,卻能把每個商品的故事講得更深入。像下面這樣依行業補上合適的資訊,就能做出和大型購物網站不一樣的優勢。
常見的錯誤是把運費和換貨規則只用小字放在頁面最下方。客人如果到結帳前才第一次看到運費,很容易就放棄購買,請把運費一併寫在價格附近。
也要避免把選項價格藏起來。如果只把基本價格寫得很大,每選一個選項金額就往上加,客人很容易失望,最好一開始就把各選項的價格一起列出來。
可以問製作公司:在商品上架畫面中,老闆能不能自己輸入公告項目・選項・運費,以及能不能不用一整張長圖、改成文字和照片分開上傳。
- 工作室陶器:說明是手工製作,每件的形狀・顏色都略有不同,以及能否使用洗碗機・微波爐。
- 咖啡廳濾掛咖啡組:烘焙日期、咖啡豆產地、禮物包裝・留言卡選項。
- 美髮店居家保養品:使用順序、依髮質推薦、容量與可使用期間。
- 網路服飾:實際測量尺寸表、模特兒身高・穿著尺寸、洗滌方式。
舉例來說
- 工作室的戒指:在照片下方用文字整理量尺寸的方法、材質、製作時間、能否刻字。
- 咖啡廳的咖啡豆:用表格呈現產地・烘焙日期・風味說明・研磨選項。
確認這幾點就好
- 價格・選項・配送時間・換貨規則是否用文字寫出來
- 照片色調是否和實際商品一致
- 客人常問的問題,頁面中是否都有答案
我的店需要嗎?
在網站上販售或介紹商品的話就需要。
在ISSYMO
客製功能網站的購物網站・電商型,預設就包含商品販售・線上付款。其他類型或一頁式網站,可以透過「商品販售」選項加上商品列表與詳情頁,以及購物車・訂單功能。如果不擅長寫文案,也有「文案代寫」選項。
查看選項常見問題
參考資料
最後更新日