Shopify主题选择需要注意的几点事项

新注册Shopify账户可获得 14 天免费使用优惠 – 立即注册账户获取

Shopify主题的选择对于很多人,尤其是有选择恐惧症的人来说,是一件让人揪心的事情。因为在选择主题的时候,我们或多或少会结合自己的业务和产品的实际情况,去比较各个主题的配色布局,功能特点,然后选择出来那个和自己预期最相近的主题购买安装,可是使用了一段时间之后发现,还是有各种不爽,又在考虑是不是另外一个主题更好一些,于是又安装了另外一个主题,再过一段时间,又调回了之前的那个主题…

所以说在很多时候没有选择的余地要比选择太多来的更痛快一些。就像前段时间,和一位群里的朋友聊天,说他自己从接触Shopify到现在,一步步研究,搞定了很多的技术问题:解析绑定域名,给App安装代码,给主题安装亚马逊跳转按钮,安装GA,Pixel代码… 的确,对于大部分人来说,这些都是比较新鲜的玩意儿,虽然不难,但是如果不懂,可能也还是要花个一天半天去折腾的。所以说,成长大概就是这样被慢慢逼出来的吧。

不过,如果跟着教程操作一遍还搞不定,建议请教或者外包给他人,不要在这些事情上浪费太多的时间。

回到本篇文章的主题,原本本篇内容有三部分的:

第一部分就先带大家来看看关于Shopify模板的选择,我们需要具体考虑些什么问题;
第二部分总结几种查找竞争对手网站,如何对竞争对手的网站做简单分析。
第二部分总结性的分析下目前全球排名最靠前的Shopify网站colourpop的主题特点。

不过在发文章的时候,考虑到第二部分内容之前有不少人在群里问到过,所以决定单独再发一篇文章详细的说说。本篇文章的一个思路大概就是首先和大家聊聊主题选择的时候大概需要注意或者要考虑的事情,然后去Google找其他人的Shopify网站,尤其是做的比较好的同行竞争对手的Shopify网站进行分析研究,对自己的网站需求有更加明确清晰的了解。最后一部分内容结合Colourpop这个网站总结性的简单聊聊我所看到的Colourpop网站的特点亮点。

本篇文章在工作之余断断续续写了有一个多星期,还是比较简单的内容,后面会根据大家的反馈更新文章内容。

首先开始第一部分,选择Shopify模板,具体需要考虑些什么问题。

 

Shopify主题的字体,配色,网页排版

其实在选择主题,尤其是预览主题的demo演示站点的时候,是可以忽略主题的字体和配色的。因为绝大多数主题在安装到你的Shopify网站之后,都是可以完全自定义各个内容板块的文字字体、大小、颜色以及主题页面各个板块配色的。

但是要注意的是,这里我们说的是在选择主题的时候可以忽略主题的字体和配色,并不是说这两个不重要。

要知道,色彩在营销中有特别的意义, 特别是在线营销。所以说在网站建站初期规划网站的时候,结合自己的产品和服务,我们心里对自己的网站配色风格是要有一个大致的想法的。同时在研究竞争对手的网站的时候,也要细细琢磨下他们的网站字体大小颜色,配色风格哪些是我们可以照搬过来的,哪些是需要改进的,尤其是那些流量相对较大的Shopify网站,更具有参考意义。

竞争对手网站色彩搭配的提取可以使用免费的Colorzilla网页取色器来完成。

下面是来自KissMetrics的一张信息图,大家可以了解下他们的数据研究结果(点击图片可以查看大图或者下载图片)

shopify主题

信息图来源于: Kissmetrics: How do colors affect purchases?

这里推荐另外几篇Kissmetrics的博客文章,大家可以去大致了解下网站风格配色对网站订单转化的影响,以及男女之间对待相同的网站配色做出的反应差别,还是蛮有趣,也挺实用的(如下截图):

Fun fact – Why are most web hyperlinks blue?

“Red and green are the colors most affected by color-vision deficiency. Almost no one has a blue deficiency. That means nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a color different from others. It was pure good luck that the default color of hyperlinks is blue with underlining”

