Shopify店鋪分析 | 15個(gè)產(chǎn)品頁(yè)案例，助你打造令人艷羨的在線商店！

在為Shopify在線商店設(shè)計(jì)網(wǎng)站的時(shí)候，很多人都會(huì)把重心放在首頁(yè)，因?yàn)樗怯脩粼L問網(wǎng)站時(shí)的第一印象。但是，電商網(wǎng)站的最終目標(biāo)畢竟還是銷售，需要一個(gè)出色的產(chǎn)品頁(yè)來達(dá)到這個(gè)目的。

一個(gè)有效的產(chǎn)品頁(yè)需要正確地體現(xiàn)主打產(chǎn)品的價(jià)值，它可以讓消費(fèi)者看到產(chǎn)品的樣子，向他們展示產(chǎn)品給人帶來的感覺，說服他們購(gòu)買并擁有這些產(chǎn)品。

在打造產(chǎn)品頁(yè)時(shí)，你可以選擇的主題和內(nèi)容通常都很豐富多樣。接下來將給大家展示一些產(chǎn)品頁(yè)設(shè)計(jì)，順便介紹一下他們的特色體現(xiàn)在哪里，這樣你或許就可以將其應(yīng)用到自己的產(chǎn)品頁(yè)設(shè)計(jì)中。

15個(gè)最佳產(chǎn)品頁(yè)案例

1.Luxy Hair

2.PooPourri

3.Rocky Mountain Soap Company

4.United By Blue

5.Sixty-Nine

6.Leesa

7.Manitobah Mukluks

8.Perfect Keto

9.Johnny Cupcakes

10.WP Standard

11.Master & Dynamic

12.Primal Pit Paste

13.Love Hair

14.Pilgrim

15.Holstee

01、Luxy Hair

你很容易就看得出Luxy的目標(biāo)消費(fèi)者是以女性為主，因?yàn)檫@家商店賣的就是接發(fā)產(chǎn)品。整個(gè)網(wǎng)站立馬就給人一種富有女性氣息的感覺，就連瀏覽器上的選項(xiàng)卡都有一個(gè)暖暖的愛心表情符。

因?yàn)檫@款產(chǎn)品有很多種變體，所以用戶可以通過體驗(yàn)整個(gè)過程來決定哪款最適合他們。首先可以選擇頭發(fā)的厚度，接著就是顏色，然后你會(huì)被引至特定的產(chǎn)品頁(yè)，該頁(yè)面通常包含了你所要尋找的產(chǎn)品。

這里有個(gè)很清晰的用戶行為號(hào)召（CTA, Call to Action），那就是將產(chǎn)品添加到購(gòu)物袋，但是如果你還是不太確定的話，你可以在購(gòu)買按鈕上方彈出的提示選擇觀看一段介紹視頻。

該頁(yè)面還包含了一些敏感的放棄購(gòu)物車指標(biāo)（指消費(fèi)者將物品放入購(gòu)物車后，卻沒有進(jìn)行結(jié)賬付款的行為）：運(yùn)費(fèi)與退換貨。很多數(shù)據(jù)都顯示大部分消費(fèi)者會(huì)因?yàn)檫\(yùn)費(fèi)過高而放棄付款。

除此之外，Luxy的客服團(tuán)隊(duì)可以全天候服務(wù)，這令人感到更加放心，如果對(duì)購(gòu)物有任何疑問可以直接聯(lián)系他們。

02、PooPourri

你怎么也想不到有人會(huì)把一款這么無(wú)趣的產(chǎn)品打造得如此直接大膽吧？這款產(chǎn)品的主要亮點(diǎn)是其頗具趣味的文案，這也是你可以用來吸引用戶的一個(gè)不錯(cuò)的手段。

“只需在馬桶的水面上噴3至5下，”產(chǎn)品這樣描述到，“你就可以為所欲為了?！保▽?duì)于那些還沒聽說過這款產(chǎn)品的人來說，你可以在上廁所之前先在馬桶里噴一下祛除異味。）

這個(gè)產(chǎn)品頁(yè)還告訴用戶如果他們定期訂閱可以省錢，達(dá)到了很好的向上銷售的效果。他們提供一個(gè)月、兩個(gè)月或三個(gè)月的訂閱購(gòu)買，他們也不怕將自家的產(chǎn)品展示給大家，還專門為其制作了一段“如何使用”的視頻。

