Shopify 商店的 Everything 設計指南

字體、顏色、動作！ 對於喜歡藝術的人來說，設計您的 Shopify 商店可能是一項激動人心的挑戰。 但是對於那些在襯線字體和非襯線字體之間進行選擇時感到有點冷漠的營銷人員和企業家來說，這個過程可能會讓人感到非常艱鉅。

儘管 Shopify 有許多資源可以讓您輕鬆上手——我們談論的是預製的主題模板、聘請的專家設計師以及充滿應用程序和小部件的市場——但決策癱瘓是一個非常現實的痛苦。 恰當的例子：每個人都想要一個視覺上有吸引力、引人注目並針對轉化進行優化的 Shopify 商店——但實現目標說起來容易做起來難。

當談到 Shopify 商店的設計選項時，天空幾乎是極限，您從哪裡開始？ 放下顏色樣本 — 這是您一直需要但不知道存在的 Shopify 終極設計指南，其中包含您自定義、發布和開始銷售所需的所有提示和技巧。

在本文中：
Shopify 主題
產品照片
主題定制
菜單結構
主頁標題
3個外賣小貼士
需要幫忙？

Shopify 主題

建立 Shopify 商店的第一步是選擇合適的主題。 將其視為您網站的支柱，它決定了您商店的用戶體驗、視覺美感和功能。

Shopify 的主題商店提供數百種選擇，讓您可以輕鬆找到完美搭配。 此外，它們中的大多數都提供多種樣式變化，這意味著您可以自定義它們以匹配您的品牌在顏色、字體和應用程序方面的外觀和感覺。

感到不知所措？ 使用 Shopify 的過濾器通過以下方式縮小您的選擇範圍：

• 產品目錄的大小。 如果您有許多產品，您可能需要無限滾動或網格佈局等功能。

• 你的行業。 時裝公司可能需要允許購物者從多種尺寸和顏色中進行選擇的主題，而藝術和攝影品牌可能需要更大的產品圖片位置。
• 價格。 儘管 Shopify 提供各種免費主題，但更複雜的主題可能要花費高達 180 美元。

儘管您可以稍後自定義排版和配色方案，但如果您選擇的主題在整體美學和佈局方面與您對網站的願景相匹配，則自定義過程會更加直接。

產品照片

雖然我們是 Shopify 強大的主題市場的忠實擁護者，但存在一個風險：擁有一家看起來和其他人一樣的商店，即使您考慮了定制。 一種快速的解決方案？ 獨特的產品照片。

為了將您的品牌與競爭對手區分開來，拍攝能夠體現公司身​​份和態度的產品照片非常重要。 攝影在設定品牌風格和基調方面發揮著巨大作用。

不要害怕玩得開心，對您的產品照片大膽一點：

• 將您的產品照片與一些生活方式照片混合在一起，您的產品是在現場拍攝的，帶有支持的道具和模型。
• 嘗試不同的佈局。 例如，與其總是通過將服裝放在白色背景上來拍攝服裝，不如考慮做平躺或僱用模特。
• 從有趣的角度裁剪和拍照，而不是直截了當。 這是為您的照片添加風格和風格的好方法。

有關拍攝令人驚嘆的產品和生活方式圖像的更多提示，請查看此 DIY 指南。

主題定制

既然您已經選擇了自己的主題，並且有一整套產品照片可供選擇，那麼有趣的部分就來了：將網站變成獨一無二的東西。

由於 Shopify 提供的便利，定制不需要您進行任何編碼。 相反，只需單擊主題設置，您就會發現許多方法來調整商店的視覺風格。

顏色

在顏色菜單中，您可以切換商店中許多元素的顏色，包括文本、按鈕和表單字段。

專業提示：為了使您的號召性用語 (CTA) 脫穎而出，請考慮將其設置為更大膽、更明亮的顏色，與頁面的其餘部分形成鮮明對比。

排版

此部分控制整個商店中所有文本的視覺外觀。 您可以調整標題與正文的字體類型、粗細和比例。

網站圖標

網站圖標是出現在瀏覽器選項卡中的小圖標——通常是與公司相關的徽標或簡單圖像。

• 有合適的圖片嗎？ 上傳後，Shopify 會自動將其大小調整為 32 x 32 像素。
• 沒有？ Shopify 有大量免費圖片可供您使用。

結帳元素

您的結帳過程是您電子商務網站中最重要的部分。 如果沒有出色的結賬體驗，您可能會冒著購物者在購買過程中放棄購物車的風險。

為了使您的結帳盡可能無縫，您可以自定義：

• 重音、按鈕和錯誤的顏色
• 結帳特定的排版
• 結帳和訂單摘要頁面的背景圖案、顏色或圖像

菜單結構

雖然 Shopify 的大多數預製主題都帶有這些關鍵元素，但在開設商店之前，您需要牢記這些提示：

導航欄

導航欄位於每個頁面的頂部，允許購物者在頁面之間快速跳轉。

專業提示：讓購物者輕鬆找到他們需要的東西，而不會讓他們不知所措。 為了保持主導航欄相對乾淨和簡單，您可以將類別和子類別添加為隱藏的下拉選項，除非將鼠標懸停在上面。

公告欄

限時特賣？ 運輸延誤？ 新店營業時間？ 當您需要宣傳所有購物者都需要知道的基本信息時，公告欄（也稱為全局標題）就是您的答案。

大多數 Shopify 主題都帶有公告欄——您只需要自定義它們並通過 Shopify 主題編輯器打開它們。

