一篇文章帶你了解Shopify的全部網(wǎng)頁設(shè)計

時間：2023-09-27 08:48:01 | 來源：網(wǎng)站運營

時間：2023-09-27 08:48:01 來源：網(wǎng)站運營

一篇文章帶你了解Shopify的全部網(wǎng)頁設(shè)計：轉(zhuǎn)自三月夢囈

獨立站的頁面，設(shè)計從我的從業(yè)Shopify經(jīng)驗來看，一個網(wǎng)站的設(shè)計主要會包含以下幾個方面：①插件的選擇 ②landing page的設(shè)計 ③主題選擇和裝修

下面我們就詳細(xì)的來幫大家指導(dǎo)一下：







（1）Shopify的“裝機必備” 插件介紹




接觸過Shopify的獨立站賣家應(yīng)該都知道，Shopify有非常多插件，多到讓人眼花繚亂，讓賣家十分頭大，今天總結(jié)下比較好用的插件，希望能幫到大家！下面我將分為7個版塊給大家介紹這些插件。

簡單來講，Shopify就像一部手機，擁有手機只能滿足你打電話、發(fā)短信的基本需求，如果想實現(xiàn)購買東西、視頻聊天等功能，你就要下載某寶、某信。同樣shopify店鋪開下來之后，也是只有基礎(chǔ)的購物功能，但是Shopify 的兼容性非常好，如果你要批量管理產(chǎn)品，批量管理訂單，高級的郵件營銷等功能，只需安裝相應(yīng)的插件即可。話不多說，開始今天的正題~

1）店鋪設(shè)計

1.Sales Pop：彈窗銷售信息插件+彈窗銷售信息插件（有免費和付費的版本）

2.Privy：退出時彈窗留存+功能強大的EDM營銷（15天免費試用）

3.BEST Currency Converter：動態(tài)貨幣顯示（有免費和付費版本）

4.McAfee SECURE：網(wǎng)站安全性顯示插件

5.Quick Announcement Bar：公告欄插件（有免費和付費版本）

6.Product Reviews：評論系統(tǒng)插件（免費）

2）產(chǎn)品渠道

1.Oberlo：目前比較火的一款產(chǎn)品上架插件。Shopify 一件代發(fā)插件，簡單來講，就是把其他渠道的貨一鍵搬家到你的Shopify店鋪，客戶下單給你的shopify店鋪，系統(tǒng)再自動下單給你的貨源渠道，適合想做drop shipping的賣家。賣家可以將精力集中在營銷上。

價格：分為免費、$ 29.90/月 、$ 79.90/月

2.Spreadr App：導(dǎo)入亞馬遜產(chǎn)品代售，賺取傭金（7天免費試用）

3.Printful：在沒有庫存的情況下開始在線商店。出售定制服裝，配件和家庭裝飾產(chǎn)品，而無需庫存，也無需預(yù)付成本。

4.Modalyst：在數(shù)百個類別中添加數(shù)百萬個高利潤率的產(chǎn)品，而不必?fù)?dān)心包裝和運輸問題。在時尚，鞋類，電子產(chǎn)品，廚房用具，家居裝飾品，運動裝備以及全部零售商品的60-90％以上查找產(chǎn)品。

5.Spocket：美歐供應(yīng)商及代理商溝通平臺

Shopify的批發(fā)供應(yīng)商，里面的產(chǎn)品都是從美國，歐洲，加拿大，亞洲等地的最佳供應(yīng)商處尋找快速發(fā)貨和熱銷產(chǎn)品，只需點擊幾下即可將其添加到Shopify商店。

3）物流渠道

1.ShipStation：物流渠道（收費：最低$9/月，30試用期）

2.Oeder Printer Templates：訂單打印系統(tǒng)（支持發(fā)票、收據(jù)等等；免費安裝，模板收費）

4）市場營銷

1.Kit：接通Facebook廣告（免費，需要BM和廣告賬戶權(quán)限）

2.SEO Image Optimizer：網(wǎng)站SEO插件（有免費和$24.99/月）

3.Ominsend：郵箱+EDM（有免費和收費版本）

4.Smile：積分及VIP服務(wù)（免費）

5.Better Coupon Box：優(yōu)惠券插件（有免費和收費版本，14天免費使用）

6.Recart Messenger Marketing：第三方Facebook Messenger營銷+購物車再營銷

7.Bold Discounts：定制折扣、閃購、預(yù)售等功能（$ 14.99 /月，14天免費試用）

