Shopify平台注册开店零基础入门教程 – Shopify主题模版的选择

本篇文章6709字，读完约17分钟

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

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

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

第一部分就先带大家来看看关于Shopify主题的选择，我们需要具体考虑些什么问题； 第二部分总结几种查找竞争对手网站，如何对竞争对手的网站做简单分析。

第二部分总结性的分析下目前全球排名最靠前的Shopify网站colourpop的主题特点。

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

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

首先开始第一部分，选择Shopify主题，具体需要考虑些神马问题。选择一款主题，你可能需要考虑的问题大概会有如下几点：

主题的字体，配色，网页排版主题的主要功能

主题的价格

主题的问题是不是很多，售后服务能力如何主题的网页加载速度

主题的自适应能力

等等等等 （如果后面有想到新的重要的点，会再更新） 先来聊下主题的字体，配色，网页排版

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

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

Shopify网站，更具有参考意义。

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

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

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

（如下截图）：

https://www.websitebuilderexpert.com/how-to-choose-color-for-your-website/ https://blog.kissmetrics.com/how-colors-affect-conversions/ https://blog.kissmetrics.com/gender-and-color/ https://blog.kissmetrics.com/psychology-of-color-and-conversions/

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

Shopify主题的主要功能

在第三方的Shopify主题站，例如Themeforest，选择购买付费主题之前一定要看好，该主题是否支持Shopify的Section功能，也就是Shopify Drap & Drop Section Editor Support字样， 网页模块拖拽自定义模块功能。支持Section功能的主题，你可以使用鼠标点击和拖动就可以随意添加删减以及排序网页模块。

通常最新的Shopify主题都是支持Shopify的Section功能的，一些发布时间比较久的主题，可能是不支持Section功能的，也就意味着这类主题的网页排版是固定的（当然，如果你有对主题的二次开发能力，就是另外一回事情了），你看到的Demo站是什么样子的，那你安装好主题之后就是什么样子的了。

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

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

主题的价格

https://yourshopify.com/有提供免费的Shopify主题，但是相对比较简单，所有很多人会选择购买主题来满足某些特定的功能和需要。购买Shopify主题的主要途径包括，Shopify官方的主题商城， 第三方的主题网站如Themeforest和Templatemonster，以及主题开发者的官网。从付费主题价格来讲，Themeforest是首选，然后是主题开发者的官网，再然后是Templatemonster，最后是Shopify的theme store。

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

Themeforest安全审核流程

网上分享或者某宝网上的免费的或者低价的付费主题，不排除会有别有用心的人用这种方式来获利。安全无小事，所以还是建议大家选择正规渠道购买付费主题，切勿贪图便宜导致更大的损失。

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

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

清楚的认识之后，再决定是否付款购买。

另外，如果是从第三方Shopify主题网站，例如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网站速度优化会涉及到几个方面。

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

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

https://www.shopify.com/partners/blog/narrative-web-performance https://www.shopify.com/partners/blog/18840023-how-to-optimize-themes-for- performance

主题的自适应能力

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

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

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

如何体验测试呢？一种方法是直接缩小你的浏览器窗口大小，不同的浏览器窗口，网页排版是不同的。不过如果你要精确的了解某品牌某具体型号的手机的使用效果，就需要使用方法二了，使用Google浏览器, 在打开同行Shopify网站的情况下，按下F12（或者

Ctrl+Shift+I），然后点击右侧窗口左上角的手机平板小图标，就可以了。左侧窗口顶部菜单栏可以选择不同的手机/平板型号或者直接自定义屏幕尺寸。如下图所示

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

下面第二部分，就以上瞎叨叨的那些内容，带大家总结性的分析下Colourpop.com这个网站的主题风格用户体验。

网站首页

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

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

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

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

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

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

网站Collection页面

侧边栏有产品筛选功能，并且可以自主选择显示还是隐藏侧边栏

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

产品列表页面可以无限下拉，省去翻页加载的等待时间，体验相对更好一些。当鼠标移动到产品图片上时自动轮播该产品的其他图片.

同样在价格和Add To Bag之间添加了Review Rate.

网站内页Gift Shop下雪的特效，烘托节日气氛.

产品详情页面

限制购买数量功能

图片轮播放大功能

产品标题下方添加了Review Rating并且有Read Review锚链接跳转到页面底部Review板块的功能

Cross-Sell功能

同样在页面中添加了Shop Instagram功能其他页面

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

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

移动端的体验

Colourpop网站移动端的体验也是蛮棒的，首先移动端的菜单栏和购物车按钮和PC端的体验一致，都是从左侧右侧滑出，占满整个手机屏幕，体验很赞。

点击菜单栏按钮之后，整个菜单从左侧滑出，占满整个屏幕，点击LIPS之后，打开的是二级菜单，同样占满整个屏幕。

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

Colourpop网站的产品列表页面和

PC端一样，也是支持无限下拉的， 这种体验在移动端上的优势很明 显，没有翻页按钮的打扰，算得上是一种沉浸式的体验吧。

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

产品详情页面的另外一个功能就是上图中购物车按钮右上方的那个圆形的紫色按钮 – 一款名为

Personalizer的Shopify App，可以实现相关产品的智能推荐，功能强大，体验也相当不错，如下图。推荐大家安装试用。

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

更多shopify咨询请关注https://yourshopify.com/，提供shopify主题购买，代运营，代建站

更多谷歌推广，外贸建站咨询请关注西木建站https://www.weswoo.com/