專業提示：確保您的公告欄與您的網站風格相同（想想品牌顏色、字體和 CTA）。

頁腳

頁腳是您網站上最被低估的區域之一。 雖然確實很少有購物者會一直滾動瀏覽您的主頁並到達頁腳，但當他們需要快速訪問信息時，這是他們首先會看到的地方之一。

要編輯頁腳，您需要轉到在線商店下的導航頁面。

專業提示：

• 您的頁腳不應該只是導航欄中相同信息的重新散列。 相反，添加重要的鏈接到有關運輸、退貨和換貨、網站隱私、工作機會等的頁面。
• 使用社交媒體圖標作為按鈕——它會減少頁腳的冗長。
• 允許購物者註冊電子郵件或短信更新。
• 提供客戶服務快速鏈接，例如熱線、“開始實時聊天”或電子郵件幫助。

主頁標題

您的主頁標題是購物者登陸您的網站時首先看到的內容。 留下極好的第一印象，他們會滾動瀏覽更多內容。 無法吸引他們，他們會關閉標籤。 話雖如此，您的主頁標題應該：

• 快速了解您的品牌或銷售的產品
• 促進銷售活動
• 展示您品牌的態度和身份
• 展示您的頂級產品

無論您的主頁標題是視頻、輪播還是靜態圖像，您都應該定期更改它——您永遠不希望您的網站對忠實客戶來說過時或過時。

3個外賣小貼士

設計您的 Shopify 商店可能會很有趣，但一旦您開始在本質上是空白畫布上嘗試字體、顏色和小部件，它也可能會失控。 為了使 Shopify 設計過程盡可能易於管理和避免頭痛，請牢記以下提示：

1. 功能重於形式，永遠

您可以擁有一個漂亮的網站，但如果它不能直觀地流動並提供出色的客戶旅程，您將看到銷售停滯不前。 我們推薦：

• 在開始設計過程之前，專注於您希望通過網站完成的任務。 這將有助於縮小您需要的工具或小部件的範圍，並防止您第一次訪問 Shopify 應用商店時可能發生的選擇癱瘓。
• 實施有用的功能，例如推薦和強大的過濾器，以允許購物者快速縮小他們的產品搜索範圍。
• 優先考慮網站速度。 雖然添加大量炫酷的動畫、酷炫的應用程序和高分辨率圖像很誘人，但您包含的元素越多，您網站的加載時間就越長。 研究發現，頁面加載所花的時間每增加一秒，轉化率就會降低 7%，頁面瀏覽量會降低 11%。 另一方面，速度更快的網站會在谷歌上獲得更高的排名。
• 壓縮圖像。 像compressor.io這樣的免費工具可以幫助您保持高質量的產品圖像清晰，同時減小文件大小。
• 在 Shopify 主題商店中選擇主題而不是來自第三方網站的主題。 由於第三方主題不經過 Shopify 的評估流程，因此有些主題可能會在後端添加意外添加，從而拖累您的加載時間。

請記住：啟動您的 Shopify 商店不是一勞永逸的過程。 在您啟動網站並開始看到銷售涓涓細流之後，您希望不斷優化每個頁面，從修改標題圖像、重寫 SEO 副本或更新圖像。 相信我們：雖然這很乏味，但它有助於提高轉化率、吸引新購物者並改善客戶體驗。

專業提示：不確定您的網站在網站速度方面的表現如何？ 查看 Google 的 PageSpeed Insights 工具 - 只需輸入您的網址，它就會為您提供有關網站速度改進的見解和建議。

2. 保持網站簡單

展示您的武器庫中的所有產品、圖像和副本很誘人，但大多數情況下，這只會阻礙客戶體驗。 您不想讓您的網站因過多的信息而超載——沒有人願意在雜亂的舊貨店的數字版本中篩選產品。 相反，保持簡單，專注於你的暢銷書，並儘可能減少脂肪（無論是圖像、副本、小部件、頁面，甚至是產品本身）。

3. 測試一切

如果我們告訴您，您可以通過簡單地將一個按鈕從藍色更改為紅色來提高轉化率怎麼辦？ 雖然您使用特定顏色、圖像和圖形啟動了您的網站，但無法知道它們是否運行良好。 （我們很樂意為您提供一個成功的公式，但事實是：最佳實踐取決於品牌的獨特客戶、產品和利基市場。）

這就是 A/B 測試的用武之地——這個過程對於確定什麼表現最好是至關重要的。 （對於新營銷人員，這裡有一份 A/B 測試的指南。）與其單純憑直覺進行操作，不如對這些商店設計元素進行 A/B 測試：

• 不同按鈕的顏色
• CTA、小部件和圖像的位置
• 導航欄
• 社交媒體圖標的設計
• 圖像風格——例如，產品與生活方式的圖像
• 背景圖像或紋理

需要幫忙？

雖然 Shopify 的界面使營銷人員和企業家可以輕鬆地 DIY 他們的商店設計，但如果您是一個完美主義者，並且對您希望商店的外觀有清晰的概念，這可能會成為一個耗時的過程。

還好可以尋求幫助！ Shopify 提供了豐富的資源和數以百計的專家，您可以信任他們來打理您的商店。 有時，最好利用專業設計師的專業知識，而不是獨自跋涉。

至於我們，在為您的 Shopify 商店提供一流營銷方面，AdRoll 為您提供支持。 如果您準備好提高銷售額，請查看適用於 Shopify 的 AdRoll 集成。