Shopify 設計技巧和用戶體驗最佳實踐

Shopify 為 175 個國家/地區的超過 50 萬家電子商務企業提供支持。 自 2012 年以來，Shopify 平台上的商家數量平均每年增長 74%，由於 Shopify 是當今最知名和最容易使用的電子商務平台之一，這些商家的銷售額已超過 550 億美元。

隨著 Shopify 負責域、託管、所有後端和一些前端功能，可以將更多時間、金錢和資源用於 UX 設計。 到 2021 年，全球電子商務銷售額預計將達到 4.9 萬億美元的新高，而不合標準的用戶體驗設計是放棄結賬的最大原因之一，很明顯電子商務最佳實踐的實施將繼續證明非常有效。

在本文中，我們將探討頂級 Shopify 設計技巧。

Shopify 有哪些功能？

Shopify 附帶您期望從頂級電子商務平台獲得的所有功能：

• 與外部支付網關集成，例如 Stripe 和 PayPal
• 訪問 Shopify Payments，與外部選項相比，費用為零
• 允許通過禮品卡或商店信用付款的能力
• 可自定義的結帳頁面（僅適用於 Shopify Plus 客戶）
• 用戶帳戶或訪客結帳選項
• 靜態頁面（例如，隱私政策或條款和條件）
• 帶有促銷內容的登陸頁面
• 開發中商店的密碼訪問
• 具有一系列可定制選項的產品變體
• 智能集合以自動化產品分類
• 搜索和標記功能以幫助產品發現
• 具有將產品嵌入帖子的博客功能
• 幫助開發人員構建動態網站和移動應用程序的 API

促進電子商務產品發現

與實體店按部門組織的方式類似，客戶可以通過詢問工作人員來找到特定商品，在線購物者需要能夠瀏覽、過濾和搜索，以便他們可以輕鬆找到他們想要的東西，並且快點。

40% 的電子商務客戶放棄加載時間超過 3 秒的網站，這表明他們在產品發現方面有多麼不耐煩。 幸運的是，Shopify 具有許多功能，可以輕鬆構建自定義導航、組織產品和類別以及實現搜索功能。

自定義導航

向客戶提供太多選項可能會導致分析癱瘓（當有太多可用選項無法有效做出決策時，會導致沮喪和放棄）。 通過設計自定義導航，我們可以優先考慮轉換效率最高的產品和“集合”——例如，如果桌面產品最受歡迎，則明顯顯示“桌面”集合。 這些自定義導航也可以在 Shopify CMS 中進行編輯，以啟用臨時 A/B 測試。

從視覺上講，轉換效果最好的 Shopify 主題清楚地顯示了產品系列的標題，並使用足夠的空白來幫助用戶輕鬆識別他們在提供的所有產品、產品系列和頁面中尋找的內容。

收藏品

集合是一組有組織的類似產品。 產品可以手動分類到集合中，也可以根據匹配的條件自動分類（例如，如果產品標題包含某個關鍵字，被分配了某個標籤，或者在特定的價格範圍內）。 收藏也可以是臨時的（即季節性或限時銷售），以確保 Shopify 網站設計始終具有相關性、及時性，並且最重要的是，具有很高的轉化率。

雖然這些集合是在幕後定義的，但電子商務設計人員在為 Shopify 進行設計時了解此功能很有用。

產品標籤

顯示/可見標籤幫助客戶找到相似的產品，如上所述，它們也可以在內部用於創建集合。 然而，標籤的最大好處在於它們可用於創建分面搜索，允許客戶根據“黃色”等標籤定義屬性過濾產品。

請牢記這些 Shopify 設計提示：

• 為了進一步說明，請顯示應用了哪些過濾器。
• 允許客戶刪除過濾器以擴大搜索範圍。
• 截斷過濾器以僅顯示最流行的第一眼。

搜索

搜索功能對於確切知道他們在尋找什麼的客戶很有用，對於那些因為在移動設備上進行交互的自然尷尬而發現瀏覽和過濾令人沮喪的移動購物者來說尤其重要。

以下是設計搜索體驗時要考慮的 Shopify 最佳實踐：

• 永遠不要隱藏搜索框； 通過使其立即可用來減少摩擦。
• 將搜索放在客戶期望的位置（即右上角或集中）。
• 顯示整個輸入框，而不僅僅是搜索圖標。
• 結合自動完成功能以幫助用戶更快地搜索。
• 通過使用建議的結果和自動更正來設計人為錯誤。
• 如果沒有銷售，保存用戶搜索並發送後續電子郵件。

Shopify 產品頁面的最佳實踐

