Shopify主題的選擇對(duì)于很多人，尤其是有選擇恐懼癥的人來(lái)說(shuō)，是一件讓人揪心的事情。因?yàn)樵谶x擇主題的時(shí)候，我們或多或少會(huì)結(jié)合自己的業(yè)務(wù)和產(chǎn)品的實(shí)際情況，去比較各個(gè)主題的配色布局，功能特點(diǎn)，然后選擇出來(lái)那個(gè)和自己預(yù)期最相近的主題購(gòu)買安裝，可是使用了一段時(shí)間之后發(fā)現(xiàn)，還是有各種不爽，又在考慮是不是另外一個(gè)主題更好一些，于是又安裝了另外一個(gè)主題，再過(guò)一段時(shí)間，又調(diào)回了之前的那個(gè)主題…

所以說(shuō)在很多時(shí)候沒(méi)有選擇的余地要比選擇太多來(lái)的更痛快一些。就像前段時(shí)間，和一位群里的朋友聊天，說(shuō)他自己從接觸Shopify到現(xiàn)在，一步步研究，搞定了很多的技術(shù)問(wèn)題：解析綁定域名，給App安裝代碼，給主題安裝亞馬遜跳轉(zhuǎn)按鈕，安裝GA，Pixel代碼… 的確，對(duì)于大部分人來(lái)說(shuō)，這些都是比較新鮮的玩意兒，雖然不難，但是如果不懂，可能也還是要花個(gè)一天半天去折騰的，所以說(shuō)，成長(zhǎng)大概就是這樣被慢慢逼出來(lái)的吧。不過(guò)，如果跟著教程操作一遍還搞不定，建議請(qǐng)教或者外包給他人，不要在這些事情上浪費(fèi)太多的時(shí)間。

回到本篇文章的主題，原本本篇內(nèi)容有三部分的：

第一部分就先帶大家來(lái)看看關(guān)于Shopify主題的選擇，我們需要具體考慮些什么問(wèn)題； 第二部分總結(jié)幾種查找競(jìng)爭(zhēng)對(duì)手網(wǎng)站，如何對(duì)競(jìng)爭(zhēng)對(duì)手的網(wǎng)站做簡(jiǎn)單分析。

第二部分總結(jié)性的分析下目前全球排名最靠前的Shopify網(wǎng)站colourpop的主題特點(diǎn)。

不過(guò)在發(fā)文章的時(shí)候，考慮到第二部分內(nèi)容之前有不少人在群里問(wèn)到過(guò)，所以決定單獨(dú)再發(fā)一篇文章詳細(xì)的說(shuō)說(shuō)。本篇文章的一個(gè)思路大概就是首先和大家聊聊Shopify主題選擇的時(shí)候大概需要注意或者要考慮的事情，然后去Google找其他人的Shopify網(wǎng)站，尤其是做的比較好的同行競(jìng)爭(zhēng)對(duì)手的Shopify網(wǎng)站進(jìn)行分析研究，對(duì)自己的網(wǎng)站需求有更加明確清晰的了解。最后一部分內(nèi)容結(jié)合Colourpop這個(gè)網(wǎng)站總結(jié)性的簡(jiǎn)單聊聊我所看到的Colourpop網(wǎng)站的特點(diǎn)亮點(diǎn)。

本篇文章在工作之余斷斷續(xù)續(xù)寫了有一個(gè)多星期，還是比較簡(jiǎn)單的內(nèi)容，后面會(huì)根據(jù)大家的反饋更新文章內(nèi)容。

首先開始第一部分，選擇Shopify主題，具體需要考慮些神馬問(wèn)題。選擇一款主題，你可能需要考慮的問(wèn)題大概會(huì)有如下幾點(diǎn)：

主題的字體，配色，網(wǎng)頁(yè)排版主題的主要功能

主題的價(jià)格

主題的問(wèn)題是不是很多，售后服務(wù)能力如何主題的網(wǎng)頁(yè)加載速度

主題的自適應(yīng)能力

等等等等 （如果后面有想到新的重要的點(diǎn)，會(huì)再更新） 先來(lái)聊下主題的字體，配色，網(wǎng)頁(yè)排版

