Shopify 主題選擇需要注意的幾點事項

Shopify主題的選擇對於很多人，尤其是有選擇恐懼症的人來說，是一件讓人揪心的事情。因爲在選擇主題的時候，我們或多或少會結合自己的業務和產品的實際情況，去比較各個主題的配色佈局，功能特點，然後選擇出來那個和自己預期最相近的主題購買安裝，可是使用了一段時間之後發現，還是有各種不爽，又在考慮是不是另外一個主題更好一些，於是又安裝了另外一個主題，再過一段時間，又調回了之前的那個主題…

最近 Shopify 在國內不太穩定，如果打不開 Shopify 官網, 或者打開速度很慢，無法註冊或者登錄 Shopify 賬戶，請使用“魔法”重試，你懂的。

所以說在很多時候沒有選擇的餘地要比選擇太多來的更痛快一些。就像前段時間，和一位羣裏的朋友聊天，說他自己從接觸Shopify到現在，一步步研究，搞定了很多的技術問題：解析綁定域名，給App安裝代碼，給主題安裝亞馬遜跳轉按鈕，安裝GA，Pixel代碼… 的確，對於大部分人來說，這些都是比較新鮮的玩意兒，雖然不難，但是如果不懂，可能也還是要花個一天半天去折騰的。所以說，成長大概就是這樣被慢慢逼出來的吧。

不過，如果跟着教程操作一遍還搞不定，建議請教或者外包給他人，不要在這些事情上浪費太多的時間。

回到本篇文章的主題，原本本篇內容有三部分的：

第一部分就先來看看在選擇Shopify模板時我們需要具體考慮哪些問題；

第二部分總結性分析下目前全球排名最靠前的Shopify網站colourpop的主題功能特點。

推薦再看看下面這篇關於查找和分析競爭對手的文章，看看他們網站用的什麼主題，是如何設置的，畢竟競爭對手是我們最好的老師。

本篇文章在工作之餘斷斷續續寫了有一個多星期，還是比較簡單的內容，後面會根據大家的反饋更新文章內容。

首先開始第一部分，選擇Shopify模板，具體需要考慮些什麼問題。

Shopify 主題的字體，配色，網頁排版

其實在選擇主題，尤其是預覽主題的demo演示站點的時候，是可以忽略主題的字體和配色的。因爲絕大多數主題在安裝到你的Shopify網站之後，都是可以完全自定義各個內容板塊的文字字體、大小、顏色以及主題頁面各個板塊配色的。

但是要注意的是，這裏我們說的是在選擇主題的時候可以忽略主題的字體和配色，並不是說這兩個不重要。

要知道，色彩在營銷中有特別的意義, 特別是在線營銷。所以說在網站建站初期規劃網站的時候，結合自己的產品和服務，我們心裏對自己的網站配色風格是要有一個大致的想法的。同時在研究競爭對手的網站的時候，也要細細琢磨下他們的網站字體大小顏色，配色風格哪些是我們可以照搬過來的，哪些是需要改進的，尤其是那些流量相對較大的Shopify網站，更具有參考意義。

競爭對手網站色彩搭配的提取可以使用免費的Colorzilla網頁取色器來完成。

下面是來自KissMetrics的一張信息圖，大家可以瞭解下他們的數據研究結果（點擊圖片可以查看大圖或者下載圖片）

信息圖來源於: Kissmetrics: How do colors affect purchases?

這裏推薦另外幾篇Kissmetrics的博客文章，大家可以去大致瞭解下網站風格配色對網站訂單轉化的影響，以及男女之間對待相同的網站配色做出的反應差別，還是蠻有趣，也挺實用的（如下截圖）：

• https://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/
• https://blog.kissmetrics.com/how-colors-affect-conversions/
• https://blog.kissmetrics.com/gender-and-color/
• https://blog.kissmetrics.com/psychology-of-color-and-conversions/

Fun fact – Why are most web hyperlinks blue?

“Red and green are the colors most affected by color-vision deficiency. Almost no one has a blue deficiency. That means nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a color different from others. It was pure good luck that the default color of hyperlinks is blue with underlining”

關於網頁的排版，因爲目前Shopify系統支持Section模塊拖拽功能，所以，所有支持Section功能的主題頁面，尤其是網站的主頁的排版是很靈活的，下面在選擇主題時要考慮的的主要功能的一些點詳細說。

Shopify模板的主要功能

在第三方的Shopify模板站，例如Themeforest，選擇購買付費主題直接按照銷量排序，然後無腦選擇排名前幾的就行，例如 Ella。除非某個主題的某個在轉化上的功能對你來說特別有吸引力。

之所以這麼說，是因爲銷量最多的主題，已經經過市場的驗證，無論在主題功能上，更新上，售後上，以及代碼質量上，都不會差，我們可以減少很多試錯成本。

