台北設計交流論壇

標題: 一篇文章带你了解Shopify的全部網頁設計 [打印本頁]

作者: admin 時間: 2023-11-20 15:32
標題: 一篇文章带你了解Shopify的全部網頁設計
自力站的頁面，設計從我的從業Shopify履历来看，一個網站的設計重要會包括如下几個方面：①插件的選擇 ②landing page的設計 ③主题選擇和装修

下面咱們就具體的来帮大师引导一下：

（1）Shopify的“装機必备” 插件先容

接触過Shopify的自力站卖家应當都晓得，Shopify有很是多插件，多到讓人目炫纷乱，讓卖家十分頭大，今天总结下比力好用的插件，但愿能帮到大师！下面我将分為7個版块给大师先容這些插件。

简略来說，Shopify就像一部手機，具有手機只能知足你打德律風、發短信的根基需求，若是想實現采辦工具、視频谈天等功效，你就要下载某宝、某信。一样shopify店肆開下来以後，也是只有根本的購物功效，可是Shopify 的兼容性很是好，若是你要批量辦理產物，批量辦理定单，高档的邮件营销等功效，只需安装响应的插件便可。话未几說，起頭今天的正题~

1）店肆設計

1.Sales Pop：弹窗贩卖信息插件+弹窗贩卖信息插件（有免费和付费的版本）

2.Privy：退出時弹窗保存+功效壮大的EDM营销（15天免费试用）

3.BEST Currency Converter：動态貨泉显示（有免费和付费版本）

4.McAfee SECURE：網站平安性显示插件

5.Quick Announcement Bar：通知布告栏插件（有免费和付费版本）

6.Product Reviews：评論體系插件（免费）

2）產物渠道

1.Oberlo：今朝比力火的一款產物上架插件。Shopify 一件代發插件，简略来說，就是把其他渠道的貨一键搬場到你的Shopify店肆，客户下单给你的shopify店肆，體系再主動下单给你的貨源渠道，合适想做drop shipping的卖家。卖家可以将精神集中在营销上。

代價：分為免费、$ 29.90/月、$ 79.90/月

2.Spreadr App：导入亚马逊產物代售，赚取佣金（7天免费试用）

3.Printful：在没有库存的环境下起頭在線商铺。出售定制打扮，配件和家庭装潢產物，而無需库存，也無需预支本錢。

4.Modalyst：在数百個種别中添加数百万個高利润率的產物，而没必要担忧包装和运输問题。在時尚，鞋類，電子產物，厨房器具，家居装潢品，活動設备和全数零售商品的60-90％以上查找產物。

5.Spocket：美欧供给商及代辦署理商沟通平台

Shopify的批發供给商，内里的產物都是從美國，欧洲，加拿大，亚洲等地的最好供给商處寻觅快速發貨和热销產物，只需點击几下便可将其添加到Shopify商铺。

3）物流渠道

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

2.Oeder Printer Templates：定单打印體系（支撑發票、收條等等；免费安装，模板收费）

4）市場营销

1.Kit：接通Facebook告白（免费，必要BM和告白账户权限）

2.SEO Image Optimizer：網站SEO插件（有免费和$24.99/月）

3.Ominsend：邮箱+EDM（有免费和收费版本）

4.Smile：积分及VIP辦事（免费）

5.Better Coupon Box：優惠券插件（有免费和收费版本，14天免费利用）

6.Recart Messenger Marketing：第三方Fac生薑泡腳包,ebook Messenger营销+購物車再营销

7.Bold Discounts：定制扣頭、闪購、预售等功效（$ 14.99 /月，14天免费试用）

5）客户保護

1.Facebook Messenger：分享產物到Facebook中，并供给及時沟通（免费）

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

3.Easy Contact Form：在網站加個采集信息的表格（$ 9.99 /月，30天免费试用）

6）库存辦理

1.Stocky: Shopify利用商铺中一款助力于库存辦理的免费利用（Shopify官方11.14新推出的）可實現定单采購、需求展望、收貨、库存挑唆、清點和调解、陈述阐發等功效。（免费）

2.Bulk Product：批量辦理编纂產物（有免费和收费版本）

7）贩卖功效

1.Countdown Timer Bar：購物車采辦倒计時插件（$ 6.99 /月起，7天免费试用）

