Shoptimized 主題的核心特征是實現轉化友好，其產品頁面設計的重點也是圍繞轉化率、銷售額、平均訂單價值以及銷售利潤而展開。

今天就以 Shoptimized 主題的產品頁面為例，從上至下，分析下它的產品頁面設計要素。

Top Bar

有時也叫做 ”Hello Bar“，主要利用這部分區域來宣傳網站免費送貨門檻或者一些特別優惠（Special Offers），例如節日促銷之類。

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

Logo

品牌 Logo 設計最好還應包含一個引人注目的商業標語（Business Tagline）或者說 Slogan 來傳達品牌價值主張（Value Proposition）。正如傳奇文案大師 Drayton Bird 所說：“商業口號（Business Slogan）的目的是將關鍵的品牌信息留在目標人群的腦海中?！?/span>

品牌商業標語應該 100% 原創，清楚表達品牌定位，與競爭對手區分，并明確傳達為潛在客戶能夠帶來的直接好處，例如基于自身產品或服務的優勢的陳述，不要假大空，使用一些看似高大上實則千篇一律且毫無意義的陳詞濫調。

一個有說服力的商業標語能夠幫助在 50 毫秒內定義和區分品牌核心價值主張，吸引訪客的注意力停留在您的網站上，說服他們為什么應該從您這里而不是競爭對手網站購買。

為網站品牌構思商業標語的時候可以參考下這幾個要點：明確您的目標客戶是誰，您能為他們提供什么，您的產品如何解決問題/改善情況，您與競爭對手相比的優勢在哪里。

Search Bar

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

總之，這又是一個宣傳網站優勢的機會，所以要明智地利用該空間，以引導用戶使用搜索欄與網站互動。

Contact Information

在搜索框右側區域清楚顯示網站聯系方式，這是電子商務中的一個重要信任因素，能增強消費者信心，使他們知道如果有任何疑問可以如何與您取得聯系。

Mega Menu

超級菜單，特別是如果網站產品很多的情況下，超級菜單使得導航更容易，更直觀，讓用戶可以在一個視圖中看到所提供的全部內容，用戶體驗會更好。

Breadcrumbs

面包屑導航，使網站層級結構更清晰，也有利于 SEO 的優化。

Product Image

產品圖片應從各個角度完整清楚地展示產品優勢，能為客戶做些什么，可以為他們帶來哪些好處，將如何讓他們的生活更美好、更快樂或更充實。

產品主圖有一個縮放的功能（Zoom），客戶可以看到產品的細節。另外，還可在產品圖片旁邊使用視頻介紹，因為人本質上是視覺動物，相較于圖片，可以通過視頻更詳細更直觀地展示產品的細節。

根據 Bluleadz 網站研究數據，52% 的消費者表示，觀看產品視頻使他們對在線購買決策更有信心。

最后，再簡單說下兩點實用的圖片 SEO 優化技巧：

• 產品圖片命名要包含相關關鍵詞且單詞之間不要使用空格而是使用 "_" 或者 "-" 代替，如果使用了空格則在 HTTP 請求時空格會被 Unicode 編碼自動轉換為 %20；

• 產品圖片上傳后要添加 ALT 標簽，當圖片無法在瀏覽器中正常顯示時可輔助用戶理解圖片內容，也能夠幫助搜索引擎更好地理解圖片的內容，便于索引及參與搜索排名。

Reviews

?根據 Qubit 研究，社會證明是影響轉化率最主要的 3 大因素之一，

Shoptimized 主題可以在產品標題下方突出顯示產品評論概況，用戶點擊后能查看具體的評論內容。

Product Price

關于產品價格，可以借鑒利用一些微妙的價格心理學技巧，例如：

• 非整數定價/奇數定價，用 5、7 或 9 來結尾，如 $24.99，$69.95，$87；

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

  
  

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

Key Benefits

即以 Check List 清單的形式簡要羅列產品的一些主要優勢，

Cart Button Color

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

Trust Symbols

即信任標識圖片，添加在購物車按鈕的下方，列舉網站接收的付款方式以及一些關于安全結賬的信任標識等，讓客戶知道可以通過何種方式安全付款。

Sticky Add-to-Cart Button

粘性添加到購物車按鈕，當客戶在產品頁面向下滑動至購物車按鈕從視圖中消失時就會觸發，這個粘性購物車按鈕會固定在頁面底部，方便客戶隨時可以將產品添加至購物車/或立即購買。

PC 端粘性購物車按鈕

移動端粘性購物車按鈕

Scarcity And Urgency

根據 Qubit 的研究， 稀缺性和緊迫性是提高轉化率的兩個核心杠桿，激勵客戶現在就采取行動，減少他們的購買決策時間。

可以通過顯示優惠結束倒數計時器/當天發貨的最后期限等來營造緊迫性，

可以通過顯示剩余庫存等來營造稀缺性，

另外，還可以通過一些實時統計數據將社交證明與稀缺性/緊迫性元素相結合，以最大程度上激勵客戶采取行動，促成轉化，例如：

• 顯示有多少人正在查看該產品；

• 顯示有多少人將該產品加入了購物車；

• 顯示過去 24 小時內售出的產品數量。

  
  

Value Proposition

在購買按鈕下面向客戶明確傳達您的價值主張（免運費/安全結賬/售后支持/退款保證，等），主動告訴客戶向您購買的理由（如 5 Great Reasons To Buy From Us），讓客戶知道為什么您比其他人更好，為什么他們應該在您這里購買。

這里有一點需要注意的是，這個功能模塊跟上面的那個 Checklist 清單列表的功能模塊很相似，如果都同時啟用的話，要注意兩者的內容不要重復了。

Product Description

要站在客戶的角度，以利益驅動來撰寫有說服力的產品描述，通過場景化的氛圍營造闡述產品的主要功能和優勢，另外，還應該以一種可以略讀的方式來構建內容，適當使用小標題，粗體字以及用清單列表的方式來突出產品優點等。

最后，還可以自定義設置其他一些 Description Tag 來顯示其他一些重要內容，例如：

• Shipping & Delivery：支持發貨的國家/地區以及運輸時間說明，

• Return & Refunds：退貨/退款政策說明，

• Why Buy From Us：再次強化網站價值主張；

• Reviews：顯示其他客戶評論。

這些自定義 Tag 模塊的內容都是為了增強消費者的購買信心，減少內心的不確定性，打消他們的相關購買決策顧慮。

Related Products / Recently viewed products

相關產品與最近查看產品模塊，主要用來做一些追加銷售以及交叉銷售，這兩個模塊的展示的產品主題及話術文案也可以根據網站實際情況來靈活設置。例如：

• Not Right? Try One Of These Instead

• Other Customers Also Bought These

  
  

Back To Top Button

回到頂部按鈕，尤其當頁面內容非常多的時候，能夠非常方便用戶一鍵返回頂部。

Footer Section

頁腳部分，一般都是這幾個部分相關的內容：

• 快速鏈接（關于我們，常見問題，隱私政策，使用條款等）；

• 網站社交賬戶鏈接；

• 訂閱郵箱；

• 聯系方式；

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

• 網站版權聲明。

  
  

最后，關于產品頁面還有一點需說明一下，即產品頁面最好能夠確保無需滾動即可看到 The Money Shot（可理解為首屏的意思），這里主要是針對 PC 端，

就是說產品頁面中的所有主要元素，包括產品圖片，縮略圖，產品標題，價格，緊迫性/稀缺性說明，購買按鈕等都能夠在首屏中全部展示。

好了，以上便是使用 Shoptimized 主題的 Shopify 產品頁面的一些重要設計要素分析。