如果有時間，可以多比對幾款主題，看看他們的演示網站，然後再做出選擇。一些主題會集成很多其他主題需要安裝應用才能實現的功能，那就可以省下這部分錢用在其他用得着的地方。

Shopify模板的價格

Shopify官方有提供免費的主題，但是相對比較簡單，所有很多人會選擇購買主題來滿足某些特定的功能和需要。購買主題的主要途徑包括，Shopify官方的主題商城，第三方的主題網站如Themeforest和Templatemonster，以及主題開發者的官網。

我會優先推薦Shopify官方的付費主題，雖然價格稍貴，但是經過Shopify官方團隊把關，主題體驗確實是好的。但是如果你預算有限，也可以去Themeforest，主題開發者的官網，再或者是Templatemonster上購買主題（大部分的主題都是一次付費，終生使用的）

個人建議，如果需要付費主題，建議從正規渠道購買，所有上傳到Shopify以及Themeforest上的主題，都會經過Shopify或者Themeforest的全方面主題代碼檢查以保證安全，主題作者將自己的主題放在平臺上銷售期間也是接受平臺監管的，因此在安全上的風險要小很多。下圖是Themeforest對所有上傳到其網站上的主題時的安全審覈流程，供瞭解

網上分享或者某寶網上的免費的或者低價的付費主題，不排除會有別有用心的人用這種方式來獲利。安全無小事，所以還是建議大家選擇正規渠道購買付費主題，切勿貪圖便宜導致更大的損失。即使沒有安全問題，使用網上分享的“免費”Shopify付費主題，是違反Shopify服務條款的，嚴重的，有可能會直接被Shopify官方做封號處理。預警 ⚠️ 盜版Shopify付費主題可能會導致網站被封！

主題的問題是不是很多，售後服務能力如何

選擇主題之前，尤其是決定購買付費主題之前，一定要注意閱讀下這款主題的Reviews，就像老外在Amazon上買東西之前肯定是要讀讀Review的，從他人的口中對這個主題有更加全面的瞭解，包括大家對主題售後服務的評價，好，好在哪裏，不好，爲什麼不好。有了更加清楚的認識之後，再決定是否付款購買。

另外，如果是從第三方主題網站，例如Themeforest上購買主題，要看下主題是什麼時候發佈的，自發布之後經歷過幾次更新，如果是一兩年以前發佈的，並且自發布之後就沒有任何更新的主題，建議慎重購買，一方面是Shopify系統一直在更新，老舊的主題可能不適配新的Shopify系統，會出現各種各樣的小問題；而另外一方面，發佈時間久而且沒有更新，和主題作者的溝通，以及售後問題處理可能會比較麻煩。

主題的網頁加載速度

下面是來自Kissmetrics的一組數據：

• 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  
• 47% of consumers expect a web page to load in 2 seconds or less.
  
• 40% of people abandon a website that takes more than 3 seconds to load.
  
• A 1 second delay in page response can result in a 7% reduction in conversions. If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

從這組數據就可以看到，網站的打開速度的重要性了吧。Shopify網站速度優化會涉及到幾個方面，有需要的朋友可以看看WaimaoB2C之前發的一篇文章 – Shopify網站速度優化

因此在選擇主題的時候，儘可能的避免那些有很多不必要存在的特效的主題，比方說加載進度條，動畫，以及花哨的側邊滾動條等等，這些好玩兒的元素可能會吸引一部分網站訪客，但是多數情況下，這些元素會降低你的網站的打開速度，造成相反的效果。

優秀的Shopify模板注重爲用戶提供簡單的在線購物體驗，目標是賣出去儘可能多的商品，這大概也就是Shopify官方開發出來的那些免費主題都是那樣的簡潔的原因吧。感興趣的朋友可以去看看Shopify模板製作團隊是如何製作Narrative這個主題的，以及Shopify官方寫給主題開發者們的文章，從中你也能大概瞭解一些關於主題的選擇的考慮因素。

• https://www.shopify.com/partners/blog/narrative-web-performance
• https://www.shopify.com/partners/blog/18840023-how-to-optimize-themes-for-performance

主題的自適應能力 – 移動端體驗

自適應主題就是說這款主題可以自動識別屏幕的寬度高度，並且自動做出相應的頁面排版設計來適應屏幕大小，目標就是位來自各種屏幕大小訪客提供最佳的網頁瀏覽體驗。

爲什麼自適應很重要？之前有幾篇文章已經說到過，目前Shopify超過一半以上的訂單都是來自移動端的，各個渠道的流量來自移動端的也能佔到半數以上。Shopify今年黑五網一的數據也顯示移動端的訂單數量已經是PC端的兩倍了，因此說，主題的自適應能力非常的重要，直接關係到訂單的轉化。