2.Free Shipping Bar：購物車营销，供给送貨優惠、動态定位（免费）

3.Ali Reviews：速卖通评論导入（$ 9 /月起，7天免费试用）

Tip：最後，提示大师：好酒莫贪酒，插件再好，也不克不及安装太多，一旦插件過量，将會影响網站的加载速率，造成客户流失。一般建议同類型的插件選擇一個合适本身的安装便可。以上為大师收拾的内容啦，但愿可以或许帮你省事省力省心！

所有插件查找網址：

（2）首頁Landing Page的四個設計法子：

ROI是平的或略亏的，就应當起頭斟酌站内優化，站内優化做的好，ROI就會晋升不少。站内優化此中很首要的一個點就是着陸頁的設計，一個好的着陸頁表現的是更多的是高转化或好的勾當設計，如今就给大师分享几個shopify店肆中典范的几種着陸頁的用法。一般来讲，新手刚起頭推行的時辰，會選用shopify的產物頁，類目頁，或直接店肆首頁，今天先容的是利用shopify page頁自界說的着陸頁。

用法1：打折促销勾當

可以看到這個着陸頁重要凸起的是扣頭的優惠和優惠的時候，產物圖片集中在一個處所，點击”Grab All My Hoodies At 17% Off”的時辰是個bitly链接，然後跳转到分類目次，如许便可以统计從這個page頁面进去分類目次的流量环境。

案例链接:

用法2：黑五角逐勾當

填写完表单後，便可以进入下一步的社交分享。

详细的分享法则可以點击右下角的Rules(View RULES)檢察进修。

阐明：這里的角逐勾當必要有必定的流程和采集用户的邮件信息等，這個案例是經由過程這個第三方辦事集成到shopify的page来實現的。

案例链接：（雷同角逐案例：，利用的辦事是）

用法3：amazon產物留评

點击LEAVE REVIEW就會跳转到amazon網站。

用法4：免费促销勾當

做免费勾當，只收邮费，點击落後入shopify的產物详情頁举行采辦。

以上的四種根基用法都因此勾當為主，page数目不會多，最後再提一個page批量的用法，直接给几個如何瘦小腹,案例，都是跨越一百個的page，详细怎样用大师本身去钻研，也能够留言交换。

备注:經由過程谷歌的site号令，可以查到某個網站page数目，注重，這里是起码的page数目，便是有被收录的page数目。

不少跨境電商自力站谋划朋侪選擇Shopify举行建站，缘由之一是設置操作很是简略，網站有不少主题模板可以選擇，而且操作可視化，所見即所得。O(∩_∩)O。

那末怎麼采辦及選擇符合的shopify主题模板呢？

总的来讲，shopify主题分2種渠道采辦。第一種為shopify官網采辦主题，第二種為第三方采辦主题。

一、shopify官網采辦主题

（1）打開主题模板頁面

进入節制面板，選擇在線商铺内的“模板”，右邊“拜候模板商铺”

（2）檢察主题模板

shopify供给71種模板，此中包含10個免费模板，61個付费模板，用度在140-180美元之间。

二、第三方平台采辦主题

（1）themeforet 主题丛林

（2）templatemonster 怪兽模板

第三方供给多種平台模板，代價相對于shopify来讲更代價優惠一些，且可選擇的模板種類更多，但采辦的時辰必定要确認主题是不是合用于shopif壯陽藥, y店肆。與直接在shopify中采辦的主题分歧，在第三方采辦的主题，必要經由過程上傳才能利用。

無論你經由過程甚麼渠道采辦主题模板，在選擇的进程中，如下几點必要出格注重。

如下以shopify官網選擇主题模板為例举行阐明

一、按照左邊菜单举行挑選

你可以經由過程shopify供给挑選菜单，按照本身店肆的特性，依照本身想要的商品展現方法、主頁特色等举行開端挑選。

二、經由過程對模板排序举行挑選

shopify主题供给3種排序原则：依照受接待水平、代價由低到高、代價由高到低。你也能够經由過程這類方法举行開端挑選。不外shopify今朝一共供给71種主题，也就三頁，你可以每一個主题都看看。

三、檢察主题