5）客戶維護

1.Facebook Messenger：分享產(chǎn)品到Facebook中，并提供實時溝通（免費）

2.Tidio Live Chat：在線客服功能（有免費和收費版本）

3.Easy Contact Form：在網(wǎng)站加個收集信息的表格（$ 9.99 /月，30天免費試用）

6）庫存管理

1.Stocky: Shopify應(yīng)用商店中一款助力于庫存管理的免費應(yīng)用（Shopify官方11.14新推出的）可實現(xiàn)訂單采購、需求預(yù)測、收貨、庫存調(diào)撥、盤點和調(diào)整、報告分析等功能。（免費）

2.Bulk Product：批量管理編輯產(chǎn)品（有免費和收費版本）

7）銷售功能

1.Countdown Timer Bar：購物車購買倒計時插件（$ 6.99 /月起，7天免費試用）

2.Free Shipping Bar：購物車營銷，提供送貨優(yōu)惠、動態(tài)定位（免費）

3.Ali Reviews：速賣通評論導(dǎo)入（$ 9 /月起，7天免費試用）

Tip：最后，提醒大家：好酒莫貪杯，插件再好，也不能安裝太多，一旦插件過多，將會影響網(wǎng)站的加載速度，造成客戶流失。一般建議同類型的插件選擇一個適合自己的安裝即可。以上為大家整理的內(nèi)容啦，希望能夠幫你省事省力省心！




所有插件查找網(wǎng)址：



https://apps.shopify.com/







（2）首頁Landing Page的四個設(shè)計方法：

ROI是平的或者略虧的，就應(yīng)該開始考慮站內(nèi)優(yōu)化，站內(nèi)優(yōu)化做的好，ROI就會提升很多。站內(nèi)優(yōu)化其中很重要的一個點就是著陸頁的設(shè)計，一個好的著陸頁體現(xiàn)的是更多的是高轉(zhuǎn)化或者好的活動設(shè)計，現(xiàn)在就給大家分享幾個shopify店鋪中典型的幾種著陸頁的用法。一般來說，新手剛開始推廣的時候，會選用shopify的產(chǎn)品頁，類目頁，或者直接店鋪首頁，今天介紹的是使用shopify page頁自定義的著陸頁。

用法1：打折促銷活動

可以看到這個著陸頁主要突出的是折扣的優(yōu)惠以及優(yōu)惠的時間，產(chǎn)品圖片集中在一個地方，點擊”Grab All My Hoodies At 17% Off”的時候是個bitly鏈接，然后跳轉(zhuǎn)到分類目錄，這樣就可以統(tǒng)計從這個page頁面進去分類目錄的流量情況。

案例鏈接: https://innerartworld.com/pages/hoodies-collection-sale-vip

用法2：黑五比賽活動

填寫完表單后，就可以進入下一步的社交分享。

具體的分享規(guī)則可以點擊右下角的Rules(View RULES)查看學(xué)習(xí)。

說明：這里的比賽活動需要有一定的流程以及收集用戶的郵件信息等，這個案例是通過https://www.viralsweep.com/ 這個第三方服務(wù)集成到shopify的page來實現(xiàn)的。

案例鏈接：https://www.trepadora.com/pages/black-friday（類似比賽案例：https://www.athletikan.com/pages/win，使用的服務(wù)是https://gleam.io/）

用法3：amazon產(chǎn)品留評

點擊LEAVE REVIEW就會跳轉(zhuǎn)到amazon網(wǎng)站。

用法4：免費促銷活動

做免費活動，只收郵費，點擊后進入shopify的產(chǎn)品詳情頁進行購買。

以上的四種基本用法都是以活動為主，page數(shù)量不會多，最后再提一個page批量的用法，直接給幾個案例，都是超過一百個的page，具體怎么用大家自己去研究，也可以留言交流。

備注:通過google的site命令，可以查到某個網(wǎng)站page數(shù)量，注意，這里是最少的page數(shù)量，即是有被收錄的page數(shù)量。

批量page案例：

• site:https://www.hameraypublishing.com/pages
• site:https://adelanteshoes.com/pages
• site:https://theglobalartcompany.com/pages
• site:https://planetvegeta.me/pages
• shopify利用page的幾種著陸頁的用法，都是點到為止，給大家以思路，具體的大家可以結(jié)合案例自己去分析，這些其實在獨立站都是有這樣的玩法，只是在shopify的page更容易搭建和使用，著陸頁和活動的設(shè)計會大大提高轉(zhuǎn)化，已經(jīng)入門的同學(xué)可以開始考慮page的使用了。