shopify主题

 

关于网页的排版,因为目前Shopify系统支持Section模块拖拽功能,所以,所有支持Section功能的主题页面,尤其是网站的主页的排版是很灵活的,下面在选择主题时要考虑的的主要功能的一些点详细说。

Shopify模板的主要功能

在第三方的Shopify模板站,例如Themeforest,选择购买付费主题之前一定要看好,该主题是否支持Shopify的Section功能,也就是Shopify Drap & Drop Section Editor Support字样,网页模块拖拽自定义模块功能。支持Section功能的主题,你可以使用鼠标点击和拖动就可以随意添加删减以及排序网页模块。(目前几乎所有主题都是支持Section功能的,如果一款主题不支持Section功能,多半这个主题是个老古董了)

另外主题会自带一些Shopify App也可以实现的功能,比方说Mega Menu, Popup, Cross-Sell, Product Compare Countdown, Countdown Timer等等等等,主题的所有功能都仔细看一遍吧,一般来讲,主题功能越多,则价格越高,并且主题文件越大,影响网站打开速度的因素越多。要做个取舍。当然,如上所说,如果主题各个方面都挺不错,但是就一两个你想要的功能没有,那可以去Shopify的App Store找下相关的APP。

如果你是个新手,对这些感到迷茫,那你可以用后面的方法去搜索你所在行业的Shopify网站,把那些你觉得不错的网站综合起来做个分析,在纸上和脑子里给你自己的网站做个基本的架构,那么后面在决定选用哪个主题的时候就轻松多了。

不过从我自己的个人经验来讲,我会比较看重主题是否有这三点功能:

  • 可以实现Sticky Header功能,当然主要的是购物车按钮要显示在Header中
  • 要支持BUY IT NOW功能,和Section功能一样,不支持BUY NOW按钮的主题基本上是老古董了
  • 支持Drawer Cart功能,Drawer Cart可以实现更流畅的购物体验

以上三点的主题在Desktop可能没有明显的感受,但是在移动端上的用户购物体验是非常非常好的。

Shopify模板的价格

Shopify官方有提供免费的主题,但是相对比较简单,所有很多人会选择购买主题来满足某些特定的功能和需要。购买主题的主要途径包括,Shopify官方的主题商城,第三方的主题网站如Themeforest和Templatemonster,以及主题开发者的官网。

我会优先推荐Shopify官方的付费主题,虽然价格稍贵,但是经过Shopify官方团队把关,主题体验确实是好的。但是如果你预算有限,也可以去Themeforest,主题开发者的官网,再或者是Templatemonster上购买主题(大部分的主题都是一次付费,终生使用的)

个人建议,如果需要付费主题,建议从正规渠道购买,所有上传到Shopify以及Themeforest上的主题,都会经过Shopify或者Themeforest的全方面主题代码检查以保证安全,主题作者将自己的主题放在平台上销售期间也是接受平台监管的,因此在安全上的风险要小很多。下图是Themeforest对所有上传到其网站上的主题时的安全审核流程,供了解

shopify主题

Themeforest安全审核流程

网上分享或者某宝网上的免费的或者低价的付费主题,不排除会有别有用心的人用这种方式来获利。安全无小事,所以还是建议大家选择正规渠道购买付费主题,切勿贪图便宜导致更大的损失。即使没有安全问题,使用网上分享的“免费”Shopify付费主题,是违反Shopify服务条款的,严重的,有可能会直接被Shopify官方做封号处理。预警 ⚠️ 盗版Shopify付费主题可能会导致网站被封!

主题的问题是不是很多,售后服务能力如何

选择主题之前,尤其是决定购买付费主题之前,一定要注意阅读下这款主题的Reviews,就像老外在Amazon上买东西之前肯定是要读读Review的,从他人的口中对这个主题有更加全面的了解,包括大家对主题售后服务的评价,好,好在哪里,不好,为什么不好。有了更加清楚的认识之后,再决定是否付款购买。