每種主题都有2-3種分歧的版式，在外观上大要不异，可是具备的功效同样。你可以選擇“Try theme”,可以将這個主题利用在已有的店肆内里。或你可以選擇”View demo”直接檢察右侧對应主题的商铺。若是你决议采辦，直接點击”buy theme”，用度将會一次性直接從你Shopify網站绑定的信誉卡内里扣除。

你也能够把頁面往下拉，有一项“Stores using xxx”的展現。可以看看利用此款主题商店的更多利用结果

更首要的一步，檢察利用该主题的用户反馈，看评價高不高，领會主题的长處、错误谬误。

shopify主题地點：

如上圖所示，你可以在该頁面左邊邊栏依照主题代價，產物数目几多，頁面结構方法，和產物頁面功效等等前提對主题举行挑選，也能够在右上角Sort按钮依照主题的代價，受接待水平和主题公布時候對主题举行排序。

點击你看中的主题，进入主题以後，你可以檢察主题的气概，和這個主题的重要功效，以下圖：

Shopify官方的所有主题都是無需下载的，點击Start with this theme (免费主题) / Try Theme (付费主题) 便可直接安装该主题到你的Shopify網站，此中付费主题為一次性付费，用度會直接從你Shopify網站绑定的信誉卡内里扣除。

主题安装以後不會主動启用，頁面會主動跳转到你的Shopify後台 > Online Store > Themes 頁面。要启用新安装的主题，必要在MORE Themes一栏中，點击主题對应的Actions按钮，鄙人拉選项當選擇Publish按钮便可以了。

第三方的Shopify主题市場，

Themeforest () 這家公司也因此卖主题模板，插件為出名的。用户若是在上面举行采辦，请前去一點要注重：

你所要采辦的主题的是不是Shopify

你所要采辦的主题的是不是Shopify

你所要采辦的主题的是不是Shopify

必定要和shopify的店肆兼容，不然就浪花錢了。

在Themeforest上采辦主题以後，你便可以直接在shopify的店肆中，举行主题的上傳

凡是在第三方Shopify模板市場上采辦的主题，下载下来的是紧缩文件，紧缩文件内里會有和不少和该主题的相干文件，比方Documentation， Licensing等等等等不必要上傳的文件，是以起首必要解紧缩，找到内里的必要上傳的主题文件，然後再打開Shopify後台 > Online Store > Themes 頁面，找到Upload Theme按钮點击上傳，以下圖：

這里注重：

所上傳的文件必需是ZIP格局的紧缩文件，上傳文件最大50M，

若是你的文件跨越50M请再细心查找甄别你下载的主题内里哪一個才是真正必要上傳的模板文件。

模板上傳樂成以後，默许是未激活的状况，必要點击主题對应的Actions按钮，鄙人拉選项當選擇Publish按钮来公布主题。

凡是呈現的上傳模板文件呈現毛病的缘由可能有：

未解紧缩查找模板文件而是直接上傳的從Themeforest上下载下来的紧缩文件

下载进程中由于網速問题致使的文件不完备，呈現上傳毛病

上傳进程中由于網速問题致使的文件不完备，呈現上傳毛病

在Shopify網站後台模板辦理頁面，重要有两大板块，一個是Current Theme，一個是MORE Themes， Current theme就是你的Shopify網站當前利用的主题，Current Theme有且唯一一個主题。More Themes是你安装在Shopify後台的，其他未启用的Shopify主题。一個Shopify網站一次性至多安装20個主题，即1個激活的主题和19個為激活的主题。

每一個Shopify模板在你的網站後台城市有两個功效按钮，一個是Actions，一個是Customize。

Actions按钮的功效包含：

Preview: 在你的網站前台预览Shopify主题显示结果

Publish: 激益粒可,该死Shopify模板主题

Rename: 重定名该Shopify主题

Duplicate: 复制Shopify主题

Download Theme File: 下载该Shopify主题

Edit Code: 编纂该Shopify主题的代码

Edit Langulages: 编纂Shopify主题框架特定文字的說话或显示方法

Remove: 從Shopify後台删除该模板

這内里，具體诠释下下面的几個Shopify模板的Action功效

Duplicate – 點击Duplicate團體服,按钮以後，會在你的Shopify網站後台天生一個该Shopify主题的副本文件，意即你Duplicate Brooklyn主题以後，在後台會天生一個名叫Copy of Brooklyn的模板文件。Duplicate功效的利用目標凡是是在你對你的Shopify網站举行排版，代码點窜以前，做一個當前模板的备份，若是呈現問题，可以尽快激活备份的模板文件使你的網站规复正常。

