【電商百問95】如何設計電商商品頁?

電商百問第95集，告訴你電商商品頁如何設計，讓你日進斗金、賺錢如有神助。電商商品頁的呈現方式，會極大程度的影響消費者會不會下單。也就說，我們透過廣告或SEO讓消費者進到我們的網站，然後透過電商產品頁勾起消費者的購買慾，再透過快速下單的購物車的設計讓消費者無腦購買，這其實是一整段的連續設計。

電商商品頁為何重要

電商產品頁如何設計出能勾起消費者購買慾的這件事情更是我們開店平台不斷再研究的問題，像我們CYBERBIZ在設計網頁時，就是依照「最高轉換率」為目的進行版型設計與開發。因此，時常被人說是「套版」網站。

但我得老實說，品牌做電商，能不能提高訂單成交率才是你要關心的硬指標。效果好，版面長的醜又不會怎麼樣。就像我們家的版型設計都是考量過的，提供給客戶的一定是我們測量過，成交轉換率最高的模板。

你就只需要改改字，上上圖，設定下商品就好了，不需要再多費心提高轉換率。因此，不管是設計或專案執行的時間都能大幅縮短，拖最久的，往往是商品上架而已。如果你有幾千隻商品要上架，大概就排1~2個月來完成。否則，在系統一開通時，其實就可以上線開賣了。

像我們家CYBERBIZ的系統，如果你的商品數在五十隻以內，圖文都具備的狀況下，只要2個小時就可以上線並投放廣告，這是你去找網頁公司開發或自架站都做不到的事情，一個流程跑下來沒有半年想要開張根本是難上加難。做電商要的是訂單。一切以順利成交訂單為前提。做出來的購物網站超級好看，但不能幫你賺錢，特效再多再精美都是假的。

關於電商商品頁，消費者注重的地方與你注重的地方完全不同。至少我實務上的經驗是這樣子。以下說明我所整理出的最具差異的地方在哪邊，至於有沒有道理，你可以自行判斷：

電商商品頁的品牌觀點

1. 外觀要求：美觀、潮、炫
2. 商品有上就好
3. 一定要可以加入會員
4. 一定要有某某功能（比如加入會員需可填寫特定資料，但消費者根本不想填）

品牌在做網頁設計時，很容易有個心態是「炫」這個追求比「賣」還要來得重。總想說花錢是老大，因此以改來改去、刁難設計公司為樂。我有很多設計師朋友，每個人一抓一大把這種結不了案的故事。

而網頁設計公司是按照「結案」來收尾款的，因此重心將放在「如何結案」而非協助品牌佈局出真正適合消費者成交的購物網站。做出來的網站，往往是專門討老闆歡心用的，畢竟老闆爽了，收款就會比較容易。而老闆花個十幾萬請人做網頁設計，也喜歡出一張嘴，以並非電商專業的手指輕輕一劃：「這裡要改一下！」指點江山。

電商商品頁的消費者觀點

1. 購物流程簡單
2. 不要叫我先加會員填一大堆資料
3. 不要叫我自己算優惠卷怎麼用
4. 活動豐富但設計簡單
5. 商品主圖好看
6. 商品敘述圖詳細

我相信你看了消費者觀點之後一定超級有感的，消費者要的其實很簡單，好逛、好買、好便宜。他根本不在意你花了多少錢做動畫效果(動畫還會影響網頁的載入速度)，他只在乎能不能在這邊買到他想要的商品。所以很多興致沖沖跑去找網頁公司開發電商網站的人，就會做出很多無效甚至是會降低轉換率的操作。而就像我們前面說的，很多網頁公司都會想辦法滿足你的需求，反正系統功能開發越多，報價就可以越高，反正他收到錢就結案了，後面你運作起不起得來，也不甘他的事。

但像我們CYBERBIZ這樣的開店平台就完全不是這種想法了，對我們來說，客戶有賺錢才會繼續使用我們的系統，講白了就是我們跟客戶的利益是牽連在一起的，所以我們自然會花更多的時間，去研究跟開發能幫客戶提高營業額的方法與功能。就像光是電商商品頁，我們就花了很多心思才研究出下面的這些事情:

1. 商品主圖
2. 商品敘述圖

電商商品頁常忽略的圖片設計01：商品主圖

商品主圖是吸引消費者是否點擊進來的重要依據。而大多數品牌都只有拿著廠商給的去背圖就直接上架商品，商品主圖也就放上去了。

商品主圖的設計感，在大多數情況下直接左右轉換率的高低。就像你去交友網站逛，一堆人的大頭貼，有人隨便拍；有人認真拍，那麼自然好看、優質的大頭貼吸引更多人點擊。這是很自然的事情，但同樣的道理搬到電商上，又會有一些差異。很常遇到的是，網頁公司或架站平台提供給品牌的是一個很精緻的網站，但因為品牌不熟或沒有能力去「做主圖」，導致商品圖片跟當初請人設計的質感差別非常大。

