Shopify如何進(jìn)行店鋪設(shè)計(jì)？

我們?cè)谧鰏hopify的時(shí)候，也是就在選品和開始運(yùn)行店鋪之間，有很重要的一步是對(duì)于Shopify店鋪的設(shè)計(jì)。

通過Shopify這種傻瓜式的建站，我們現(xiàn)在要在網(wǎng)上建立自己的商城，只要注冊(cè)一個(gè)賬號(hào)，選擇店鋪外觀，并添加產(chǎn)品就行了。

雖然說(shuō)起來(lái)很簡(jiǎn)單，但是在這幾個(gè)步驟中間，還是有很多需要考慮的細(xì)節(jié)，不能馬虎。

你有沒有發(fā)現(xiàn)，一個(gè)糟糕的店鋪設(shè)計(jì)是很難贏得用戶的信任的。那么呢，下面這篇文章就來(lái)教大家怎樣設(shè)計(jì)一個(gè)精致的店鋪網(wǎng)站。

主題

主題是指，一個(gè)可以直接下載的，已經(jīng)設(shè)計(jì)好了的網(wǎng)站模板，我們只需要下載下來(lái)，插入我們的網(wǎng)站就可以直接使用。

大家可以直接在shopify的官網(wǎng)買主題
地址：https://themes.shopify.com/

我真的不建議大家在外面隨便亂買shopify的主題，我覺得還是經(jīng)過官方的認(rèn)證會(huì)比較安全，因?yàn)檫@種價(jià)格也不是很貴，一次性的費(fèi)用在150~180美金之間，沒必要為了省點(diǎn)費(fèi)用，而進(jìn)行不可靠的購(gòu)買

對(duì)于shopify一個(gè)店鋪來(lái)說(shuō)，網(wǎng)站的主題可以決定我們店鋪?zhàn)罱K的樣子。

第一印象是很重要的，所以我們不能只是隨機(jī)選一個(gè)模板，我們要選一個(gè)能夠真正代表我們品牌的模板。

可能會(huì)有小伙伴覺得選擇公司網(wǎng)站主題這個(gè)責(zé)任非常巨大，所以選主題的時(shí)候，我們不僅要考慮我們要的是哪一種類型的網(wǎng)站，還要去看一下不同模板的特點(diǎn)和自定義選項(xiàng)。

我們網(wǎng)站的主題就是給訪客的第一印象，所以我們下面就來(lái)看看我們?cè)谶xshopify主題之前要考慮些什么：

第一：讓訪客我們的網(wǎng)站熟悉

讓訪客對(duì)我們的網(wǎng)站熟悉是什么意思？意思就是：我們的網(wǎng)站要一眼看過來(lái)就清楚有哪些板塊，什么板塊在哪里，怎樣操作等，不要讓客戶思考。

也就是說(shuō)，我們的網(wǎng)站不要設(shè)計(jì)得太與眾不同，原則上最好按照一般網(wǎng)站來(lái)。

最好的shopify主題一般都是傳統(tǒng)型設(shè)計(jì)，用的也都是大家普遍接受的操作方式和頁(yè)面布局。就算是免費(fèi)的shopify主題也是遵循這些原則的。

下一步，想想我們的購(gòu)物車和結(jié)算頁(yè)面 — 我們一般是不會(huì)專門去網(wǎng)頁(yè)頁(yè)腳找的吧。

所以shopify主題對(duì)我們來(lái)說(shuō)是再好不過了，因?yàn)樗闹黝}是各個(gè)頁(yè)面的風(fēng)格都是保持一致得，所以用戶在我們的頁(yè)面來(lái)回轉(zhuǎn)換也會(huì)覺得比較舒服。

其實(shí)選主題最安全的方法就是選一個(gè)簡(jiǎn)單點(diǎn)的，簡(jiǎn)單的主題甚至對(duì)潛在顧客的轉(zhuǎn)化率還比較高。

也就是說(shuō)，有時(shí)候最好的shopify主題就是有讓人熟悉的風(fēng)格，以及方便用戶使用。

我們先來(lái)看一些設(shè)計(jì)得比較差的例子：

我們上面放出來(lái)給大家看的這個(gè)產(chǎn)品頁(yè)面，是用戶非常不熟悉的。我們來(lái)仔細(xì)分析一下這個(gè)頁(yè)面不好，到底不好在哪里：