另有就是在做一些特定勾當的時辰可使用Duplicate功效，比方我利用Duplicate功效對Brooklyn模板生成為了3個Copy of Brooklyn模板文件，并将這三個Copy of Brooklyn文件重定名為Brooklyn-NEWYEAR， Brooklyn-Christmas， Brooklyn-BlackFriday，别離對這三個主题举行编纂，在三個節日時代别離激活對应的模板，在泛泛激活Brooklyn主题。如许可免于對模板样式调解過来调解曩昔酿成的贫苦。

Download Theme File: 下载Shopify主题，可以帮你快速的复制你當前的Shopify網站样式到新的Shopify網站，免于從新调解設置的贫苦。

Edit Code – 所有對Shopify模板的代码點窜都是在這里举行的。建议在點窜代码以前先利用Duplicate功效备份然後再举行點窜，以避免呈現不需要的贫苦。

Edit Languages –生髮推薦, 點窜的是你Shopify網站的說话和框架的文字内容。一個Shopify網站的文字内容由两個部門構成，一個是你可以在你的Shopify網站後台直接添加點窜的，比方產物题目，描写，代價，產物目次名称，博客内容，頁面内容等等等等，一個是你没法直接在Shopify網站後台直接點窜的，如購物車按钮上的Add to Cart文字等等。

在Edit Languages可以帮你點窜你的Shopify網站的說话，比方将英语改成西班牙语。

也能够帮你點窜網站框架的文字内容，比方購物車按钮默许显示的Add to Cart改成全数大写的ADD TO CART，或BUY NOW

Shopify此外一個功效按钮是Customize, 也就是Shopify網站各個頁面板块的显示结構設置。

點击Customize按钮以後，網站會主動跳转到網站前台，而且在網站前台會有一個左邊邊栏，罗列了網站當前頁面各個板块的功效設置。左邊邊栏分為两個部門，一個是Sections功效，一個是Theme Settings功效。

Sections功效卖力的主如果網站頁面的结構和各個板块内容的設置。

Theme Settings功效卖力的是網站框架的色彩設置，字體設置，社交收集設置，購物車頁面設置和结算頁面的設置。

今朝大部門Shopify模板是支撑Shopify的Section模块功效的，在設置上所見即所得，也就是說你在左邊邊栏做了哪些改動，在右邊網站前台視窗會做對应的扭转。

以下圖，将Newsletter板块挪動到Featured Collection上方，只必要用鼠標拖動左邊邊栏的板块名称，右邊網站前台視窗便可以即時的显示你所做的點窜。

左邊的肆意模块都是可以點击进去举行具體設置的，要添加模块，點击Sections项下的Add Section按钮，選摘要添加的板块，點击Add按钮便可以了。然後對板块拖動举行頁面的排序。

要删除某個模块，必要點击去模块，在该模块的最下方找到Remove Section按钮，然後點击确認保留，便可以了

在右邊的網站頁面視窗上方左邊，為頁面切换按钮，下拉選擇分歧的頁面，會在左邊邊栏显示分歧的頁面模块，然後對對应的頁面举行設置。網站前台視窗的正上方三個按钮别離显示的是手機挪動真個显示结果，带左邊邊栏的显示结果，和不带左邊邊栏的全屏显示结果。

在右邊的網站頁面視窗上方左邊，為頁面切换按钮，下拉選擇分歧的頁面，會在左邊邊栏显示分歧的頁面模块，然後對對应的頁面举行設置。網站前台視窗的正上方三個按钮别離显示的是手機挪動真個显示结果，带左邊邊栏的显示结果，和不带左邊邊栏的全屏显示结果。

Shopify主题之间的設置是互相自力的，也就是說，你在設置好Brooklyn主题以後，安装并激活新的主题，新主题必要從新举行頁面排版，色彩字體的設置，并且對新的主题的設置不會影响到Brooklyn以前的設置，從新激活Brooklyn主题以後，显示的仍是安装新主题以前的模样。

~以上三個板块足够讓你创建一個優良的自力站網頁~

歡迎光臨台北設計交流論壇 (https://digweb.com.tw/)