03、Rocky Mountain Soap Company

這家天然香皂公司知道，那些瀏覽他們家產(chǎn)品頁(yè)的消費(fèi)者都想知道自己購(gòu)買的是優(yōu)質(zhì)而健康的產(chǎn)品。他們強(qiáng)調(diào)自己所售的產(chǎn)品是100%全天然的，然后在產(chǎn)品描述中列出一大堆天然原材料，你也可以通過產(chǎn)品菜單瀏覽產(chǎn)品的所有原材料。

我喜歡這個(gè)產(chǎn)品頁(yè)的理由是它對(duì)口碑的大膽運(yùn)用。在這款南瓜香皂下方，有一條評(píng)價(jià)的標(biāo)題是“超......超滋潤(rùn)”，這條評(píng)價(jià)足以讓很多想購(gòu)買該產(chǎn)品的人印象深刻了。

Rocky Mountain Soap很清楚顧客評(píng)價(jià)的力量。在Bizrate Insights Survey做過的一項(xiàng)調(diào)查研究中，有近四分之一的參與者認(rèn)為他們?cè)诰€上購(gòu)買產(chǎn)品時(shí)會(huì)一直參考用戶評(píng)價(jià)，40%的人則認(rèn)為他們會(huì)經(jīng)常這么做。產(chǎn)品下方的社交證據(jù)突出了不少滿意用戶給產(chǎn)品寫的五星評(píng)價(jià)，可以有效減少其他消費(fèi)者在從未接觸過該產(chǎn)品時(shí)可能產(chǎn)生的顧慮。

04、United By Blue

作為所有在線商店中最為綠色環(huán)保的公司之一，United By Blue正致力于從大海和水道中清除垃圾。你可以看到你的購(gòu)買能夠幫他們更快地實(shí)現(xiàn)這一目標(biāo)：“每購(gòu)買一件產(chǎn)品就能幫助清除一磅的垃圾?！闭l(shuí)不想在讓地球變得更干凈的同時(shí)，還能獲得一件漂亮的上衣呢。

一個(gè)尺寸表可以幫助用戶更好地選擇適合自己的尺寸，這樣一來還可以減少產(chǎn)品的返還率。 

產(chǎn)品頁(yè)簡(jiǎn)單大方的設(shè)計(jì)讓用戶得以看清產(chǎn)品描述、客戶評(píng)價(jià)以及一系列相似產(chǎn)品。United By Blue還通過在產(chǎn)品縮略圖下面顯示顏色選項(xiàng)來鼓勵(lì)消費(fèi)者點(diǎn)擊并瀏覽選項(xiàng)。

05、Sixty-Nine

這個(gè)就無(wú)需多說了吧，你只要看一眼這個(gè)頁(yè)面就會(huì)立刻被吸引住。與許多其它的電商產(chǎn)品頁(yè)完全不同，出現(xiàn)在你面前的字體好像在盯著你看似的，讓整個(gè)網(wǎng)站和主打產(chǎn)品也以一種全新的方式呈現(xiàn)出來。

一旦你瀏覽完一樣產(chǎn)品之后，原來的動(dòng)態(tài)圖變成靜止的圖片出現(xiàn)在一個(gè)整潔的、有許多空白的產(chǎn)品頁(yè)面上。你可以通過一個(gè)鏈接轉(zhuǎn)至他們的尺寸表，確保所選尺寸符合自己的需求，然后會(huì)有一個(gè)彈出提示提醒轉(zhuǎn)至他們的相應(yīng)地區(qū)商店，以便用當(dāng)?shù)丶釉?gòu)買（例如，你在加拿大，頁(yè)面將跳轉(zhuǎn)至加拿大地區(qū)，你可以用加元付款）。

整潔的頁(yè)面設(shè)計(jì)可以讓人在購(gòu)物過程中不輕易受其它因素的干擾，同時(shí)可以讓用戶更清楚且直接地購(gòu)買產(chǎn)品。

在這家在線商店獲得Ecommerce Design Awards（后來重新定位成Commerce Awards）的榮譽(yù)獎(jiǎng)之后就被牢牢地記住了。

