Shoptimized 主題的核心特征是實(shí)現(xiàn)轉(zhuǎn)化友好，其產(chǎn)品頁(yè)面設(shè)計(jì)的重點(diǎn)也是圍繞轉(zhuǎn)化率、銷售額、平均訂單價(jià)值以及銷售利潤(rùn)而展開(kāi)。

今天就以 Shoptimized 主題的產(chǎn)品頁(yè)面為例，從上至下，分析下它的產(chǎn)品頁(yè)面設(shè)計(jì)要素。

Top Bar

有時(shí)也叫做 ”Hello Bar“，主要利用這部分區(qū)域來(lái)宣傳網(wǎng)站免費(fèi)送貨門(mén)檻或者一些特別優(yōu)惠（Special Offers），例如節(jié)日促銷之類。

另外，通常右側(cè)還放有一些管理導(dǎo)航（Admin Navigation），例如，About Us，Track Your Order，Contact Us 之類的，注意不是產(chǎn)品導(dǎo)航（一般會(huì)做一個(gè)拆分導(dǎo)航處理，將這兩類導(dǎo)航層級(jí)分開(kāi)）。最后，還會(huì)有一個(gè)懸停購(gòu)物車圖標(biāo)（Hover-over Cart Icon），方便客戶清晰地知道當(dāng)前購(gòu)物車中的產(chǎn)品數(shù)量，當(dāng)鼠標(biāo)懸停在這個(gè)圖標(biāo)上時(shí)還會(huì)顯示一個(gè)列表清單，可以看到購(gòu)物車中的全部產(chǎn)品。

Logo

品牌 Logo 設(shè)計(jì)最好還應(yīng)包含一個(gè)引人注目的商業(yè)標(biāo)語(yǔ)（Business Tagline）或者說(shuō) Slogan 來(lái)傳達(dá)品牌價(jià)值主張（Value Proposition）。正如傳奇文案大師 Drayton Bird 所說(shuō)：“商業(yè)口號(hào)（Business Slogan）的目的是將關(guān)鍵的品牌信息留在目標(biāo)人群的腦海中?！?/span>

品牌商業(yè)標(biāo)語(yǔ)應(yīng)該 100% 原創(chuàng)，清楚表達(dá)品牌定位，與競(jìng)爭(zhēng)對(duì)手區(qū)分，并明確傳達(dá)為潛在客戶能夠帶來(lái)的直接好處，例如基于自身產(chǎn)品或服務(wù)的優(yōu)勢(shì)的陳述，不要假大空，使用一些看似高大上實(shí)則千篇一律且毫無(wú)意義的陳詞濫調(diào)。

一個(gè)有說(shuō)服力的商業(yè)標(biāo)語(yǔ)能夠幫助在 50 毫秒內(nèi)定義和區(qū)分品牌核心價(jià)值主張，吸引訪客的注意力停留在您的網(wǎng)站上，說(shuō)服他們?yōu)槭裁磻?yīng)該從您這里而不是競(jìng)爭(zhēng)對(duì)手網(wǎng)站購(gòu)買。

為網(wǎng)站品牌構(gòu)思商業(yè)標(biāo)語(yǔ)的時(shí)候可以參考下這幾個(gè)要點(diǎn)：明確您的目標(biāo)客戶是誰(shuí)，您能為他們提供什么，您的產(chǎn)品如何解決問(wèn)題/改善情況，您與競(jìng)爭(zhēng)對(duì)手相比的優(yōu)勢(shì)在哪里。

Search Bar

即搜索欄，需要確保在 Header 頁(yè)面頂部區(qū)域非常突出顯示，讓訪客能輕易找到，使用搜索欄與網(wǎng)站互動(dòng)的用戶的轉(zhuǎn)化率是使用常規(guī)導(dǎo)航的用戶的 5-6 倍。另外，關(guān)于搜索框的提示文案，最好也不要僅僅說(shuō) “Search for…” 之類千篇一律索然無(wú)味的東西，要結(jié)合網(wǎng)站具體的產(chǎn)品優(yōu)勢(shì)，關(guān)切用戶可能感興趣的內(nèi)容，激勵(lì)他們與網(wǎng)站進(jìn)行互動(dòng)。例如，如果網(wǎng)站主要是賣漁具相關(guān)的產(chǎn)品，那么就可以在搜索框里面提示說(shuō) “Find Awesome Fishing Gear” 之類的文案。

總之，這又是一個(gè)宣傳網(wǎng)站優(yōu)勢(shì)的機(jī)會(huì)，所以要明智地利用該空間，以引導(dǎo)用戶使用搜索欄與網(wǎng)站互動(dòng)。

Contact Information

在搜索框右側(cè)區(qū)域清楚顯示網(wǎng)站聯(lián)系方式，這是電子商務(wù)中的一個(gè)重要信任因素，能增強(qiáng)消費(fèi)者信心，使他們知道如果有任何疑問(wèn)可以如何與您取得聯(lián)系。

Mega Menu