Shopify 提供了吸引電子商務購物者並流暢地引導用戶直接結賬所需的所有功能。 如果我們將這些功能與電子商務最佳實踐相結合，我們可以將放棄結賬的數量推至低於平均統計數據。

使用迷人的產品圖片

打造一個好的電子商務網站的要素是能夠在情感上吸引用戶的圖像。 為此，Shopify 允許上傳多個圖像和產品變體。 儘管如此，作為 Shopify 的最佳實踐，至少按比例顯示這些產品圖像中的一個（即，被其他對象包圍以說明產品有多大）以設定期望值。

客戶希望在承諾購買產品之前對產品進行徹底調查，以確保所有產品圖像都是生動的、高質量的和可縮放的。

顯示清晰的產品信息

由於缺乏有關實際成本的信息，數量驚人（但並不令人驚訝）的電子商務客戶放棄了他們的購物車。 60% 的客戶將意外成本（例如，運輸、稅收、費用）作為放棄購物車的原因，23% 的客戶無法預先計算總成本。 缺乏透明度是在電子商務網站上進行轉化的萬無一失的方式，因此請牢記這些 Shopify 提示和技巧：

• 使用漸進式披露技術來清晰地構建信息。
• 預先顯示完整的成本明細。
• 明確地傳達價值主張。
• 使立即購買/添加到購物車按鈕在視覺上與眾不同。

建立信任和保證

根據 Baymard Institute 的說法，缺乏信任被認為是 19% 的客戶在結賬時放棄的原因。 幸運的是，所有 Shopify 商店都默認使用 SSL（安全結賬），但它們也允許客戶留下評論作為社交證明。

社交證明是通過增強對電子商務網站的信任來提高轉化率的不可否認的方式。 據 BrightLocal 稱，88% 的消費者對在線評論的信任程度不亞於個人推薦，因此有必要推動以前的客戶留下評論並在客戶旅程中表明這一點。 大多數 Shopify 主題還利用 Schema 標記將這些評級直接集成到搜索結果中。

除了社交驗證之外，還可以考慮通過實施對講機、Zendesk、Drift 或 Kayako 等實時聊天解決方案來建立客戶信心。 Shopify 允許通過其應用商店和手動安裝與第三方服務集成。

顯示相關產品推薦

所有領先的電子商務企業都利用交叉銷售和追加銷售策略。 標籤與分析和 A/B 測試集成（例如 Optimizely 的 Web 推薦）相結合，可以幫助設計人員通過顯示客戶可能感興趣的替代或附加項目來提高企業的轉化率。

整合購物體驗個性化

Optimizely 的 Web Personalizations 等集成與 Shopify 產品系列和標籤相結合，允許數據驅動的企業根據他們的興趣和以前的購買歷史來細分受眾，並相應地更改頁面內容。

借助預期設計技術，Shopify 商店可以展示更多相關內容，讓受眾更長時間地參與其中，從而更有可能轉化為銷售。 個性化是提高任何電子商務業務財務底線的關鍵。

結帳優化

訪客結帳與客戶帳戶

根據 Baymard Institute 的說法，“該網站希望我創建一個帳戶”是客戶在沒有購買任何東西的情況下放棄結賬的第二大常見原因（佔 35%）。 Shopify 建議允許訪客結賬（尤其是在移動設備上），為此，禁用客戶帳戶是默認選項。

查明用戶體驗缺陷並減少流失

在沒有強大分析的情況下嘗試解決廢棄的結賬問題就像在黑暗的房間裡尋找一隻黑貓一樣有效。 當它是一個數據驅動的過程時，優化用戶體驗和結帳流程最有效。

Shopify 設計師可以將 Google Analytics 連接到 Shopify 並設置一個目標漏斗，在收集到足夠的數據後，該漏斗將準確說明客戶決定他們不想繼續購買的確切位置。

為獲得最佳效果，請將 Shopify 與 Crazy Egg、Hotjar 和 FullStory 等工具集成，以使用熱圖和訪客記錄更詳細地觀察這些問題區域。

結論

為了讓設計師能夠更好地傳達 Shopify 平台的優勢和功能，並了解它可以和不能為客戶提供哪些解決方案，最好開設一個免費的演示商店。 此外，頂級電子商務設計師可以成為註冊 Shopify 專家，為他們作為 Shopify 網站設計師的簡歷增加更多可信度。

進一步閱讀 Toptal 設計博客：

• 閱讀 Shopify 博客，了解更多 Shopify 提示和技巧。
• 電子商務用戶體驗——基本設計策略和原則
• 移動體驗的電子商務 UX
• 如何通過 UX 設計吸引電子商務購物者
• 響應式設計——最佳實踐和注意事項