（3）如何購買及選擇合適的Shopify主題模板

很多跨境電商獨立站經(jīng)營朋友選擇Shopify進行建站，原因之一是設(shè)置操作非常簡單，網(wǎng)站有很多主題模板可以選擇，并且操作可視化，所見即所得。O(∩_∩)O。

那么怎樣購買及選擇合適的shopify主題模板呢？

一、購買shopify主題

總的來說，shopify主題分2種渠道購買。第一種為shopify官網(wǎng)購買主題，第二種為第三方購買主題。

1、shopify官網(wǎng)購買主題

（1）打開主題模板頁面

進入控制面板，選擇在線商店內(nèi)的“模板”，右側(cè)“訪問模板商店”

（2）查看主題模板

shopify提供71種模板，其中包括10個免費模板，61個付費模板，費用在140-180美元之間。

2、第三方平臺購買主題

（1）themeforet 主題森林

（2）templatemonster 怪獸模板

第三方提供多種平臺模板，價格相對shopify來說更價格優(yōu)惠一些，且可選擇的模板種類更多，但購買的時候一定要確認(rèn)主題是否適用于shopify店鋪。與直接在shopify中購買的主題不同，在第三方購買的主題，需要通過上傳才能使用。

二、主題模板選擇原則

不管你通過什么渠道購買主題模板，在選擇的過程中，以下幾點需要特別注意。

• ? 從正規(guī)渠道購買付費主題，不要亂去下載一些免費的，不靠譜，存在風(fēng)險。
• ? 根據(jù)自己商品特點，選擇合適的主題，不要風(fēng)格一點都不搭，看起來非常別扭，也顯得不夠?qū)I(yè)。
• ? 不要在自己的主題中添加過多的元素，會降低網(wǎng)站打開速度，影響購物體驗。
• ? 認(rèn)真查看主題的評價，看主題的優(yōu)點、缺點，全面權(quán)衡之后再決定購買。
• ? 具有自適應(yīng)性。因為購物越來越趨向于移動端化，店鋪能否在不同型號的手機上完美展現(xiàn)是非常重要的。

以下以shopify官網(wǎng)選擇主題模板為例進行說明

1、根據(jù)左側(cè)菜單進行篩選

你可以通過shopify提供篩選菜單，根據(jù)自己店鋪的特征，按照自己想要的商品展示方式、主頁特點等進行初步篩選。

2、通過對模板排序進行篩選

shopify主題提供3種排序原則：按照受歡迎程度、價格由低到高、價格由高到低。你也可以通過這種方式進行初步篩選。不過shopify目前一共提供71種主題，也就三頁，你可以每個主題都看看。

3、查看主題

每種主題都有2-3種不同的版式，在外觀上大體相同，但是具有的功能一樣。你可以選擇“Try theme”,可以將這個主題應(yīng)用在已有的店鋪里面。或者你可以選擇”View demo”直接查看右邊對應(yīng)主題的商店。如果你決定購買，直接點擊”buy theme”，費用將會一次性直接從你Shopify網(wǎng)站綁定的信用卡里面扣除。

你也可以把頁面往下拉，有一項“Stores using xxx”的展示?？梢钥纯磻?yīng)用此款主題商鋪的更多應(yīng)用效果

更重要的一步，查看應(yīng)用該主題的用戶反饋，看評價高不高，了解主題的優(yōu)點、缺點。

shopify主題地址： https://themes.shopify.com/themes




如上圖所示，你可以在該頁面左側(cè)邊欄按照主題價格，產(chǎn)品數(shù)量多少，頁面布局方式，以及產(chǎn)品頁面功能等等條件對主題進行篩選，也可以在右上角Sort按鈕按照主題的價格，受歡迎程度以及主題發(fā)布時間對主題進行排序。

點擊你看中的主題，進入主題之后，你可以查看主題的風(fēng)格，以及這個主題的主要功能，如下圖：




Shopify官方的所有主題都是無需下載的，點擊Start with this theme (免費主題) / Try Theme (付費主題) 即可直接安裝該主題到你的Shopify網(wǎng)站，其中付費主題為一次性付費，費用會直接從你Shopify網(wǎng)站綁定的信用卡里面扣除。

