ColorZilla网页取色器快速提取竞争对手网站颜色代码

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

我们在很早之前的Shopify主题如何选择一文中有简单说过色彩对在线营销的意义。并强调说,在网站建站前期,可以通过研究学习,甚至照搬你行业里面大牌竞争对手的网站色彩搭配来快速上线自己的独立站(至少我就是这么干的)。

就比方说,我的Shopify网站的配色最一开始就是完全按照电商巨头Amazon的配色来的,顶部是深蓝色背景,主题是白底加黑色字体,链接文字是蓝色的,Review Rating Star是黄色的,以及,最最重要的,购物车按钮和BUY NOW按钮是橙色的。

要知道,Amazon这种体量的公司会进行非常多的AB测试的,至少有段时间我是见过Amazon的购物车按钮是下图这个样子的,而且就我个人审美上来讲,我是更喜欢下图中的加入购物车按钮的颜色和样式的,不过最终,Amazon还是调整回了原来的Add to Cart的颜色和样式。至于为什么调整,官方没有明确的说法,不过个人猜测是经过AB测试,发现还是亚马逊原来的购物车按钮转化效果要更好一些。

不管怎么说,在我自己还没有能力通过超大流量去进行AB测试然后得出结论说哪个按钮样式或者颜色转化率更高的时候,能做的,就是照搬别人现成的经验。当然,行业里面是有一个说法的,叫Big Orange Button,当你不知道为你的Call to Action按钮设置为什么颜色的时候,遵循BIG ORANGE是准没有错的,不过,你也可以结合你行业里面的巨头他们的网站来做出更好的选择。

比方说随意翻看了下脑子里面记下来的几个之前做宠物用品的时候经常去逛的卖宠物用品的几个行业里面的大网站,发现他们的购买按钮基本上可以分为两个色系,Orange 和 Blue。那我如果现在要做宠物用品的话,网站的购物车按钮肯定就是基于蓝色或者橙色来选择了,网站整体配色也同样会围绕着购物车按钮,参考竞争对手来设置。

那么问题来了,你说的橙色到底是什么颜色,你说的蓝色又到底是什么颜色呢?

在使用ColorZilla这一工具之前,我都是借助PS来提取颜色代码的,首先要使用截图工具把竞争对手网站给截下来,然后PS打开图片,用吸管工具获取想要提取的颜色代码,一一记录下来,再去设置自己的Shopify完整。

后来一位做设计的朋友推荐我使用ColorZilla,发现确实好用!

 

ColorZilla谷歌浏览器插件的下载安装与使用

ColorZilla是一款基于谷歌浏览器Chrome和火狐浏览器Firefox的插件,因此要使用ColorZilla,你就要先确保你的电脑上下载安装了Chrome或者Firefox。另外,访问Chrome的应用商店是需要搭梯子才能访问的,因此请确保你有可用的梯子可以正常打开应用商店的网页。

使用谷歌浏览器点击下面的链接打开ColorZilla应用商店的安装页面,然后点击“添加至Chrome”安装到你的谷歌浏览器即可。

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

Colorzilla的安装

安装成功之后打开你要研究的竞争对手的网站,然后点击浏览器中ColorZilla的吸管小图标,在下拉选项中点击 选项 “Pick Color From Page”按钮,然后鼠标指针就会变成一个小“+”号

将加号挪动到你要提取的颜色的网页部分,单击即可提取出该颜色的代码,如下图,Paw这个网站的加购按钮的颜色代码为 #054DAE。你也可以再次点击浏览器中的习惯按钮,然后点击 “Copy to Clipboard”直接将刚刚提取的颜色代码复制下来

下一步我们要做的,就是打开我们自己的Shopify网站的后台,在主题设置页面,将购物车按钮的颜色代码修改为 #054DAE,就能获得和Paw这个网站一模一样的按钮颜色来,其他部分颜色设置,例如顶部Announcement Bar的绿色背景颜色,Review Star的颜色,标题描述的文字颜色等等都可以一一提取出来,并应用到自己的网站上。

很简单吧?Happy ColorZilla!

未经允许不得转载:歪猫跨境独立站博客 » ColorZilla网页取色器快速提取竞争对手网站颜色代码

赞 (5)
新评论邮件通知
提醒
guest
0 评论
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新卖家注册账户前请务必认真阅读以下注意事项:

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