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)品就行了。

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

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

主題

主題是指，一個(gè)可以直接下載的，已經(jīng)設(shè)計(jì)好了的網(wǎng)站模板，我們只需要下載下來，插入我們的網(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)行不可靠的購買

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這是一個(gè)晚禮服出租的網(wǎng)站，那為什么說這個(gè)頁面做得好？我們也來仔細(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è)看起來很好看的有很多banner的主題，但是插入很多自己的設(shè)計(jì)之后就會(huì)，整個(gè)網(wǎng)站看起來就特別不好看。

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

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

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

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

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

Shopify主題會(huì)事先插入一些產(chǎn)品圖片在頁面上，當(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的訂單都是來自移動(dòng)端。所以，我們必須要要選一個(gè)適應(yīng)移動(dòng)端的主題。特別是對(duì)現(xiàn)在來說，如果我們的網(wǎng)站能夠適應(yīng)移動(dòng)端，我們就會(huì)給客戶一個(gè)更好的體驗(yàn)感。

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

這樣是很不保險(xiǎn)的，所以我們?cè)诮酉聛碚f的幾點(diǎn)上，都要同時(shí)確保網(wǎng)頁版和移動(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ì)我們自己的店鋪來說，數(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)格

主頁

產(chǎn)品類別

產(chǎn)品本身

產(chǎn)品頁面和其他內(nè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)格來了，要跟品牌風(fēng)格保持一致。Logo和品牌風(fēng)格都確定下來之后，我們來看看

網(wǎng)站配色：

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

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

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

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

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

字體：

? 使用字體不要超過3種

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

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

? 使用不同大小的字體

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

具體案例

Gecqo：

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

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

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

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

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

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

主頁

Ring to Perfection:

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

? 主頁最上方：

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

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

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

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

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

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

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

? 買家秀區(qū)域

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

產(chǎn)品類別

Royal Furnish：

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

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

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

產(chǎn)品本身

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

也就是說，我們要確定，我們上傳的每一件產(chǎn)品都是有可能被我們的目標(biāo)客戶購買的，而不是加很多無關(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è)余的東西。

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

? 圖片分辨率和比例大小

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

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

? 圖片比例大小

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

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

（來源：K哥聊出海）