另外,如果是从第三方主题网站,例如Themeforest上购买主题,要看下主题是什么时候发布的,自发布之后经历过几次更新,如果是一两年以前发布的,并且自发布之后就没有任何更新的主题,建议慎重购买,一方面是Shopify系统一直在更新,老旧的主题可能不适配新的Shopify系统,会出现各种各样的小问题;而另外一方面,发布时间久而且没有更新,和主题作者的沟通,以及售后问题处理可能会比较麻烦。

主题的网页加载速度

下面是来自Kissmetrics的一组数据:

  • 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 47% of consumers expect a web page to load in 2 seconds or less.
  • 40% of people abandon a website that takes more than 3 seconds to load.
  • A 1 second delay in page response can result in a 7% reduction in conversions. If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year.

从这组数据就可以看到,网站的打开速度的重要性了吧。Shopify网站速度优化会涉及到几个方面,有需要的朋友可以看看WaimaoB2C之前发的一篇文章 – Shopify网站速度优化

因此在选择主题的时候,尽可能的避免那些有很多不必要存在的特效的主题,比方说加载进度条,动画,以及花哨的侧边滚动条等等,这些好玩儿的元素可能会吸引一部分网站访客,但是多数情况下,这些元素会降低你的网站的打开速度,造成相反的效果。

优秀的Shopify模板注重为用户提供简单的在线购物体验,目标是卖出去尽可能多的商品,这大概也就是Shopify官方开发出来的那些免费主题都是那样的简洁的原因吧。感兴趣的朋友可以去看看Shopify模板制作团队是如何制作Narrative这个主题的,以及Shopify官方写给主题开发者们的文章,从中你也能大概了解一些关于主题的选择的考虑因素。

主题的自适应能力 – 移动端体验

自适应主题就是说这款主题可以自动识别屏幕的宽度高度,并且自动做出相应的页面排版设计来适应屏幕大小,目标就是位来自各种屏幕大小访客提供最佳的网页浏览体验。

为什么自适应很重要?之前有几篇文章已经说到过,目前Shopify超过一半以上的订单都是来自移动端的,各个渠道的流量来自移动端的也能占到半数以上。Shopify今年黑五网一的数据也显示移动端的订单数量已经是PC端的两倍了,因此说,主题的自适应能力非常的重要,直接关系到订单的转化。

shopify主题

大家不必去特别的关心某款主题是否具备自适应能力,可以说99.99%的主题都是自适应的。但是具体的显示效果,浏览下单的体验如何,就需要去实际的观察测试了。因此建议大家在使用下面的方法浏览同行业的Shopify网站的时候,重点也要关注下他们网站移动端的体验如何,有哪些地方值得学习的。

如何体验测试呢?一种方法是直接缩小你的浏览器窗口大小,不同的浏览器窗口,网页排版是不同的。不过如果你要精确的了解某品牌某具体型号的手机的使用效果,就需要使用方法二了,使用Google浏览器, 在打开同行Shopify网站的情况下,按下F12(或者Ctrl+Shift+I),然后点击右侧窗口左上角的手机平板小图标,就可以了。左侧窗口顶部菜单栏可以选择不同的手机/平板型号或者直接自定义屏幕尺寸。如下图所示

shopify主题

好了,以上就是目前我能想到的关于主题的选择要考虑的一些事情,后面如果有新的要注意的点,再更新本篇文章。

 

下面第二部分,就以上瞎叨叨的那些内容,带大家总结性的分析下Colourpop.com这个网站的主题风格用户体验。以下截图都是2017年Colourpop网站的样子了,网站的排版风格会有一些变化,所以,推荐直接打开官网体验最新功能。

科学上网状态下打开Colourpop的网站的速度还是蛮快的,网站整体很简洁,内容间距不是特别紧凑,比较舒适。产品为化妆品彩妆之类的产品。

shopify主题

色调为紫红色,和上面我们看到的KissMetrics的分析是一致的 – Pink: Used to Market products to women and young girls; Purple: often seen in beauty or anti-aging products.