在選擇主題，尤其是預(yù)覽主題的demo演示站點(diǎn)的時(shí)候，是可以忽略主題的字體和配色的， 因?yàn)榻^大多數(shù)主題在安裝到你的Shopify網(wǎng)站之后，都是可以完全自定義各個(gè)內(nèi)容板塊的文字字體、大小、顏色以及主題頁(yè)面各個(gè)板塊的配色的。

但是要注意的是，這里我們說(shuō)的是在選擇主題的時(shí)候可以忽略主題的字體和配色，并不是說(shuō)這兩個(gè)不重要，要知道，色彩在營(yíng)銷中有特別的意義,特別是在線營(yíng)銷。所以說(shuō)在網(wǎng)站建站初期規(guī)劃網(wǎng)站的時(shí)候，結(jié)合自己的產(chǎn)品和服務(wù)，我們心里對(duì)自己的網(wǎng)站配色風(fēng)格是要有一個(gè)大致的想法的。同時(shí)在研究競(jìng)爭(zhēng)對(duì)手的網(wǎng)站的時(shí)候，也要細(xì)細(xì)琢磨下他們的網(wǎng)站字體大小顏 色，配色風(fēng)格哪些是我們可以照搬過(guò)來(lái)的，哪些是需要改進(jìn)的，尤其是那些流量相對(duì)較大的

Shopify網(wǎng)站，更具有參考意義。

下面是來(lái)自KissMetrics的一張信息圖，大家可以了解下他們的數(shù)據(jù)研究結(jié)果（點(diǎn)擊圖片可以查看大圖或者下載圖片）

信息圖來(lái)源于: Kissmetrics: How do colors affect purchases?

這里推薦另外幾篇Kissmetrics的博客文章，大家可以去大致了解下網(wǎng)站風(fēng)格配色對(duì)網(wǎng)站訂單轉(zhuǎn)化的影響，以及男女之間對(duì)待相同的網(wǎng)站配色做出的反應(yīng)差別，還是蠻有趣，也挺實(shí)用的

（如下截圖）：

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/

關(guān)于網(wǎng)頁(yè)的排版，因?yàn)槟壳癝hopify系統(tǒng)支持Section模塊拖拽功能，所以，所有支持Section 功能的主題頁(yè)面，尤其是網(wǎng)站的主頁(yè)的排版是很靈活的，下面在選擇主題時(shí)要考慮的的主要功能的一些點(diǎn)詳細(xì)說(shuō)。

Shopify主題的主要功能

在第三方的Shopify主題站，例如Themeforest，選擇購(gòu)買付費(fèi)主題之前一定要看好，該主題是否支持Shopify的Section功能，也就是Shopify Drap & Drop Section Editor Support字樣， 網(wǎng)頁(yè)模塊拖拽自定義模塊功能。支持Section功能的主題，你可以使用鼠標(biāo)點(diǎn)擊和拖動(dòng)就可以隨意添加刪減以及排序網(wǎng)頁(yè)模塊。

通常最新的Shopify主題都是支持Shopify的Section功能的，一些發(fā)布時(shí)間比較久的主題，可能是不支持Section功能的，也就意味著這類主題的網(wǎng)頁(yè)排版是固定的（當(dāng)然，如果你有對(duì)主題的二次開發(fā)能力，就是另外一回事情了），你看到的Demo站是什么樣子的，那你安裝好主題之后就是什么樣子的了。

另外主題會(huì)自帶一些Shopify App也可以實(shí)現(xiàn)的功能，比方說(shuō)Mega Menu, Popup, Cross- Sell, Product Compare Countdown, Countdown Timer等等等等，主題的所有功能都仔細(xì)看一遍吧，一般來(lái)講，主題功能越多，則價(jià)格越高，并且主題文件越大，影響網(wǎng)站打開速度的因素越多。要做個(gè)取舍。當(dāng)然，如上所說(shuō)，如果主題各個(gè)方面都挺不錯(cuò)，但是就一兩個(gè)你想要的功能沒(méi)有，那可以去Shopify的App Store找下相關(guān)的APP。

如果你是個(gè)新手，對(duì)這些感到迷茫，那你可以用后面的方法去搜索你所在行業(yè)的Shopify網(wǎng)站，把那些你覺(jué)得不錯(cuò)的網(wǎng)站綜合起來(lái)做個(gè)分析，在紙上和腦子里給你自己的網(wǎng)站做個(gè)基本的架構(gòu)，那么后面在決定選用哪個(gè)主題的時(shí)候就輕松多了。