超級(jí)菜單，特別是如果網(wǎng)站產(chǎn)品很多的情況下，超級(jí)菜單使得導(dǎo)航更容易，更直觀，讓用戶可以在一個(gè)視圖中看到所提供的全部?jī)?nèi)容，用戶體驗(yàn)會(huì)更好。

Breadcrumbs

面包屑導(dǎo)航，使網(wǎng)站層級(jí)結(jié)構(gòu)更清晰，也有利于 SEO 的優(yōu)化。

Product Image

產(chǎn)品圖片應(yīng)從各個(gè)角度完整清楚地展示產(chǎn)品優(yōu)勢(shì)，能為客戶做些什么，可以為他們帶來(lái)哪些好處，將如何讓他們的生活更美好、更快樂(lè)或更充實(shí)。

產(chǎn)品主圖有一個(gè)縮放的功能（Zoom），客戶可以看到產(chǎn)品的細(xì)節(jié)。另外，還可在產(chǎn)品圖片旁邊使用視頻介紹，因?yàn)槿吮举|(zhì)上是視覺(jué)動(dòng)物，相較于圖片，可以通過(guò)視頻更詳細(xì)更直觀地展示產(chǎn)品的細(xì)節(jié)。

根據(jù) Bluleadz 網(wǎng)站研究數(shù)據(jù)，52% 的消費(fèi)者表示，觀看產(chǎn)品視頻使他們對(duì)在線購(gòu)買決策更有信心。

最后，再簡(jiǎn)單說(shuō)下兩點(diǎn)實(shí)用的圖片 SEO 優(yōu)化技巧：

• 產(chǎn)品圖片命名要包含相關(guān)關(guān)鍵詞且單詞之間不要使用空格而是使用 "_" 或者 "-" 代替，如果使用了空格則在 HTTP 請(qǐng)求時(shí)空格會(huì)被 Unicode 編碼自動(dòng)轉(zhuǎn)換為 %20；

• 產(chǎn)品圖片上傳后要添加 ALT 標(biāo)簽，當(dāng)圖片無(wú)法在瀏覽器中正常顯示時(shí)可輔助用戶理解圖片內(nèi)容，也能夠幫助搜索引擎更好地理解圖片的內(nèi)容，便于索引及參與搜索排名。

Reviews

?根據(jù) Qubit 研究，社會(huì)證明是影響轉(zhuǎn)化率最主要的 3 大因素之一，

Shoptimized 主題可以在產(chǎn)品標(biāo)題下方突出顯示產(chǎn)品評(píng)論概況，用戶點(diǎn)擊后能查看具體的評(píng)論內(nèi)容。

Product Price

關(guān)于產(chǎn)品價(jià)格，可以借鑒利用一些微妙的價(jià)格心理學(xué)技巧，例如：

• 非整數(shù)定價(jià)/奇數(shù)定價(jià)，用 5、7 或 9 來(lái)結(jié)尾，如 $24.99，$69.95，$87；

• 用比原價(jià)更小的字體顯示折扣后的價(jià)格。

  
  

另外，也可以自己自定義設(shè)置折扣價(jià)字體大小，顏色，以及顯示節(jié)省的金額。

Key Benefits

即以 Check List 清單的形式簡(jiǎn)要羅列產(chǎn)品的一些主要優(yōu)勢(shì)，

Cart Button Color

購(gòu)物車按鈕重點(diǎn)在于要讓其顯而易見(jiàn)，顏色醒目，可考慮使用對(duì)比色，與周圍的元素形成鮮明對(duì)比，能夠第一時(shí)間吸引用戶注意力，所以亞馬遜那種的橙色系的購(gòu)物車按鈕顏色不一定適合自己的網(wǎng)站，不必一味地完全效仿。另外，關(guān)于購(gòu)物車按鈕的行動(dòng)號(hào)召用語(yǔ)，可以在后臺(tái)自定義設(shè)置更改，有條件的話也可以用 Google Optimize 之類的工具來(lái)做下 A/B 測(cè)試，或許 “I Deserve This” 等其他的行動(dòng)號(hào)召文案比 “Add To Cart” 更適合自己的網(wǎng)站，效果更好。

Trust Symbols

即信任標(biāo)識(shí)圖片，添加在購(gòu)物車按鈕的下方，列舉網(wǎng)站接收的付款方式以及一些關(guān)于安全結(jié)賬的信任標(biāo)識(shí)等，讓客戶知道可以通過(guò)何種方式安全付款。

Sticky Add-to-Cart Button

粘性添加到購(gòu)物車按鈕，當(dāng)客戶在產(chǎn)品頁(yè)面向下滑動(dòng)至購(gòu)物車按鈕從視圖中消失時(shí)就會(huì)觸發(fā)，這個(gè)粘性購(gòu)物車按鈕會(huì)固定在頁(yè)面底部，方便客戶隨時(shí)可以將產(chǎn)品添加至購(gòu)物車/或立即購(gòu)買。

PC 端粘性購(gòu)物車按鈕

移動(dòng)端粘性購(gòu)物車按鈕