大家不必去特別的關心某款主題是否具備自適應能力，可以說99.99%的主題都是自適應的。但是具體的顯示效果，瀏覽下單的體驗如何，就需要去實際的觀察測試了。因此建議大家在使用下面的方法瀏覽同行業的Shopify網站的時候，重點也要關注下他們網站移動端的體驗如何，有哪些地方值得學習的。

如何體驗測試呢？一種方法是直接縮小你的瀏覽器窗口大小，不同的瀏覽器窗口，網頁排版是不同的。不過如果你要精確的瞭解某品牌某具體型號的手機的使用效果，就需要使用方法二了，使用Google瀏覽器, 在打開同行Shopify網站的情況下，按下F12（或者Ctrl+Shift+I），然後點擊右側窗口左上角的手機平板小圖標，就可以了。左側窗口頂部菜單欄可以選擇不同的手機/平板型號或者直接自定義屏幕尺寸。如下圖所示

好了，以上就是目前我能想到的關於主題的選擇要考慮的一些事情，後面如果有新的要注意的點，再更新本篇文章。

下面第二部分，就以上瞎叨叨的那些內容，帶大家總結性的分析下Colourpop.com這個網站的主題風格用戶體驗。以下截圖都是2017年Colourpop網站的樣子了，網站的排版風格會有一些變化，所以，推薦直接打開官網體驗最新功能。

科學上網狀態下打開Colourpop的網站的速度還是蠻快的，網站整體很簡潔，內容間距不是特別緊湊，比較舒適。產品爲化妝品彩妝之類的產品。

色調爲紫紅色，和上面我們看到的KissMetrics的分析是一致的 – Pink: Used to Market products to women and young girls; Purple: often seen in beauty or anti-aging products.

網站彈窗功能，用於collect潛在客戶的郵箱地址。

產品列表模塊在價格和Add To Bag之間添加了Review Rate

網站的Shop the Look 和 Instagram Gallery都添加了Shopable Instagram功能，點擊Instagram的照片之後會彈窗顯示圖片模特使用的產品以及對應的產品鏈接。

當鼠標移動到網站購物車按鈕時，購物車會自動從右側滑出並顯示產品圖片，標題，價格，數量，總價等信息

在網站Collection頁面，側邊欄有產品篩選功能，並且可以自主選擇顯示還是隱藏側邊欄

支持Quick View彈窗快速購物功能 – 當鼠標放在圖片上時，會顯示quick view按鈕，點擊按鈕之後，在下方會彈出產品大圖，詳細信息以及購物車按鈕。

產品列表頁面可以無限下拉，省去翻頁加載的等待時間，體驗相對更好一些。當鼠標移動到產品圖片上時自動輪播該產品的其他圖片.
同樣在價格和Add To Bag之間添加了Review Rate.
網站內頁Gift Shop下雪的特效，烘托節日氣氛.

在產品詳情頁面，限制購買數量功能

圖片輪播放大功能
產品標題下方添加了Review Rating並且有Read Review錨鏈接跳轉到頁面底部Review板塊的功能
Cross-Sell功能
同樣在頁面中添加了Shop Instagram功能

購物車頁面和Checkout頁面沒有發現特殊功能

FAQ頁面和Contact us頁面是單獨做的，沒有在Shopify的系統上 （這裏個人覺得體驗不太好的是FAQ在同一頁面打開，而不是在新窗口中打開）

移動端的體驗。

Colourpop網站移動端的體驗也是蠻棒的，首先移動端的菜單欄和購物車按鈕和PC端的體驗一致，都是從左側右側滑出，佔滿整個手機屏幕，體驗很贊。點擊菜單欄按鈕之後，整個菜單從左側滑出，佔滿整個屏幕，點擊LIPS之後，打開的是二級菜單，同樣佔滿整個屏幕。

點擊購物車按鈕之後，購物車從右側滑出，佔滿整個屏幕

Colourpop網站的產品列表頁面和PC端一樣，也是支持無限下拉的，這種體驗在移動端上的優勢很明顯，沒有翻頁按鈕的打擾，算得上是一種沉浸式的體驗吧。

產品詳情頁面，很讚的一個功能是購物車按鈕固定在屏幕下方，不會隨着用戶下滑操作而導致購物車按鈕從頁面中消失，客戶在看到任意一個地方，都可以直接點擊購物車按鈕將該產品加入到購物車裏。這個很值得借鑑。

產品詳情頁面的另外一個功能就是上圖中購物車按鈕右上方的那個圓形的紫色按鈕 – 一款名爲Personalizer的Shopify App，可以實現相關產品的智能推薦，功能強大，體驗也相當不錯，如下圖。推薦大家安裝試用。

還有就是在購物車頁面，結賬按鈕下方，會有Cross-Sell功能，這個也不錯。