? 產(chǎn)品描述，不存在的；
? 用戶評(píng)價(jià)，不存在；
? 產(chǎn)品圖片單一（只有一個(gè)顏色的正反面）；
? 沒有產(chǎn)品使用中的圖；
? 產(chǎn)品特點(diǎn)描述，沒有；
? Call-to-action按鈕，不夠清楚。

看完上面那個(gè)設(shè)計(jì)得比較差的產(chǎn)品頁(yè)面之后，我們?cè)賮?lái)看一個(gè)設(shè)計(jì)得比較好的：

這是一個(gè)晚禮服出租的網(wǎng)站，那為什么說(shuō)這個(gè)頁(yè)面做得好？我們也來(lái)仔細(xì)分析一下：

? 禮服照片高清，好看；
? Call-to-action按鈕明顯，不會(huì)錯(cuò)過；
? 而且這個(gè)圖片信息特別詳細(xì)，會(huì)自動(dòng)放大，讓客戶看到細(xì)節(jié)圖；
? 不僅有產(chǎn)品圖，還有各種碼的試穿圖；
? 下面的“+”，點(diǎn)開可以看到產(chǎn)品的很多細(xì)節(jié)描述；
? 除了上面的產(chǎn)品描述之外，還有更多相似推薦。

考慮我們可投入的資源

當(dāng)我們?cè)谶x擇shopify主題的時(shí)候，我們要先考慮，我們能投入在設(shè)計(jì)上的資源有多少？

如果我們沒有什么設(shè)計(jì)經(jīng)驗(yàn)或是預(yù)算也比較緊的話，我們一定要找banners比較少的主題。因?yàn)槿绻覀儾皇菍I(yè)設(shè)計(jì)師的話，banner是一個(gè)很難控制的元素。

很多人可能最后選的是一個(gè)看起來(lái)很好看的有很多banner的主題，但是插入很多自己的設(shè)計(jì)之后就會(huì)，整個(gè)網(wǎng)站看起來(lái)就特別不好看。

當(dāng)然，我這里建議大家一定要試用，絕大多數(shù)的模板主題都是有demo的，你可以測(cè)試下，感受感受，如果不喜歡的話，完全可以換掉。所以不要立刻就付費(fèi)購(gòu)買

另外如果你的預(yù)算不太夠的話，那么你完全可以用免費(fèi)主題，免費(fèi)主題用起來(lái)也是很有效率的。

免費(fèi)主題雖然可能不是我們最理想的選擇，但是免費(fèi)主題也是直接由shopify官方技術(shù)支持的，所以我們完全可以放心使用。

如果還是不太喜歡這個(gè)免費(fèi)主題的話，我們可以暫時(shí)先用著，然后等我們手里可用的資源多了點(diǎn)，再來(lái)?yè)Q一個(gè)更漂亮的主題。

在shopify主題上看看自己的產(chǎn)品

Shopify主題會(huì)事先插入一些產(chǎn)品圖片在頁(yè)面上，當(dāng)然這些產(chǎn)品跟主題本身是可以融合得很好的。但是我們最好要把我們自己的產(chǎn)品圖片P到上面看一下，看我們的產(chǎn)品照片放在上面是什么樣子，搭不搭？

還有，如果我們目前還沒有高清的產(chǎn)品圖的話，建議不要選產(chǎn)品展示板塊特別大的主題。

我們?nèi)绻麤]辦法自己拍產(chǎn)品圖的話，其實(shí)Oberlo的圖片都是很高清的，所以如果我們?cè)贠berlo上，甚至是有時(shí)候速賣通上找圖片也都是可以的。

移動(dòng)端自適應(yīng)主題

超過50%的Shopify的訂單都是來(lái)自移動(dòng)端。所以，我們必須要要選一個(gè)適應(yīng)移動(dòng)端的主題。特別是對(duì)現(xiàn)在來(lái)說(shuō)，如果我們的網(wǎng)站能夠適應(yīng)移動(dòng)端，我們就會(huì)給客戶一個(gè)更好的體驗(yàn)感。

很多做eCommerce的賣家都是，在選好，安裝好了之后，才會(huì)想起來(lái)去看看自己網(wǎng)站移動(dòng)端能不能適應(yīng)。