Scarcity And Urgency

根據(jù) Qubit 的研究， 稀缺性和緊迫性是提高轉(zhuǎn)化率的兩個(gè)核心杠桿，激勵(lì)客戶現(xiàn)在就采取行動(dòng)，減少他們的購(gòu)買決策時(shí)間。

可以通過(guò)顯示優(yōu)惠結(jié)束倒數(shù)計(jì)時(shí)器/當(dāng)天發(fā)貨的最后期限等來(lái)營(yíng)造緊迫性，

可以通過(guò)顯示剩余庫(kù)存等來(lái)營(yíng)造稀缺性，

另外，還可以通過(guò)一些實(shí)時(shí)統(tǒng)計(jì)數(shù)據(jù)將社交證明與稀缺性/緊迫性元素相結(jié)合，以最大程度上激勵(lì)客戶采取行動(dòng)，促成轉(zhuǎn)化，例如：

• 顯示有多少人正在查看該產(chǎn)品；

• 顯示有多少人將該產(chǎn)品加入了購(gòu)物車；

• 顯示過(guò)去 24 小時(shí)內(nèi)售出的產(chǎn)品數(shù)量。

  
  

Value Proposition

在購(gòu)買按鈕下面向客戶明確傳達(dá)您的價(jià)值主張（免運(yùn)費(fèi)/安全結(jié)賬/售后支持/退款保證，等），主動(dòng)告訴客戶向您購(gòu)買的理由（如 5 Great Reasons To Buy From Us），讓客戶知道為什么您比其他人更好，為什么他們應(yīng)該在您這里購(gòu)買。

這里有一點(diǎn)需要注意的是，這個(gè)功能模塊跟上面的那個(gè) Checklist 清單列表的功能模塊很相似，如果都同時(shí)啟用的話，要注意兩者的內(nèi)容不要重復(fù)了。

Product Description

要站在客戶的角度，以利益驅(qū)動(dòng)來(lái)撰寫(xiě)有說(shuō)服力的產(chǎn)品描述，通過(guò)場(chǎng)景化的氛圍營(yíng)造闡述產(chǎn)品的主要功能和優(yōu)勢(shì)，另外，還應(yīng)該以一種可以略讀的方式來(lái)構(gòu)建內(nèi)容，適當(dāng)使用小標(biāo)題，粗體字以及用清單列表的方式來(lái)突出產(chǎn)品優(yōu)點(diǎn)等。

最后，還可以自定義設(shè)置其他一些 Description Tag 來(lái)顯示其他一些重要內(nèi)容，例如：

• Shipping & Delivery：支持發(fā)貨的國(guó)家/地區(qū)以及運(yùn)輸時(shí)間說(shuō)明，

• Return & Refunds：退貨/退款政策說(shuō)明，

• Why Buy From Us：再次強(qiáng)化網(wǎng)站價(jià)值主張；

• Reviews：顯示其他客戶評(píng)論。

這些自定義 Tag 模塊的內(nèi)容都是為了增強(qiáng)消費(fèi)者的購(gòu)買信心，減少內(nèi)心的不確定性，打消他們的相關(guān)購(gòu)買決策顧慮。

Related Products / Recently viewed products

相關(guān)產(chǎn)品與最近查看產(chǎn)品模塊，主要用來(lái)做一些追加銷售以及交叉銷售，這兩個(gè)模塊的展示的產(chǎn)品主題及話術(shù)文案也可以根據(jù)網(wǎng)站實(shí)際情況來(lái)靈活設(shè)置。例如：

• Not Right? Try One Of These Instead

• Other Customers Also Bought These

  
  

Back To Top Button

回到頂部按鈕，尤其當(dāng)頁(yè)面內(nèi)容非常多的時(shí)候，能夠非常方便用戶一鍵返回頂部。

Footer Section

頁(yè)腳部分，一般都是這幾個(gè)部分相關(guān)的內(nèi)容：

• 快速鏈接（關(guān)于我們，常見(jiàn)問(wèn)題，隱私政策，使用條款等）；

• 網(wǎng)站社交賬戶鏈接；

• 訂閱郵箱；

• 聯(lián)系方式；

• 可接受的付款方式及安全結(jié)賬保證；

• 網(wǎng)站版權(quán)聲明。

  
  

最后，關(guān)于產(chǎn)品頁(yè)面還有一點(diǎn)需說(shuō)明一下，即產(chǎn)品頁(yè)面最好能夠確保無(wú)需滾動(dòng)即可看到 The Money Shot（可理解為首屏的意思），這里主要是針對(duì) PC 端，

就是說(shuō)產(chǎn)品頁(yè)面中的所有主要元素，包括產(chǎn)品圖片，縮略圖，產(chǎn)品標(biāo)題，價(jià)格，緊迫性/稀缺性說(shuō)明，購(gòu)買按鈕等都能夠在首屏中全部展示。

好了，以上便是使用 Shoptimized 主題的 Shopify 產(chǎn)品頁(yè)面的一些重要設(shè)計(jì)要素分析。