主題安裝之后不會自動啟用，頁面會自動跳轉(zhuǎn)到你的Shopify后臺 > Online Store > Themes 頁面。要啟用新安裝的主題，需要在MORE Themes一欄中，點擊主題對應(yīng)的Actions按鈕，在下拉選項中選擇Publish按鈕就可以了。

第三方的Shopify主題市場，

Themeforest (https://themeforest.net/category/ecommerce/shopify) 這家公司也是以賣主題模板，插件為出名的。用戶如果在上面進行購買，請前往一點要注意：

你所要購買的主題的是否是Shopify

你所要購買的主題的是否是Shopify

你所要購買的主題的是否是Shopify

一定要和shopify的店鋪兼容，否則就浪費錢了。

在Themeforest上購買主題之后，你就可以直接在shopify的店鋪中，進行主題的上傳

通常在第三方Shopify模板市場上購買的主題，下載下來的是壓縮文件，壓縮文件里面會有和很多和該主題的相關(guān)文件，例如Documentation， Licensing等等等等不需要上傳的文件，因此首先需要解壓縮，找到里面的需要上傳的主題文件，然后再打開Shopify后臺 > Online Store > Themes 頁面，找到Upload Theme按鈕點擊上傳，如下圖：




這里注意：

所上傳的文件必須是ZIP格式的壓縮文件，上傳文件最大50M，

如果你的文件超過50M請再仔細(xì)查找甄別你下載的主題里面哪個才是真正需要上傳的模板文件。

模板上傳成功之后，默認(rèn)是未激活的狀態(tài)，需要點擊主題對應(yīng)的Actions按鈕，在下拉選項中選擇Publish按鈕來發(fā)布主題。

通常出現(xiàn)的上傳模板文件出現(xiàn)錯誤的原因可能有：

未解壓縮查找模板文件而是直接上傳的從Themeforest上下載下來的壓縮文件

下載過程中因為網(wǎng)速問題導(dǎo)致的文件不完整，出現(xiàn)上傳錯誤

上傳過程中因為網(wǎng)速問題導(dǎo)致的文件不完整，出現(xiàn)上傳錯誤

在Shopify網(wǎng)站后臺模板管理頁面，主要有兩大板塊，一個是Current Theme， 一個是MORE Themes， Current theme就是你的Shopify網(wǎng)站當(dāng)前使用的主題，Current Theme有且僅有一個主題。More Themes是你安裝在Shopify后臺的，其他未啟用的Shopify主題。一個Shopify網(wǎng)站一次性最多安裝20個主題，即1個激活的主題和19個為激活的主題。

每個Shopify模板在你的網(wǎng)站后臺都會有兩個功能按鈕，一個是Actions，一個是Customize。

Actions按鈕的功能包括：

Preview: 在你的網(wǎng)站前臺預(yù)覽Shopify主題顯示效果

Publish: 激活該Shopify模板主題

Rename: 重命名該Shopify主題

Duplicate: 復(fù)制Shopify主題

Download Theme File: 下載該Shopify主題

Edit Code: 編輯該Shopify主題的代碼

Edit Langulages: 編輯Shopify主題框架特定文字的語言或者顯示方式

Remove: 從Shopify后臺刪除該模板

這里面，詳細(xì)解釋下下面的幾個Shopify模板的Action功能

Duplicate – 點擊Duplicate按鈕之后，會在你的Shopify網(wǎng)站后臺生成一個該Shopify主題的副本文件，意即你Duplicate Brooklyn主題之后，在后臺會生成一個名叫Copy of Brooklyn的模板文件。Duplicate功能的使用目的通常是在你對你的Shopify網(wǎng)站進行排版，代碼修改之前，做一個當(dāng)前模板的備份，如果出現(xiàn)問題，可以盡快激活備份的模板文件使你的網(wǎng)站恢復(fù)正常。

還有就是在做一些特定活動的時候可以使用Duplicate功能，例如我使用Duplicate功能對Brooklyn模板生成了3個Copy of Brooklyn模板文件，并將這三個Copy of Brooklyn文件重命名為Brooklyn-NEWYEAR， Brooklyn-Christmas， Brooklyn-BlackFriday，分別對這三個主題進行編輯，在三個節(jié)日期間分別激活對應(yīng)的模板，在平常激活Brooklyn主題。這樣可免于對模板樣式調(diào)整過來調(diào)整過去造成的麻煩。

Download Theme File: 下載Shopify主題，可以幫你快速的復(fù)制你當(dāng)前的Shopify網(wǎng)站樣式到新的Shopify網(wǎng)站，免于重新調(diào)整設(shè)置的麻煩。

Edit Code – 所有對Shopify模板的代碼修改都是在這里進行的。建議在修改代碼之前先使用Duplicate功能備份然后再進行修改，以免出現(xiàn)不必要的麻煩。

Edit Languages – 修改的是你Shopify網(wǎng)站的語言以及框架的文字內(nèi)容。一個Shopify網(wǎng)站的文字內(nèi)容由兩個部分組成，一個是你可以在你的Shopify網(wǎng)站后臺直接添加修改的，例如產(chǎn)品標(biāo)題，描述，價格，產(chǎn)品目錄名稱，博客內(nèi)容，頁面內(nèi)容等等等等，一個是你無法直接在Shopify網(wǎng)站后臺直接修改的，如購物車按鈕上的Add to Cart文字等等。

在Edit Languages可以幫你修改你的Shopify網(wǎng)站的語言，例如將英語改為西班牙語。

也可以幫你修改網(wǎng)站框架的文字內(nèi)容，例如購物車按鈕默認(rèn)顯示的Add to Cart改為全部大寫的ADD TO CART，或者BUY NOW




Shopify另外一個功能按鈕是Customize, 也就是Shopify網(wǎng)站各個頁面板塊的顯示布局設(shè)置。

點擊Customize按鈕之后，網(wǎng)站會自動跳轉(zhuǎn)到網(wǎng)站前臺，并且在網(wǎng)站前臺會有一個左側(cè)邊欄，列舉了網(wǎng)站當(dāng)前頁面各個板塊的功能設(shè)置。左側(cè)邊欄分為兩個部分，一個是Sections功能，一個是Theme Settings功能。

Sections功能負(fù)責(zé)的主要是網(wǎng)站頁面的布局以及各個板塊內(nèi)容的設(shè)置。

Theme Settings功能負(fù)責(zé)的是網(wǎng)站框架的顏色設(shè)置，字體設(shè)置，社交網(wǎng)絡(luò)設(shè)置，購物車頁面設(shè)置以及結(jié)算頁面的設(shè)置。

目前大部分Shopify模板是支持Shopify的Section模塊功能的，在設(shè)置上所見即所得，也就是說你在左側(cè)邊欄做了哪些改動，在右側(cè)網(wǎng)站前臺視窗會做對應(yīng)的改變。

如下圖，將Newsletter板塊移動到Featured Collection上方，只需要用鼠標(biāo)拖動左側(cè)邊欄的板塊名稱，右側(cè)網(wǎng)站前臺視窗就可以即時的顯示你所做的修改。

左側(cè)的任意模塊都是可以點擊進去進行詳細(xì)設(shè)置的，要添加模塊，點擊Sections項下的Add Section按鈕，選擇要添加的板塊，點擊Add按鈕就可以了。然后對板塊拖動進行頁面的排序。

要刪除某個模塊，需要點擊去模塊，在該模塊的最下方找到Remove Section按鈕，然后點擊確認(rèn)保存，就可以了

在右側(cè)的網(wǎng)站頁面視窗上方左側(cè)，為頁面切換按鈕，下拉選擇不同的頁面，會在左側(cè)邊欄顯示不同的頁面模塊，然后對對應(yīng)的頁面進行設(shè)置。網(wǎng)站前臺視窗的正上方三個按鈕分別顯示的是手機移動端的顯示效果，帶左側(cè)邊欄的顯示效果，以及不帶左側(cè)邊欄的全屏顯示效果。

在右側(cè)的網(wǎng)站頁面視窗上方左側(cè)，為頁面切換按鈕，下拉選擇不同的頁面，會在左側(cè)邊欄顯示不同的頁面模塊，然后對對應(yīng)的頁面進行設(shè)置。網(wǎng)站前臺視窗的正上方三個按鈕分別顯示的是手機移動端的顯示效果，帶左側(cè)邊欄的顯示效果，以及不帶左側(cè)邊欄的全屏顯示效果。

Shopify主題之間的設(shè)置是相互獨立的，也就是說，你在設(shè)置好Brooklyn主題之后，安裝并激活新的主題，新主題需要重新進行頁面排版，顏色字體的設(shè)置，而且對新的主題的設(shè)置不會影響到Brooklyn之前的設(shè)置，重新激活Brooklyn主題之后，顯示的還是安裝新主題之前的樣子。




~以上三個板塊足夠讓你建立一個優(yōu)質(zhì)的獨立站網(wǎng)頁~