06、Leesa

Leesa所經(jīng)營(yíng)的產(chǎn)品是可折疊且可運(yùn)輸?shù)拇矇|，幫你避免了專門去床墊商店選購(gòu)的必要。他們家的品牌設(shè)計(jì)清晰簡(jiǎn)潔，色系方面主要采用白色、藍(lán)綠色和灰色。很多類似的床墊公司正在崛起，所以Leesa直入主題，直接強(qiáng)調(diào)為何你應(yīng)該購(gòu)買他們家而不是別人家的產(chǎn)品。

他們還利用這個(gè)機(jī)會(huì)分享了自己作為企業(yè)的社會(huì)責(zé)任，即每售出十個(gè)床墊他們就會(huì)捐出一個(gè)，這樣會(huì)讓那些潛在消費(fèi)者在購(gòu)買時(shí)感覺良好。

購(gòu)買床墊并不是一件小事，所以你可以了解的內(nèi)容越多，就會(huì)讓你更加堅(jiān)定。你可以看到床墊的內(nèi)部運(yùn)作及其與眾不同的地方，Leesa通過顯示產(chǎn)品的評(píng)價(jià)讓你知道其他人有多么的滿意和享受。他們還設(shè)計(jì)了一個(gè)FAQ區(qū)域，里面包含了經(jīng)常會(huì)被問及的一些關(guān)于產(chǎn)品的問題，因此消費(fèi)者無(wú)需離開產(chǎn)品頁(yè)面就能獲得全部答案。

07、Manitobah Mukluks

跟床墊類似，一雙Manitobah冬靴成本的價(jià)格也很高，這也就意味著人們?cè)谫?gòu)買時(shí)不會(huì)那么輕易下手。如果某件商品低于20美元，而你又很喜歡，你會(huì)更有可能去買它，但是這個(gè)價(jià)格點(diǎn)越高，購(gòu)買時(shí)你就可能會(huì)感到越內(nèi)疚，而作為商家，你恰恰不應(yīng)讓前來的消費(fèi)者感到內(nèi)疚。

這個(gè)產(chǎn)品頁(yè)好像解決了購(gòu)買時(shí)最常見的一些顧慮：在“添加到購(gòu)物車”按鈕旁有用粗體字強(qiáng)調(diào)“免郵”和“免費(fèi)返還”。這樣就可以讓人們覺得購(gòu)買并不一定是永不回頭的決定，而且他們所看到的價(jià)格應(yīng)該與最終價(jià)格比較接近。

與Leesa相似，他們鼓勵(lì)那些疑慮型消費(fèi)者在瀏覽產(chǎn)品頁(yè)面時(shí)，就可以了解更多關(guān)于公司及其使命的信息。

用戶可以了解到公司是由印第安人開的，還有在冬靴的鞋底藝術(shù)背后的故事。我個(gè)人認(rèn)為頁(yè)面最后還需要另一個(gè)“添加到購(gòu)物車”按鈕，這樣人們?cè)谫?gòu)買時(shí)就不用一路返回到頁(yè)面頂端。

08、Perfect Keto

這個(gè)頁(yè)面具備一個(gè)高轉(zhuǎn)化產(chǎn)品頁(yè)所需要的所有元素，包括優(yōu)質(zhì)的產(chǎn)品攝影，你為何想要使用他們家產(chǎn)品以及“通過訂閱來省錢”這一選項(xiàng)來告訴人們他們可以在每件商品上省錢（就算他們所付的總體價(jià)格可能會(huì)稍微多一點(diǎn)），同時(shí)可以達(dá)到向上銷售的效果。

該頁(yè)面還加入了“相關(guān)產(chǎn)品”這一區(qū)域，這樣就算人們對(duì)正在瀏覽的產(chǎn)品不是很確定時(shí)，他們也可以在相似產(chǎn)品中找到更適合自己的?；蛘?，你可以直接全部購(gòu)買。

09、Johnny Cupcakes

所有跟甜品相關(guān)的產(chǎn)品都是人的心頭好。Johnny Cupcakes是一個(gè)非常有趣的品牌，它們自稱是“世界上第一家T恤烘焙”，強(qiáng)調(diào)所有新的產(chǎn)品都是“新烤出來的”。這個(gè)主題本身就挺有趣的，而且對(duì)他們來講也很有效。