這樣是很不保險(xiǎn)的，所以我們?cè)诮酉聛?lái)說(shuō)的幾點(diǎn)上，都要同時(shí)確保網(wǎng)頁(yè)版和移動(dòng)端都是能適應(yīng)的。Ps：免費(fèi)主題都是移動(dòng)端自適應(yīng)的。

選擇加載快的主題

我們?cè)谶x主題的時(shí)候還要注意一點(diǎn)，不要選那些加載慢的網(wǎng)站，像有什么奇怪的動(dòng)畫啊，或是什么其他的滑動(dòng)展示什么的。

有些小伙伴可能會(huì)覺得放些動(dòng)畫和展示圖片會(huì)很吸引人，但其實(shí)這些因素會(huì)拖慢我們的網(wǎng)站運(yùn)行速度。

最好的主題往往都是運(yùn)行非?？斓?，不僅僅要吸引顧客下單，還要保證顧客的用戶體驗(yàn)。Amazon的話，加載速度每慢一秒，他們的年銷售額就會(huì)少160億美金。當(dāng)然，對(duì)我們自己的店鋪來(lái)說(shuō)，數(shù)字肯定小很多，但是，大家懂這個(gè)意思就行。所以，選主題的時(shí)候，一定不能忘了這一點(diǎn)。

Tips

我們前面的文章也有講過，shopify本身的可以選的主題比較少，而且收費(fèi)也比較高。

所以我們選主題，不一定非要在shopify上選，我們還可以在theme forest上找：https://themeforest.net/

網(wǎng)站設(shè)計(jì)的6個(gè)主要方面

Shopify店鋪設(shè)計(jì)可以分為6個(gè)方面：

• logo和品牌風(fēng)格

• 主頁(yè)

• 產(chǎn)品類別

• 產(chǎn)品本身

• 產(chǎn)品頁(yè)面和其他內(nèi)容

下面我們來(lái)具體分析：

Logo和品牌風(fēng)格

? logo和品牌風(fēng)格。品牌風(fēng)格我想大家心里應(yīng)該都比較清楚，看產(chǎn)品行業(yè)適合什么風(fēng)格或是，你喜歡什么風(fēng)格。Logo呢，怎樣設(shè)計(jì)自己的logo？

要設(shè)計(jì)logo，如果不是專業(yè)設(shè)計(jì)的小伙伴，估計(jì)自己畫是比較難的。所以我們還是可以用一下其他的工具。比如Canva：https://www.canva.com/

設(shè)計(jì)logo的時(shí)候，我們就要圍繞的我們品牌風(fēng)格來(lái)了，要跟品牌風(fēng)格保持一致。Logo和品牌風(fēng)格都確定下來(lái)之后，我們來(lái)看看

網(wǎng)站配色：

那我們不知道哪些色調(diào)比較搭怎么辦？或是我們從一開始就不知道選什么顏色怎么辦？

如果完全還沒想好品牌顏色的話，我們可以根據(jù)我們的產(chǎn)品來(lái)找靈感。

比如：產(chǎn)品是木制家具或是皮革制品，可以選擇棕色，米色和橙色等自然，溫和一點(diǎn)的色調(diào)。

不會(huì)配色的小伙伴呢，可以借助在線調(diào)色板工具的幫助：https://colorhunt.co/

既然講了配色，我們就不得不講講字體。

字體：

? 使用字體不要超過3種

反正說(shuō)來(lái)說(shuō)去，就是一致性。所以我們的字體最好也不要搞得花里胡哨的，看起來(lái)不整潔。字體有三個(gè)要求 — 易讀，一致以及清晰。

? 字體搭配協(xié)調(diào)
我們說(shuō)字體不要超過3種，而不是說(shuō)只用一種，因?yàn)橹挥靡环N的花，有些內(nèi)容可能會(huì)難以區(qū)分，而且也會(huì)顯得有點(diǎn)單調(diào)。所以我們可以用一個(gè)字體的：常規(guī)版本，粗體和斜體來(lái)搭配使用。

? 使用不同大小的字體

除了用字體的不同版本，我們還可以用不同大小的字體來(lái)突顯不同的內(nèi)容。內(nèi)容越重要，字體就越大。當(dāng)然要大的合理，不要太夸張。

具體案例

Gecqo：

網(wǎng)站地址：https://www.gecqo.com/