主題的價(jià)格

https://yourshopify.com/有提供免費(fèi)的Shopify主題，但是相對(duì)比較簡(jiǎn)單，所有很多人會(huì)選擇購(gòu)買主題來(lái)滿足某些特定的功能和需要。購(gòu)買Shopify主題的主要途徑包括，Shopify官方的主題商城， 第三方的主題網(wǎng)站如Themeforest和Templatemonster，以及主題開發(fā)者的官網(wǎng)。從付費(fèi)主題價(jià)格來(lái)講，Themeforest是首選，然后是主題開發(fā)者的官網(wǎng)，再然后是Templatemonster，最后是Shopify的theme store。

個(gè)人建議，如果需要付費(fèi)主題，建議從正規(guī)渠道購(gòu)買，所有上傳到Shopify以及Themeforest 上的主題，都會(huì)經(jīng)過(guò)Shopify或者Themeforest的全方面主題代碼檢查以保證安全，主題作者將自己的主題放在平臺(tái)上銷售期間也是接受平臺(tái)監(jiān)管的，因此在安全上的風(fēng)險(xiǎn)要小很多。下圖是Themeforest對(duì)所有上傳到其網(wǎng)站上的主題時(shí)的安全審核流程，供了解

Themeforest安全審核流程

網(wǎng)上分享或者某寶網(wǎng)上的免費(fèi)的或者低價(jià)的付費(fèi)主題，不排除會(huì)有別有用心的人用這種方式來(lái)獲利。安全無(wú)小事，所以還是建議大家選擇正規(guī)渠道購(gòu)買付費(fèi)主題，切勿貪圖便宜導(dǎo)致更大的損失。

主題的問(wèn)題是不是很多，售后服務(wù)能力如何

選擇主題之前，尤其是決定購(gòu)買付費(fèi)主題之前，一定要注意閱讀下這款主題的Reviews，就像老外在Amazon上買東西之前肯定是要讀讀Review的，從他人的口中對(duì)這個(gè)主題有更加全面的了解，包括大家對(duì)主題售后服務(wù)的評(píng)價(jià)，好，好在哪里，不好，為什么不好。有了更加

清楚的認(rèn)識(shí)之后，再?zèng)Q定是否付款購(gòu)買。

另外，如果是從第三方Shopify主題網(wǎng)站，例如Themeforest上購(gòu)買主題，要看下主題是什么時(shí)候發(fā)布的，自發(fā)布之后經(jīng)歷過(guò)幾次更新，如果是一兩年以前發(fā)布的，并且自發(fā)布之后就沒(méi)有任何更新的主題，建議慎重購(gòu)買，一方面是Shopify系統(tǒng)一直在更新，老舊的主題可能不適配新的Shopify系統(tǒng)，會(huì)出現(xiàn)各種各樣的小問(wèn)題；而另外一方面，發(fā)布時(shí)間久而且沒(méi)有更新， 和主題作者的溝通，以及售后問(wèn)題處理可能會(huì)比較麻煩。

主題的網(wǎng)頁(yè)加載速度

下面是來(lái)自Kissmetrics的一組數(shù)據(jù)：

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.

從這組數(shù)據(jù)就可以看到，網(wǎng)站的打開速度的重要性了吧。Shopify網(wǎng)站速度優(yōu)化會(huì)涉及到幾個(gè)方面。

因此在選擇Shopify主題的時(shí)候，盡可能的避免那些有很多不必要存在的特效的主題，比方說(shuō)加載進(jìn)度條，動(dòng)畫，以及花哨的側(cè)邊滾動(dòng)條等等，這些好玩兒的元素可能會(huì)吸引一部分網(wǎng)站訪客，但是多數(shù)情況下，這些元素會(huì)降低你的網(wǎng)站的打開速度，造成相反的效果。

優(yōu)秀的Shopify主題注重為用戶提供簡(jiǎn)單的在線購(gòu)物體驗(yàn)，目標(biāo)是賣出去盡可能多的商品，這大概也就是Shopify官方開發(fā)出來(lái)的那些免費(fèi)主題都是那樣的簡(jiǎn)潔的原因吧。感興趣的朋友可以去看看Shopify主題制作團(tuán)隊(duì)是如何制作Narrative這個(gè)主題的，以及Shopify官方寫給主題開發(fā)者們的文章，從中你也能大概了解一些關(guān)于主題的選擇的考慮因素。

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