他們充分利用產(chǎn)品攝影，通過高清圖片來展示他們的服飾及有趣設(shè)計(jì)。而你又如何能抗拒得了他們家年輕小胖莫名追著紙杯蛋糕的動(dòng)圖呢？

另外，當(dāng)你點(diǎn)擊“立即購(gòu)買”按鈕時(shí)，購(gòu)物車會(huì)從屏幕右側(cè)彈出，提醒你可以隨時(shí)結(jié)賬。這個(gè)提醒設(shè)計(jì)可能不是特別巧妙，你也不用立馬就下單，他們還提供了不同的支付方式，這樣就把產(chǎn)品頁(yè)有效地轉(zhuǎn)為結(jié)賬頁(yè)，對(duì)于提高購(gòu)買效率的人來講是很不錯(cuò)的。

10、WP Standard

我承認(rèn)我選擇這一產(chǎn)品頁(yè)的其中一部分原因是我對(duì)這款產(chǎn)品特別著迷，它實(shí)在是美到驚艷。這個(gè)頁(yè)面的主要亮點(diǎn)就是它的產(chǎn)品攝影，它能夠給你一種身臨其境的感覺，這樣你就可以想象一下自己真的擁有這件商品時(shí)的樣子。

這個(gè)產(chǎn)品頁(yè)的一個(gè)特別之處在于你可以選擇把自己的姓名首字母印在包上，如果你將要花一大筆錢來購(gòu)買一款質(zhì)量如此之高的手包，可能你會(huì)想去通過在上面印一下名字的首字母去真正地?fù)碛兴?

11、Master & Dynamic

當(dāng)我剛打開Master & Dynamic的網(wǎng)站時(shí)，大膽、優(yōu)雅和高端是它給我的第一印象。耳機(jī)細(xì)節(jié)的特寫圖完美地展現(xiàn)了產(chǎn)品的質(zhì)量和精致，它無(wú)時(shí)無(wú)刻不在吸引著你用它來聽東西。

Master & Dynamic的產(chǎn)品頁(yè)本身就像是一場(chǎng)體驗(yàn)。當(dāng)你在滾動(dòng)鼠標(biāo)時(shí)，你會(huì)了解到耳機(jī)設(shè)計(jì)的很多細(xì)節(jié) —— 產(chǎn)品的材質(zhì)、特色以及如何控制它們。

但是他們也不完全把設(shè)計(jì)置于轉(zhuǎn)化之上，頁(yè)面頂部懸浮的“加入購(gòu)物袋”按鈕設(shè)計(jì)得恰到好處，既不會(huì)讓人分心，又能夠提醒消費(fèi)者他們可以隨時(shí)擁有這些產(chǎn)品。如果你想要購(gòu)買，你也不用因需要一路返至頁(yè)面頂部尋找購(gòu)物按鈕而影響體驗(yàn)效果（更別提網(wǎng)站所提供的那么多顏色選項(xiàng)提醒了）。

12、Primal Pit Paste

個(gè)人衛(wèi)生可能不是最光鮮艷麗的話題，對(duì)于那些跟污垢相關(guān)的產(chǎn)品來講，他們的產(chǎn)品頁(yè)設(shè)計(jì)算是非常干凈的了。背景全白，偶爾出現(xiàn)的一些明亮而簡(jiǎn)潔的顏色很容易讓品牌與產(chǎn)品看起來更有趣。

Primal Pit Paste充分利用客戶評(píng)價(jià)，他們不僅在價(jià)格旁邊突出用戶評(píng)價(jià)，而且你還可以通過點(diǎn)擊頁(yè)面最左側(cè)一直懸浮的按鈕來查看。他們還在“加入購(gòu)物車”按鈕旁強(qiáng)調(diào)令人心動(dòng)的原材料和質(zhì)量（天然、有機(jī)、無(wú)動(dòng)物實(shí)驗(yàn)等），用以消除消費(fèi)者在購(gòu)買過程中可能產(chǎn)生的顧慮。

