購物網站版型怎麼選？6 種風格各適合賣什麼

要做購物網站，很多人會先去逛佈景主題（版型）的示範站，每一個都很漂亮，越看越難決定。

其實版型不只是好不好看，更重要的是適合賣什麼、適合怎麼賣。同樣是購物網站，賣設計師燈具和賣日用品，客人的逛法完全不同。

我們實際看了 6 個購物版型的示範站，加上台灣大型購物網站的商品頁，整理成 6 種風格。每一種都附上連結，你可以自己點進去逛；示範站上的照片、文字屬於各自的版型作者，這篇只描述版面的做法。

1. 極簡風：適合單價高、本身就好看的商品

例子：WoodMart 版型的極簡風示範站。

• 白色底，商品照片都放在一樣的淺灰色背景上，像在展覽。
• 第一屏一個商品大圖、一行細而大的標題、一個小小的黑色按鈕。
• 商品一排 4 個，間距很大，名稱和價格的字很小、很淡。
• 頁尾只有訂閱電子報和社群連結。
• 手機版在畫面最下面固定一排工具列：商店、收藏、會員、比較。

適合：家具、燈具、選物店、設計小物，商品本身有設計感、單價比較高。

要注意：極簡風最吃照片。每張商品照的背景、光線、角度都要一致，混進幾張手機隨手拍的照片，整個網站就會看起來很空、很廉價。

2. 自然手作風：適合農產、食品、手作

例子：Green Farm 版型示範站。

• 米色、帶紙張紋路的背景，綠色當點綴色。
• 粗體的窄字標題，關鍵字換成綠色；介紹段落下面放農場主人的手寫簽名。
• 商品分類是一格格的大照片，上面疊白色的線條圖示：蔬菜、水果、香草、莓果、蛋奶。
• 往下有當季推薦、一排保證（品質、配送、價格）、顧客的話配一張牧場照片、部落格文章、活動行事曆。

適合：小農、食品、烘焙、茶葉、手作品。客人買的不只是東西，還有「誰種的、誰做的」。

要注意：這種風格要有「人」和「產地」的真實照片撐起來。圖庫的農場照片很多人用過，自己拍的田、工作室、製作過程，比任何版型都有說服力。

3. 形象大圖風：適合有品牌形象的服飾

例子：Zorka 版型的第 9 款首頁。

• 每一個分類就是一整面的大照片，中間一行很大的英文標題、兩個按鈕，往下捲就像在翻一本型錄。
• 頁首最上面一行放電話、信箱、地址；搜尋框可以先選分類再搜尋。

適合：服飾、包包、飾品，有固定拍攝形象照的品牌。

要注意：首頁看不到商品，要先點進分類。想快速找東西、比價格的客人會多按好幾下。每季要換一次大圖，沒有新照片就會顯得過時。

4. 運動活力風：適合運動、戶外、年輕品牌

例子：Rey 版型的 Amsterdam 示範站。

• 粗斜體的大寫標題，按鈕和色塊都斜斜地切一刀，黑、白、亮黃三色。
• 第一屏就放一個「首次購買打折」的訂閱框。
• 分類依運動項目排：瑜伽、足球、網球、游泳等。

適合：運動用品、戶外裝備、街頭服飾，客群年輕、喜歡有速度感的東西。

要注意：斜切、粗斜體很搶眼，用在每一個區塊會很累。挑幾個重點地方用就好，商品列表還是要整齊好讀。

5. 促銷商城風：適合商品多、客人會比價

例子：Shoptimizer 版型示範站，以及 PChome 24h 購物的商品頁。

Shoptimizer 示範站把「讓人下單」放在第一位：

• 最上面一行寫客服電話和免運門檻。
• 頁首有很大的搜尋框，旁邊是會員、客服、結帳三個圖示。
• 一條橘色的促銷橫條寫著折扣碼，第一屏是大大的折扣標題和一個綠色按鈕。
• 往下有分類、最新商品、為什麼選我們、顧客評價、熱賣商品、販售的品牌，最後一排保證：免運、30 天退貨、保固、安全結帳，頁尾放付款方式的圖示。

PChome 24h 的商品頁則是台灣大型購物網站的典型樣子：紅色頁首、很長的搜尋列、一整排分類；商品頁有照片、原價劃掉的特價、一長串優惠活動、「加入購物車」和「立即購買」兩個按鈕、付款方式和到貨時間，往下是評價分布、商品介紹長圖、規格和「別人也看了」。

適合：商品上百樣、經常做促銷、客人會比價格和到貨時間的網站。

要注意：資訊很多，品牌感比較弱。商品只有十幾樣的小店用這種版型，會顯得空蕩蕩，促銷條一直掛著也會讓人覺得「永遠在特價」。

6. 客製商品風：適合印刷、刻字、客製禮品

例子：Astra 版型的 Custom Printing Pro 範本。

• 商品照片拼成一面格子牆，格子裡直接寫「印一件 T 恤多少錢」。
• 一條限時優惠的橫條、依商品分頁（T 恤、馬克杯）的熱賣商品、一段介紹影片。
• 每個大區塊都有一個價格和一個按鈕，例如「印一個馬克杯多少錢」，旁邊就是「去看看」。

適合：客製 T 恤、印刷、刻字、客製禮品。

要注意：客人最想知道的是「可以怎麼客製」「多少錢」「多久拿到」。版型再漂亮，這三件事沒寫清楚，客人還是會一直來問。

選版型前，先回答 4 個問題

1. 商品有幾樣？ 十幾樣適合極簡風或形象大圖風；上百樣就需要好用的搜尋和分類。
2. 照片拍得好嗎？ 極簡風、形象大圖風最吃照片。照片普通，就選資訊比較多、靠文字和規格說服人的版型。
3. 客人怎麼買？ 看了喜歡就買（衝動型）、比較規格才買（理性型）、比價才買（價格型），需要的版面完全不同。
4. 手機上好不好按？ 大部分客人用手機逛。用手機打開示範站，試試看找商品、加入購物車、結帳要按幾下。

示範站和你上線後的網站，會不一樣

示範站的照片都是專業拍攝，商品數量剛好、名稱剛好一樣長。換上自己的照片、很長的商品名稱、沒有折扣的價格，看起來就會不一樣。選版型時，拿自己的一兩個真實商品去想像。

另外，有些版型的商品區要等程式載入後才出現，網路慢的時候會先看到一片灰色格子。用手機的行動網路實際開開看，比在辦公室的電腦上看準。

示範站上的照片也不能直接拿來用，要換成自己的。想參考別人的網站，可以先看〈參考別人的網站，學什麼、不學什麼？〉；商品頁要放哪些資訊，可以看〈購物網站商品頁要放什麼〉；開店前的金流、物流、發票，可以看〈開網路商店前要準備什麼〉。

正威可以幫什麼

正威網路行銷是 25 年經驗的基隆網頁設計工作室，也提供台北網頁設計與全台灣的網站服務。電商購物車網站方案包含購物車與金流串接、會員與訂單管理、商品分類與商品頁 SEO、物流與發票整合，版面會依你的商品和客人的買法來規劃。

不知道自己的商品適合哪一種風格？歡迎免費諮詢。