主題的自適應(yīng)能力

自適應(yīng)主題就是說(shuō)這款Shopify主題可以自動(dòng)識(shí)別屏幕的寬度高度，并且自動(dòng)做出相應(yīng)的頁(yè)面排版設(shè)計(jì)來(lái)適應(yīng)屏幕大小，目標(biāo)就是位來(lái)自各種屏幕大小訪客提供最佳的網(wǎng)頁(yè)瀏覽體驗(yàn)。

為什么自適應(yīng)很重要？之前有幾篇文章已經(jīng)說(shuō)到過(guò)，目前Shopify超過(guò)一半以上的訂單都是來(lái)自移動(dòng)端的，各個(gè)渠道的流量來(lái)自移動(dòng)端的也能占到半數(shù)以上。Shopify今年黑五網(wǎng)一的數(shù)據(jù)也顯示移動(dòng)端的訂單數(shù)量已經(jīng)是PC端的兩倍了，因此說(shuō)，主題的自適應(yīng)能力非常的重要，直接關(guān)系到訂單的轉(zhuǎn)化。

大家不必去特別的關(guān)心某款主題是否具備自適應(yīng)能力，可以說(shuō)99.99%的Shopify主題都是自適應(yīng)的。但是具體的顯示效果，瀏覽下單的體驗(yàn)如何，就需要去實(shí)際的觀察測(cè)試了。因此建議大家在使用下面的方法瀏覽同行業(yè)的Shopify網(wǎng)站的時(shí)候，重點(diǎn)也要關(guān)注下他們網(wǎng)站移動(dòng)端的體驗(yàn)如何，有哪些地方值得學(xué)習(xí)的。

如何體驗(yàn)測(cè)試呢？一種方法是直接縮小你的瀏覽器窗口大小，不同的瀏覽器窗口，網(wǎng)頁(yè)排版是不同的。不過(guò)如果你要精確的了解某品牌某具體型號(hào)的手機(jī)的使用效果，就需要使用方法二了，使用Google瀏覽器, 在打開同行Shopify網(wǎng)站的情況下，按下F12（或者

Ctrl+Shift+I），然后點(diǎn)擊右側(cè)窗口左上角的手機(jī)平板小圖標(biāo)，就可以了。左側(cè)窗口頂部菜單欄可以選擇不同的手機(jī)/平板型號(hào)或者直接自定義屏幕尺寸。如下圖所示

好了，以上就是目前我能想到的關(guān)于Shopify主題的選擇要考慮的一些事情，后面如果有新的要注意的點(diǎn)，再更新本篇文章。

下面第二部分，就以上瞎叨叨的那些內(nèi)容，帶大家總結(jié)性的分析下Colourpop.com這個(gè)網(wǎng)站的主題風(fēng)格用戶體驗(yàn)。

網(wǎng)站首頁(yè)

科學(xué)上網(wǎng)狀態(tài)下打開Colourpop的網(wǎng)站的速度還是蠻快的，網(wǎng)站整體很簡(jiǎn)潔，內(nèi)容間距不是特別緊湊，比較舒適。產(chǎn)品為化妝品彩妝之類的產(chǎn)品。

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

網(wǎng)站彈窗功能，用于collect潛在客戶的郵箱地址。

產(chǎn)品列表模塊在價(jià)格和Add To Bag之間添加了Review Rate

網(wǎng)站的Shop the Look 和 Instagram Gallery都添加了Shopable Instagram功能，點(diǎn)擊Instagram的照片之后會(huì)彈窗顯示圖片模特使用的產(chǎn)品以及對(duì)應(yīng)的產(chǎn)品鏈接。

當(dāng)鼠標(biāo)移動(dòng)到網(wǎng)站購(gòu)物車按鈕時(shí)，購(gòu)物車會(huì)自動(dòng)從右側(cè)滑出并顯示產(chǎn)品圖片，標(biāo)題，價(jià)格， 數(shù)量，總價(jià)等信息

網(wǎng)站Collection頁(yè)面

側(cè)邊欄有產(chǎn)品篩選功能，并且可以自主選擇顯示還是隱藏側(cè)邊欄