Gecqo，字面意思就是“壁虎”，而且我們可以看到他們Logo的大寫G就是一個(gè)壁虎的樣子，可以說(shuō)是很特別了，而且整個(gè)風(fēng)格也是非常清新。

我們?cè)偻禄纯聪旅娴捻?yè)面，我們可以看到，他們整個(gè)頁(yè)面的風(fēng)格都是非常的一致，這些界面的主題風(fēng)格都是一致的，看起來(lái)非常舒服。

也就是說(shuō)，我們?cè)谠O(shè)計(jì)我們的shopify網(wǎng)站的時(shí)候，選好logo和品牌風(fēng)格之后，我們后面的內(nèi)容都是全部要圍繞logo和品牌風(fēng)格來(lái)做。

很多人在設(shè)計(jì)的時(shí)候，經(jīng)常會(huì)忘記要保持風(fēng)格的一致性，就把一堆覺得好看的東西都東加一點(diǎn)，西加一點(diǎn)，然后整個(gè)網(wǎng)站看起來(lái)就是很雜，很亂。我

們千萬(wàn)不要覺得保持網(wǎng)站的風(fēng)格一致不重要，網(wǎng)站風(fēng)格是不是一致其實(shí)會(huì)很大程度上影響訪客對(duì)我們的印象 — 包括網(wǎng)站合法性，權(quán)威性，以及使用難易度，客戶體驗(yàn)度等。

主頁(yè)

Ring to Perfection:

像我們剛才說(shuō)的，這個(gè)主頁(yè)也是跟logo和品牌風(fēng)格保持一致的。我們可以看到圖片中產(chǎn)品名字使用的字體跟logo的字體是一樣的，而且主頁(yè)整體風(fēng)格也是清晰，整潔。

? 主頁(yè)最上方：

主頁(yè)照片的風(fēng)格，色調(diào)也都是一樣的。而且他們不僅僅是展示產(chǎn)品圖片，還有產(chǎn)品的使用圖，以及一些關(guān)鍵性的描述詞。

? 主頁(yè)的其他細(xì)節(jié)

比如主頁(yè)的最上方的導(dǎo)航，最上方的信息包括了訂單超過30美金包郵，以及聯(lián)系方式啊，追蹤訂單等等的信息：

? 站內(nèi)導(dǎo)航

非常簡(jiǎn)單明了，容易操作，訪客可以很容易找到他們要找的東西。

? 最受歡迎的產(chǎn)品系列

這個(gè)頁(yè)面看起來(lái)也是非常干凈，舒服。主頁(yè)下面就直接給訪客看最受的產(chǎn)品的系列，可以刺激他們的消費(fèi)沖動(dòng)。

? 買家秀區(qū)域

這個(gè)區(qū)域是很重要的，我們之前的社交證明，顧客反饋有多重要也說(shuō)過很多次了，大家肯定也都很清楚了。所以，如果大家有社交賬號(hào)，而且有粉絲互動(dòng)，發(fā)買家秀的話，強(qiáng)烈建議大家設(shè)置一個(gè)這樣的板塊。

產(chǎn)品類別

Royal Furnish：

地址：https://www.royalfurnish.com/

這個(gè)網(wǎng)站的主頁(yè)看起來(lái)很簡(jiǎn)單，但是因?yàn)樗麄兊漠a(chǎn)品系列很多，但是這個(gè)網(wǎng)站把這么多的產(chǎn)品類別都分類整理得非常好。

清晰，干凈，一目了然。而且在節(jié)省網(wǎng)頁(yè)空間的同時(shí)，他們還能有對(duì)產(chǎn)品有描述性的圖片。分類展示得非常好。

產(chǎn)品本身

產(chǎn)品本身無(wú)疑是非常非常重要的一點(diǎn)，我們?cè)诮o我們的商店添加產(chǎn)品的時(shí)候，我們要確保這些產(chǎn)品跟我們的niche是非常相關(guān)的

也就是說(shuō)，我們要確定，我們上傳的每一件產(chǎn)品都是有可能被我們的目標(biāo)客戶購(gòu)買的，而不是加很多無(wú)關(guān)產(chǎn)品進(jìn)去。這樣反而會(huì)分散我們潛在客戶的注意力。

? 跟niche高度相關(guān)