電商商品頁商品主圖設計的重點

商品圖就商品圖，有什麼差嗎？差別在消費者會不會點進來。因此，一個商品主圖具有以下特性：

1. 列表處主圖：一張決勝負
2. 商品內頁處：多張展示特色

電商商品頁的列表處主圖：一張決勝負

但通常點進去是好幾張，像是蝦皮一樣，但是我們還是默認一張。因為在商品列表頁面時，只會展示第一張主圖。

電商商品頁的商品內頁處：多張展示特色

展示商品主要特色，讓人家決定要不要繼續把你的商品敘述圖看完。

電商商品頁的商品主圖為何重要

身為商品主圖，最重要的任務就是吸引消費者點擊進來。也只有點擊進來才有後續詳細介紹的機會。這也是剛才說的吸引點擊的問題。主圖的任務是為了要吸引點擊，必且要做很多的測試。比方說你是賣果乾的品牌，那你的主圖到底是要擺上水果比較吸引點擊，還是擺上你的品牌包裝比較吸引點擊？

這個其實也不用猜，我們就直接做A/B TEST。一週之內，透過後台數據，自然知道要使用哪一個版本的商品主圖。這就是我們在優化商品主圖會做的事情。

流量都是花錢買的，但是主圖很爛，成效就直接對半砍。如果你沒有製圖的能力或聘設計的經費，建議至少去找一個外包設計幫你做幾個可以套著換的模板，這樣至少能夠讓整體的版面風格不會落差太大。要記得以下兩點:

• 好的商品主圖能夠贏得「點擊」
•  點擊就是「有效流量」，加入購物車的前兩步

電商商品頁常忽略的圖片設計02：商品敘述圖

商品敘述圖講的是你進入商品頁之後，一連串的圖片文案。我們會這樣說，商品敘述圖是你全年無休的業務員，它在做的事情就是「導購」，促進消費者的購買慾。所以絕對不是造本宣科的把你產品包裝上的文字一字不漏地KEY進來就好，我還有看過有一些人連KEY都不KEY，就直接拍產品包裝就當商品敘述圖的。

商品敘述圖是有導購劇本的，這是一個洗腦的過程。我們先用商品主圖吸引消費者進網站，再讓他透過閱讀商品敘述圖，才來決定要不要買。商品敘述的劇本，就是一整套的「洗腦」與「說服」的教材。

除了要做得很好看之外，消費者想要的資訊、你要溝通的痛點或癢點、法律背書、見證案例等等的都要掛上去。不要怕敘述圖太長，手機在滑很快的，你十幾張圖，怎麼滑也不過10秒鐘。

電商商品頁常犯的設計錯誤

就像剛才說的，電商商品頁是有設計劇本的。如果你就按自己的直覺做，就很容易犯了下面的幾個錯誤:

1. 頁面資訊太複雜
2. 相關商品和推薦太多
3. 敘述文字太多
4. 購買流程太複雜

電商商品頁常犯的設計錯誤01:頁面資訊太複雜

我這邊說的跟上面講的內容太長是兩件事情，而是資訊雜亂。例如你在講商品優點的時候用紅色的色塊、在使用者見證用藍色的色塊、在講競品分析的時候又換了另一種顏色，然後為了要強調內容還字體忽大忽小、有加粗沒加粗。讓整個畫面看起來五彩斑斕，消費者看都要看花了眼。

並不是說不能夠換顏色，而是當我們的顏色越複雜的時候，消費者的專注力越難放在產品身上，所以好的設計就是要針對商品所屬性質和定位，選擇相對應的核心設計功能點，並使用大量優質風格統一的圖片營造代入感。

電商商品頁常犯的設計錯誤02:相關商品和推薦太多

電商商品頁的相關產品推薦位置太靠前，會有一種喧賓奪主的感覺。這可能會形成很強的商業感，對銷售是很不利。而我們要打造一種沉溺感，建議你建立「猜你喜歡」的時候要仔細思考品項，找相關度特別高、精準的商品，來平衡用戶體驗的問題。總的來說，電商商品頁的主要通功能還是放在應該主要作為展示商品屬性和促發購買慾望，不要在這個頁面就給消費者太多組合商品資訊，這樣只會造成消費哲者的困惑跟猶豫，反而不利促購。

電商商品頁常犯的設計錯誤03:敘述文字太多

文案是很重要的，但是在電商商品頁上，一張好的照片、一支好的影片更勝過你的千言萬語。謹記一個原則，有圖放圖，有影片放影片，能多豐富就多豐富。不要忘了消費者看這個頁面不會想花太多時間，你如果放了一堆文字也只會適得其反而已。