shopify主题

网站弹窗功能,用于collect潜在客户的邮箱地址。

shopify主题

产品列表模块在价格和Add To Bag之间添加了Review Rate

shopify主题

网站的Shop the Look 和 Instagram Gallery都添加了Shopable Instagram功能,点击Instagram的照片之后会弹窗显示图片模特使用的产品以及对应的产品链接。

shopify主题

当鼠标移动到网站购物车按钮时,购物车会自动从右侧滑出并显示产品图片,标题,价格,数量,总价等信息

shopify主题

在网站Collection页面,侧边栏有产品筛选功能,并且可以自主选择显示还是隐藏侧边栏

shopify主题

支持Quick View弹窗快速购物功能 – 当鼠标放在图片上时,会显示quick view按钮,点击按钮之后,在下方会弹出产品大图,详细信息以及购物车按钮。

shopify主题

产品列表页面可以无限下拉,省去翻页加载的等待时间,体验相对更好一些。当鼠标移动到产品图片上时自动轮播该产品的其他图片.
同样在价格和Add To Bag之间添加了Review Rate.
网站内页Gift Shop下雪的特效,烘托节日气氛.

在产品详情页面,限制购买数量功能

shopify主题

图片轮播放大功能
产品标题下方添加了Review Rating并且有Read Review锚链接跳转到页面底部Review板块的功能
Cross-Sell功能
同样在页面中添加了Shop Instagram功能

购物车页面和Checkout页面没有发现特殊功能

FAQ页面和Contact us页面是单独做的,没有在Shopify的系统上 (这里个人觉得体验不太好的是FAQ在同一页面打开,而不是在新窗口中打开)

移动端的体验。

Colourpop网站移动端的体验也是蛮棒的,首先移动端的菜单栏和购物车按钮和PC端的体验一致,都是从左侧右侧滑出,占满整个手机屏幕,体验很赞。点击菜单栏按钮之后,整个菜单从左侧滑出,占满整个屏幕,点击LIPS之后,打开的是二级菜单,同样占满整个屏幕。

shopify主题

点击购物车按钮之后,购物车从右侧滑出,占满整个屏幕

shopify主题

Colourpop网站的产品列表页面和PC端一样,也是支持无限下拉的,这种体验在移动端上的优势很明显,没有翻页按钮的打扰,算得上是一种沉浸式的体验吧。

产品详情页面,很赞的一个功能是购物车按钮固定在屏幕下方,不会随着用户下滑操作而导致购物车按钮从页面中消失,客户在看到任意一个地方,都可以直接点击购物车按钮将该产品加入到购物车里。这个很值得借鉴。

shopify主题

产品详情页面的另外一个功能就是上图中购物车按钮右上方的那个圆形的紫色按钮 – 一款名为Personalizer的Shopify App,可以实现相关产品的智能推荐,功能强大,体验也相当不错,如下图。推荐大家安装试用。

shopify主题

还有就是在购物车页面,结账按钮下方,会有Cross-Sell功能,这个也不错。

shopify主题

 

下篇文章详细说说第二部分的内容:总结几种查找竞争对手网站的方法,以及如何对竞争对手的网站做简单分析。

未经允许不得转载:歪猫跨境独立站博客 » Shopify主题选择需要注意的几点事项

赞 (19)
新评论邮件通知
提醒
guest
4 评论
由新到旧
由旧到新 点赞最多
Inline Feedbacks
View all comments
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$
    2020年8月推荐
    <The Truly Ultimate Guide To 10X Your Shopify Store> 

    公众号回复信息“ 10X ”获取本电子书下载链接。不想关注公众号的直接Google搜索书名,在搜索结果中同样可以获得电子书下载链接地址。
    该电子书不是“葵花宝典”,所以不能指望靠它“独步武林”,不过个人觉得对独立站新手来说还是有非常大的帮助的。对老手来说,实用性没那么大,不过如果电子书中有那么一两点对你的网站运营有所启发,我觉得也算是比较值了。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前使用本地IP; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 14 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前使用本地IP