你還是有那么點(diǎn)猶豫？那么就請(qǐng)將頁(yè)面繼續(xù)往下拉，深入研究一下原材料以及如何使用一些非傳統(tǒng)的產(chǎn)品。圖片與視覺設(shè)計(jì)中繼續(xù)保持品牌的有趣性，右下角浮動(dòng)的購(gòu)物車按鈕讓你隨時(shí)可以跳回購(gòu)物車進(jìn)行結(jié)賬。

13、Love Hair

Love Hair是另一個(gè)主要以售賣清潔產(chǎn)品為主的品牌，他們的產(chǎn)品頁(yè)設(shè)計(jì)非常干凈。白色背景，灰色字體和一些啞光色使人可以把注意力完全集中在產(chǎn)品圖上，他們不僅展示了產(chǎn)品圖，還在產(chǎn)品頁(yè)放了一些視頻內(nèi)容。

在視頻下方，Love Hair介紹了產(chǎn)品的更多內(nèi)容以及消費(fèi)者會(huì)從中獲得什么，讓他們有機(jī)會(huì)將目標(biāo)群體的痛點(diǎn)直接表達(dá)出來。如果你還需要更多的理由才能決定購(gòu)買，“為何要選Love Hair的椰油”會(huì)告訴你更多的產(chǎn)品原材料，以及他們對(duì)環(huán)保的持續(xù)關(guān)注與努力。

14、Pilgrim

Pilgrim的網(wǎng)站將香薰理療與充滿活力的個(gè)性設(shè)計(jì)完美融合，其產(chǎn)品頁(yè)可在“白天”和“黑夜”之間自由切換，讓你可以更好地感受一下把他們家產(chǎn)品在放在自己家里的樣子。

除了給人以輕快的動(dòng)感之外，網(wǎng)站的整體設(shè)計(jì)既優(yōu)雅又簡(jiǎn)潔。頁(yè)面設(shè)計(jì)包含了一些”為何選購(gòu)”的必備內(nèi)容 —— 30日無(wú)條件退貨、免郵、一年保質(zhì)期以及五星好評(píng)等。

當(dāng)你將頁(yè)面往下拉的時(shí)候，你會(huì)看到一個(gè)更為動(dòng)人的產(chǎn)品發(fā)現(xiàn)之旅。這里不僅包含了突出產(chǎn)品特色、優(yōu)勢(shì)及其原材料的視覺設(shè)計(jì)，還有以視頻形式呈現(xiàn)的用戶自創(chuàng)內(nèi)容，讓你更進(jìn)一步地挖掘產(chǎn)品。

15、Holstee

Holstee這個(gè)品牌既有趣又有個(gè)性，就跟他們的品牌頁(yè)設(shè)計(jì)一樣。一個(gè)簡(jiǎn)單的設(shè)計(jì)，加上幾道明亮的色彩，就足以將你的視線牢牢釘在頁(yè)面上的一些主要元素：產(chǎn)品、“加入購(gòu)物車”按鈕、高亮文字 —— 想要通過折扣價(jià)格讓客戶訂閱產(chǎn)品的另一例子。

Holstee這個(gè)品牌很注重視覺性，其產(chǎn)品頁(yè)的其它部分并不像首屏那樣簡(jiǎn)單。將頁(yè)面往下拉，你會(huì)看到更多的照片、視頻以及能讓你深入了解產(chǎn)品的一些內(nèi)容。

你可以在更加詳細(xì)的介紹和規(guī)格、客戶評(píng)價(jià)、物流和退換貨，以及生態(tài)（表明了品牌追求完美設(shè)計(jì)與優(yōu)質(zhì)產(chǎn)品的決心）之間隨意切換。這就消除了需要一直滾動(dòng)頁(yè)面尋找購(gòu)買按鈕的麻煩，在這里你只需要跳回上一個(gè)區(qū)域即可。

◎利用Shopify打造產(chǎn)品頁(yè)

你不需要有高超的網(wǎng)站設(shè)計(jì)技能來打造一個(gè)好看而又能夠推動(dòng)銷售的產(chǎn)品頁(yè)。通過Shopify，你可以很輕松地在精美的設(shè)計(jì)與轉(zhuǎn)化優(yōu)先的元素之間找到一個(gè)平衡點(diǎn)。（來源：Shopify官方）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場(chǎng)！如有侵權(quán)，請(qǐng)聯(lián)系我們。