電商商品頁常犯的設計錯誤04:購買流程太複雜

這個就真的是技術了，你一定有遇過那種結帳前除了要你註冊外，還需要填一大堆資料的電商網站，這樣的做法只會拉低你的結帳效率。簡化購買流程的目的就是提高結帳率，想做到這件事情就有很多種技巧，像我們家CYBERBIZ就有以下五招:

1. 快速登入結帳
2. 購物時自動註冊
3. 多元的付款方式
4. 一頁結帳讓轉換率馬上翻倍
5. 把加價購跟滿額贈做在同一頁

別的不提，光是我們的「一頁結帳」就有客戶用了之後，直接提高一倍的轉換率。如果你對這些功能如何簡化購買流程有興趣的話，歡迎參考【電商百問83】如何提高品牌官網結帳率?這篇文章。

電商商品頁設計超好用6招

這邊我再推薦你超好用的電商商品頁設計6招，不一定要都用上，主要還是看你的產品特性來斟酌使用。

1. 試用報告或使用前後對比
2. 產品保證
3. KOL使用推薦
4. 場景感+沉浸式體驗
5. 多用性、易用性展示
6. 對比購買

電商商品頁設計超好用的招式01:試用報告或使用前後對比

有官方證明的消費者使用經驗分享，就是商品優質的證明，這對於以品質為核心的商品，例如家電類或護膚品等，具有很強的說服力。

而使用前後對比，對於視覺消費的商品促購效果，一直都非常的簡單又有效。例如服裝，居家用品等，你就放個對比圖就會有很強的刺激作用，進而促成訂單成交。但如果你是賣健康食品、保健品的就要小心使用這招，可以去參考競品的商品頁都是怎麼設計繞道的，會對你有很多的幫助。

電商商品頁設計超好用的招式02:產品保證

產品保證就像是貨源承諾、售後承諾、檢查報告等，又或是直接告訴消費者「我們已經保了幾千萬的保險」請你安心購買。這些內容一般都是會放在電商商品頁的最下面。利用第三方的保證，給消費者一種「可以安心買我們的產品」這種很強的心理暗示作用。

電商商品頁設計超好用的招式03:KOL使用推薦

這個就很常見了，尤其是美妝、3C類商品。特別是對於這類產品不熟悉的消費者，更會願意追隨意見領袖的專業性推薦。

電商商品頁設計超好用的招式04:場景感+沉浸式體驗

通過大量場景描述營造代入感，購物是一件帶有娛樂休閒性質的活動，營造舒適愉悅的場景感，能營造良好的消費體驗。這一點對於女性消費者尤其重要，例如在服裝、美妝等商品展示上。

我們可以透過通過大量的場景圖片，例如咖啡廳、書吧、親近大自然等來營造這種沉浸式體驗，像是你賣帳篷，就一定要有人們使用這個帳篷露營的照片讓人看到，再不濟也要找人合成一張綠地的帳篷照片。

電商商品頁設計超好用的招式05:多用性、易用性展示

對於實用性商品，可以通過多個使用場景展示他的多項功能，來強化消費者對這個商品使用價值。對於有操作門檻的商品，可以通過GIF動圖、影片等展現完整的操作過程，幫助使用者簡單快速掌握使用步驟，但要記得GIF動圖不要太多，因為他很吃流量，會延緩照片的載入速度。

電商商品頁設計超好用的招式06:對比購買

這一點利用消費心理中的「損失效應」，通過顯示限時折扣、降價提醒、組合優惠等資訊，告訴消費者，如果你此刻不買或者不是購買商品組合，就可能錯過最划算的時候，之後再也沒有這種低價的優惠了。對於消費者來說，如果此時不購買就是損失，在這種心理帶動下，訂單自然就會成交了。

小結:電商商品頁設計好，訂單自然來

上面所提到的電商商品頁設計要點及常犯錯誤，是對電商商品頁的經驗分享。我還是建議你要針對商品屬性、消費者的特性，選擇適合的電商商品頁設計要點進行操作，不要想說都做進去就對了，更好的方式是參考幾間競品的作法，你就知道的八九不離十，接下來再按照你得到的市場反饋去優惠就不會有甚麼太大的問題。

說實話現在經營電商並不是件困難的事情，這個就像考試，你沒有先做好準備，可能就考個六十分，而如果有做準備，你就可以考個八九十分。沒有考好也不用太擔心，因為電商就是每天都可以補考，只要不斷修正就可以越做越好。這些過往的經驗都會成為你未來成長茁壯的養份。如果你想要知道更多的網拍經營策略，也歡迎跟我們的開店顧問聯絡。他們都能夠跟你分享很多輔導店家的經驗，讓你花最少的力氣，賺最多的錢。