支持Quick View彈窗快速購(gòu)物功能 – 當(dāng)鼠標(biāo)放在圖片上時(shí)，會(huì)顯示quick view按鈕，點(diǎn)擊按鈕之后，在下方會(huì)彈出產(chǎn)品大圖，詳細(xì)信息以及購(gòu)物車按鈕。

產(chǎn)品列表頁(yè)面可以無(wú)限下拉，省去翻頁(yè)加載的等待時(shí)間，體驗(yàn)相對(duì)更好一些。當(dāng)鼠標(biāo)移動(dòng)到產(chǎn)品圖片上時(shí)自動(dòng)輪播該產(chǎn)品的其他圖片.

同樣在價(jià)格和Add To Bag之間添加了Review Rate.

網(wǎng)站內(nèi)頁(yè)Gift Shop下雪的特效，烘托節(jié)日氣氛.

產(chǎn)品詳情頁(yè)面

限制購(gòu)買數(shù)量功能

圖片輪播放大功能

產(chǎn)品標(biāo)題下方添加了Review Rating并且有Read Review錨鏈接跳轉(zhuǎn)到頁(yè)面底部Review板塊的功能

Cross-Sell功能

同樣在頁(yè)面中添加了Shop Instagram功能其他頁(yè)面

購(gòu)物車頁(yè)面和Checkout頁(yè)面沒(méi)有發(fā)現(xiàn)特殊功能

FAQ頁(yè)面和Contact us頁(yè)面是單獨(dú)做的，沒(méi)有在Shopify的系統(tǒng)上 （這里個(gè)人覺(jué)得體驗(yàn)不太好的是FAQ在同一頁(yè)面打開，而不是在新窗口中打開）

移動(dòng)端的體驗(yàn)

Colourpop網(wǎng)站移動(dòng)端的體驗(yàn)也是蠻棒的，首先移動(dòng)端的菜單欄和購(gòu)物車按鈕和PC端的體驗(yàn)一致，都是從左側(cè)右側(cè)滑出，占滿整個(gè)手機(jī)屏幕，體驗(yàn)很贊。

點(diǎn)擊菜單欄按鈕之后，整個(gè)菜單從左側(cè)滑出，占滿整個(gè)屏幕，點(diǎn)擊LIPS之后，打開的是二級(jí)菜單，同樣占滿整個(gè)屏幕。

點(diǎn)擊購(gòu)物車按鈕之后，購(gòu)物車從右側(cè)滑出，占滿整個(gè)屏幕

Colourpop網(wǎng)站的產(chǎn)品列表頁(yè)面和

PC端一樣，也是支持無(wú)限下拉的， 這種體驗(yàn)在移動(dòng)端上的優(yōu)勢(shì)很明 顯，沒(méi)有翻頁(yè)按鈕的打擾，算得上是一種沉浸式的體驗(yàn)吧。

產(chǎn)品詳情頁(yè)面，很贊的一個(gè)功能是購(gòu)物車按鈕固定在屏幕下方，不會(huì)隨著用戶下滑操作而導(dǎo)致購(gòu)物車按鈕從頁(yè)面中消失，客戶在看到任意一個(gè)地方，都可以直接點(diǎn)擊購(gòu)物車按鈕將該產(chǎn)品加入到購(gòu)物車?yán)铩＿@個(gè)很值得借鑒。

產(chǎn)品詳情頁(yè)面的另外一個(gè)功能就是上圖中購(gòu)物車按鈕右上方的那個(gè)圓形的紫色按鈕 – 一款名為

Personalizer的Shopify App，可以實(shí)現(xiàn)相關(guān)產(chǎn)品的智能推薦，功能強(qiáng)大，體驗(yàn)也相當(dāng)不錯(cuò)，如下圖。推薦大家安裝試用。

還有就是在購(gòu)物車頁(yè)面，結(jié)賬按鈕下方，會(huì)有Cross-Sell功能，這個(gè)也不錯(cuò)。

更多shopify咨詢請(qǐng)關(guān)注https://yourshopify.com/，提供shopify主題購(gòu)買，代運(yùn)營(yíng)，代建站

更多谷歌推廣，外貿(mào)建站咨詢請(qǐng)關(guān)注西木建站https://www.weswoo.com/