所以我們要加的產(chǎn)品是要高質(zhì)量的，跟我們的目標(biāo)客戶非常相關(guān)的產(chǎn)品。比如：Survival world hq：

地址：https://survivalworldhq.com/

這個(gè)品牌主要是做一些野外生存的工具的，他們的目標(biāo)客戶就是對(duì)野外生存有興趣的人群。所以他們的產(chǎn)品都是非常有針對(duì)性的，也就是非常專業(yè)的野外求生工具，完全沒有業(yè)余的東西。

說(shuō)到產(chǎn)品本身，不只是要跟niche高度相關(guān)，畢竟我們是線上店，展示產(chǎn)品就要靠圖片，我們接下來(lái)我們就來(lái)講講我們的圖片有什么標(biāo)準(zhǔn)要遵循。

? 圖片分辨率和比例大小

在選擇主題的時(shí)候，圖片也是我們絕對(duì)不能忽略的一個(gè)要點(diǎn)。前面我們講了圖片要高清，我們這里說(shuō)的高清是什么概念？

說(shuō)得更具體一點(diǎn)，我們上傳的圖片像素至少要是1024?1024.如果可以的話呢，最好是按shopify的最高分辨率上傳，也就是2048?2048.

? 圖片比例大小

我們的產(chǎn)品是是會(huì)在我們網(wǎng)站的很多板塊重復(fù)出現(xiàn)的，比如首頁(yè)，產(chǎn)品相冊(cè)頁(yè)，產(chǎn)品頁(yè)。像我們前面說(shuō)的，網(wǎng)站的色調(diào)和風(fēng)格要保持一致，現(xiàn)在圖片的比例也要保持一致。

圖片的比例大小保持一致，會(huì)讓我們的網(wǎng)站整體看起來(lái)非常整潔，布局非常清晰。

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

Puravida：

https://www.puravidabracelets.com/

? 購(gòu)買頁(yè)面

非常高清的圖片，非常簡(jiǎn)單的界面。也是非常熟悉的操作界面，選擇戒指尺寸，call-to-action按鈕清晰顯眼。

? 產(chǎn)品描述和細(xì)節(jié)

他的產(chǎn)品描述和細(xì)節(jié)是分開的，是不是很多小伙伴之前都沒有這樣分開過？如果我們把這個(gè)兩個(gè)分開的話，會(huì)顯得更加專業(yè) — 描述是描述，細(xì)節(jié)是專業(yè)細(xì)節(jié)。

? 其他信息

有Instagram用戶的買家秀，而且是很好看的買家秀。還有品牌的一些特點(diǎn)，他們的做的慈善啊，粉絲有多少啊，包郵啊等等。

還有下面這個(gè)非常清晰的評(píng)價(jià)。有這個(gè)評(píng)價(jià)的話，可以很輕易地獲得訪客的訪客的信任。

? 猜你喜歡

這個(gè)產(chǎn)品頁(yè)真的做得很厲害了。

其他信息

WVMT:

我們來(lái)看看這個(gè)，上面標(biāo)出來(lái)的就是傳說(shuō)中的“其他信息”。這個(gè)網(wǎng)站的這個(gè)板塊是做得比較好的，信息比較全，也比較細(xì)，還很整潔。

比如他們的客戶服務(wù)這一塊：只要是客戶有可能會(huì)需要的，他們都有cover到，還有FAQ板塊，所以客戶有什么問題直接在網(wǎng)站論壇搜索答案，或是自己?jiǎn)柧托辛恕?/p>

這個(gè)聯(lián)系方式這里，有郵箱地址，有聯(lián)系電話，營(yíng)業(yè)時(shí)間。

還有后面那個(gè)“Join the MVMT”這個(gè)地方，這其實(shí)是一個(gè)很好的跟訪客互動(dòng)的地方，這里訪客可以看到品牌的故事，建立品牌信任感；博客，還可以把網(wǎng)站分享給別人等等。

寫在最后：

大家不用覺得Shopify店鋪設(shè)計(jì)好麻煩，其實(shí)以shopify這種傻瓜式的設(shè)計(jì)，已經(jīng)為你節(jié)省了非常多的時(shí)間。

另外店鋪的設(shè)計(jì)一定要花點(diǎn)時(shí)間，好的設(shè)計(jì)，是可以為你網(wǎng)站的產(chǎn)品獲取更高的收益，也可以贏取更多客戶的信任！