一篇文章带你了解Shopify的全部网页设计

时间：2023-09-27 08:48:01 | 来源：网站运营

时间：2023-09-27 08:48:01 来源：网站运营

一篇文章带你了解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：第三方Facebook 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：最后，提醒大家：好酒莫贪杯，插件再好，也不能安装太多，一旦插件过多，将会影响网站的加载速度，造成客户流失。一般建议同类型的插件选择一个适合自己的安装即可。以上为大家整理的内容啦，希望能够帮你省事省力省心！




所有插件查找网址：



https://apps.shopify.com/







（2）首页Landing Page的四个设计方法：

ROI是平的或者略亏的，就应该开始考虑站内优化，站内优化做的好，ROI就会提升很多。站内优化其中很重要的一个点就是着陆页的设计，一个好的着陆页体现的是更多的是高转化或者好的活动设计，现在就给大家分享几个shopify店铺中典型的几种着陆页的用法。一般来说，新手刚开始推广的时候，会选用shopify的产品页，类目页，或者直接店铺首页，今天介绍的是使用shopify page页自定义的着陆页。

用法1：打折促销活动

可以看到这个着陆页主要突出的是折扣的优惠以及优惠的时间，产品图片集中在一个地方，点击”Grab All My Hoodies At 17% Off”的时候是个bitly链接，然后跳转到分类目录，这样就可以统计从这个page页面进去分类目录的流量情况。

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

用法2：黑五比赛活动

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

具体的分享规则可以点击右下角的Rules(View RULES)查看学习。

说明：这里的比赛活动需要有一定的流程以及收集用户的邮件信息等，这个案例是通过https://www.viralsweep.com/ 这个第三方服务集成到shopify的page来实现的。

案例链接：https://www.trepadora.com/pages/black-friday（类似比赛案例：https://www.athletikan.com/pages/win，使用的服务是https://gleam.io/）

用法3：amazon产品留评

点击LEAVE REVIEW就会跳转到amazon网站。

用法4：免费促销活动

做免费活动，只收邮费，点击后进入shopify的产品详情页进行购买。

以上的四种基本用法都是以活动为主，page数量不会多，最后再提一个page批量的用法，直接给几个案例，都是超过一百个的page，具体怎么用大家自己去研究，也可以留言交流。

备注:通过google的site命令，可以查到某个网站page数量，注意，这里是最少的page数量，即是有被收录的page数量。

批量page案例：

• site:https://www.hameraypublishing.com/pages
• site:https://adelanteshoes.com/pages
• site:https://theglobalartcompany.com/pages
• site:https://planetvegeta.me/pages
• shopify利用page的几种着陆页的用法，都是点到为止，给大家以思路，具体的大家可以结合案例自己去分析，这些其实在独立站都是有这样的玩法，只是在shopify的page更容易搭建和使用，着陆页和活动的设计会大大提高转化，已经入门的同学可以开始考虑page的使用了。

（3）如何购买及选择合适的Shopify主题模板

很多跨境电商独立站经营朋友选择Shopify进行建站，原因之一是设置操作非常简单，网站有很多主题模板可以选择，并且操作可视化，所见即所得。O(∩_∩)O。

那么怎样购买及选择合适的shopify主题模板呢？

一、购买shopify主题

总的来说，shopify主题分2种渠道购买。第一种为shopify官网购买主题，第二种为第三方购买主题。

1、shopify官网购买主题

（1）打开主题模板页面

进入控制面板，选择在线商店内的“模板”，右侧“访问模板商店”

（2）查看主题模板

shopify提供71种模板，其中包括10个免费模板，61个付费模板，费用在140-180美元之间。

2、第三方平台购买主题

（1）themeforet 主题森林

（2）templatemonster 怪兽模板

第三方提供多种平台模板，价格相对shopify来说更价格优惠一些，且可选择的模板种类更多，但购买的时候一定要确认主题是否适用于shopify店铺。与直接在shopify中购买的主题不同，在第三方购买的主题，需要通过上传才能使用。

二、主题模板选择原则

不管你通过什么渠道购买主题模板，在选择的过程中，以下几点需要特别注意。

•  从正规渠道购买付费主题，不要乱去下载一些免费的，不靠谱，存在风险。
•  根据自己商品特点，选择合适的主题，不要风格一点都不搭，看起来非常别扭，也显得不够专业。
•  不要在自己的主题中添加过多的元素，会降低网站打开速度，影响购物体验。
•  认真查看主题的评价，看主题的优点、缺点，全面权衡之后再决定购买。
•  具有自适应性。因为购物越来越趋向于移动端化，店铺能否在不同型号的手机上完美展现是非常重要的。

以下以shopify官网选择主题模板为例进行说明

1、根据左侧菜单进行筛选

你可以通过shopify提供筛选菜单，根据自己店铺的特征，按照自己想要的商品展示方式、主页特点等进行初步筛选。

2、通过对模板排序进行筛选

shopify主题提供3种排序原则：按照受欢迎程度、价格由低到高、价格由高到低。你也可以通过这种方式进行初步筛选。不过shopify目前一共提供71种主题，也就三页，你可以每个主题都看看。

3、查看主题

每种主题都有2-3种不同的版式，在外观上大体相同，但是具有的功能一样。你可以选择“Try theme”,可以将这个主题应用在已有的店铺里面。或者你可以选择”View demo”直接查看右边对应主题的商店。如果你决定购买，直接点击”buy theme”，费用将会一次性直接从你Shopify网站绑定的信用卡里面扣除。

你也可以把页面往下拉，有一项“Stores using xxx”的展示。可以看看应用此款主题商铺的更多应用效果

更重要的一步，查看应用该主题的用户反馈，看评价高不高，了解主题的优点、缺点。

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




如上图所示，你可以在该页面左侧边栏按照主题价格，产品数量多少，页面布局方式，以及产品页面功能等等条件对主题进行筛选，也可以在右上角Sort按钮按照主题的价格，受欢迎程度以及主题发布时间对主题进行排序。

点击你看中的主题，进入主题之后，你可以查看主题的风格，以及这个主题的主要功能，如下图：




Shopify官方的所有主题都是无需下载的，点击Start with this theme (免费主题) / Try Theme (付费主题) 即可直接安装该主题到你的Shopify网站，其中付费主题为一次性付费，费用会直接从你Shopify网站绑定的信用卡里面扣除。

主题安装之后不会自动启用，页面会自动跳转到你的Shopify后台 > Online Store > Themes 页面。要启用新安装的主题，需要在MORE Themes一栏中，点击主题对应的Actions按钮，在下拉选项中选择Publish按钮就可以了。

第三方的Shopify主题市场，

Themeforest (https://themeforest.net/category/ecommerce/shopify) 这家公司也是以卖主题模板，插件为出名的。用户如果在上面进行购买，请前往一点要注意：

你所要购买的主题的是否是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主题之后，显示的还是安装新主题之前的样子。




~以上三个板块足够让你建立一个优质的独立站网页~