如何给Shopify店铺添加trust badge-网站安全图标?

    Shopify Andy 3616次浏览 15个评论

    摘要Trust badge又叫网站安全图标,被广泛应用于Shopify为首的独立站店铺页面中,作用是建立客户同店铺之间的安全信任,相对于已经被广大用户接受的Amazon,ebay,wish等大的电商平台,显然在Shopify店铺中添加trust badge-网站安全图标越来越成为一种趋势,从而增加店铺的购买转化率。

    如何给Shopify店铺添加trust badge-网站安全图标?

    立即注册Shopify,享受14天免费试用和Shopify开店教程指导

    通过Shopify独立站拓展我们的跨境电商业务中,通常有两种主要方式可以增加我们的Shopify店铺交易量。一个是增加网络流量,让更多潜在客户进入到我们的店铺。另一种方法是提高店铺页面和产品结帐页面的转化率,在现有流量基础上获得更多成交量。

    增加网络流量通常是通过SEO优化吸引搜索流量,社交流量,PPC广告,联盟营销等渠道来实现。而增加店铺页面的转化率可以通过调整产品价格,使用优惠券,甚至更改结帐按钮的颜色等等。

    这篇文章要讲的是增加Shopify店铺页面转化率另一个途径:在店铺最底下和结帐页面上添加trust badge (网站安全图标又叫信任图标)。这样做的目的是让潜在客户相信在我们Shopify店铺上购买物品的流程是绝对安全可靠的。随着在线欺诈的增加,消费者在网上购物的时候更关心的是个人信息,银行卡信息等会不会泄露以及购物网站的数据安全问题等等。

    那么trust badge-网站安全图标的种类有哪些?如何添加它们到我们的Shopify店铺呢?

    一,Trust badge(网站安全图标)的种类:

    1,SSL证书徽章
    如何给Shopify店铺添加trust badge-网站安全图标?SSL (Secure Socket Layer)在用户浏览器与用户访问的网站之间建立了一种保护机制。如果网站安装了SSL证书,那么就会为用户保护个人在网站输入的联系信息,信用卡信息等从而确保其在网站的数据安全。

    网站安装SSL证书后,浏览器的地址栏会有一个小挂锁图标,以及https://标识,我们的Shopify店铺默认都是赠送SSL证书的。

    2,付款安全图标

    如何给Shopify店铺添加trust badge-网站安全图标?

    通常Shopify中国卖家都会使用Paypal和Stripe这两种最常见的收款方式,在用户添加购物车按钮下面放上付款安全图标一来可以让客户知道我们支持这两种付款方式,二来可以让客户看到用这两种方式付款是没有任何安全隐患的。

    3,杀毒软件图标

    如何给Shopify店铺添加trust badge-网站安全图标?

    目前用的最多的杀毒软件图标就是诺顿(Norton)和迈克菲(McAfee),通常这两个就足够了,最常见的是将杀毒软件图标放到店铺的最下面footer板块。

    二,Shopify店铺增加trust badge-网站安全图标的步骤:

    我以使用Brooklyn-布鲁克林主题为例,分别讲下在Shopify店铺底部footer和结账页面添加网站安全图标的步骤:

    • Shopify店铺底部footer添加网站安全图标:

    1,准备好网站安全图标图片,通常我们可以进行Google查找,也可以将查找好的图片进行PS修改,尺寸可以暂时不用管,后面在代码里简单调整下。

    如何给Shopify店铺添加trust badge-网站安全图标?

    2,登录Shopify后台,依次点击Setting-Files-upload files,将准备好的网站安全图标上传,图标的URL路径可以先复制到一个文档备用。

    如何给Shopify店铺添加trust badge-网站安全图标?

     

    3,务必先备份在使用的Brooklyn主题(防止出现添加代码失败,可以切换回原来的,本教程不承担修改代码失败后的任何责任,请理解),然后依次点击Online Store -Themes – Actions – Edit Code查看修改代码文件。

    如何给Shopify店铺添加trust badge-网站安全图标?

    4, 在Sections文件夹下找到如图所示的footer.liquid,点击进入。

    如何给Shopify店铺添加trust badge-网站安全图标?

    5, 准备好本段代码:

    <div class=”trust-badge”>

      <img src=”网站图标URL链接”/>

    </div>

    6,  复制上面代码到如下图所示的位置,如果想调整高度和宽度可以直接在斜杠前输入height(或者width)=100PX或者200PX,300PX等等。

    如何给Shopify店铺添加trust badge-网站安全图标?

    7,下面是调整后的Shopify店铺底部效果图,当然你可以找一个更漂亮的trust badge图标来替换。

     

    如何给Shopify店铺添加trust badge-网站安全图标?

    • Shopify店铺结账页面添加网站安全图标:

    1, 依次点击Online Store -Themes – Actions – Edit Code,找到Sections文件夹下的Product-template.liquid文件将其打开。

    2, 通过搜索找到Addtocart下面的 Payment button,如下图所示位置插入代码:<div class=”trust-badge”>

      <img src=”网站图标URL链接”/>

    </div>

    如何给Shopify店铺添加trust badge-网站安全图标?

    3, 调整相应宽度或高度后点击save保存,之后就会看到如下界面:

    如何给Shopify店铺添加trust badge-网站安全图标?

    最后再次提醒,添加修改代码前请务必对Shopify主题进行备份。当然你也可以利用Shopify app中的部分插件来完成添加trust badge操作,后续会在Shopify App 中为大家做相关介绍。


    ExportB2C , 版权所有丨如未注明 , 均为原创丨未经授权,严禁转载,否则本网将保留追究其法律责任的权利。
    喜欢 (18)
    发表我的评论
    取消评论
    表情 贴图 加粗 删除线 居中 斜体 签到
    (15)个小伙伴在吐槽
    1. 注册
      匿名2019-01-22 18:23 回复 Windows 7 | Chrome 71.0.3578.98
    2. 不是brooklyn主题就找不到在哪里修改了?有什么窍门找在什么位置修改? 看不懂代码 :???:
      匿名2019-02-28 16:10 回复 未知操作系统 | Chrome 72.0.3626.109
      • 你好,如果不懂代码的话,有2种方法供参考: 1. Google搜索你使用的Shopify主题,看看有没有相关的增加Trust badge教程。2. 通过Shopify App来实现,比如Trust Hero
        Andy2019-03-22 20:11 回复 Windows 7 | Chrome 72.0.3626.121
    3. 两个问题“ 1. 按照您的教程设置了一次但图片无法显示,之前duplicate的主题点击进去后也并未回到之前的theme,怎么恢复啊? 2. 那些图标Google的图片是要收费的,您在哪里找的免费高清版啊?
      匿名2019-05-20 01:22 回复 Windows 10 | Chrome 72.0.3626.121
      • 你好! 1. 图片无法显示的话,是不是代码弄错了?或者位置弄错了?你使用的是Shopify的布鲁克林主题?教程里我是试了多次是没有问题的。
        关于Duplicate,是主题修改前备份的吗?如果是就能恢复,直接启用恢复的主题即可(Actions-publish)。
        2. 推荐一个网站给你:https://www.nicepng.com,上面搜索trust badge就有很多免费高清版的图片供下载用到Shopify的。
        Andy2019-05-20 09:07 回复 Windows 7 | Chrome 72.0.3626.121
    4. 你那段代码无法复制呢?你的是截图吧
      匿名2019-06-25 23:48 回复 Windows 7 | Chrome 75.0.3770.100
      • 网址设置的禁止复制……
        Andy2019-06-27 22:43 回复 Windows 7 | Chrome 75.0.3770.100
    5. Hi, 我是严格按照您的方法来的 但是不知道为什么图片加载不出来一直显示的是一个打不开的小方图片,求讲解,万分感谢
      匿名2019-07-04 16:37 回复 Windows 7 | Chrome 75.0.3770.100
      • 教程里我试了多次,没有问题的,截图邮件给我吧,info@exportb2.com
        Andy2019-07-05 18:08 回复 Windows 7 | Chrome 75.0.3770.100
    6. 博主放开复制嘛。。。。。。。 :???:
      匿名2019-08-20 16:30 回复 Windows 10 | Chrome 76.0.3809.100
    7. 底部和产品页面都试了,不行。会显示很小的出不来的图片。。。。。
      匿名2019-08-20 16:50 回复 Windows 10 | Chrome 76.0.3809.100
      • 应该是代码位置没有弄对吧?我试了多次没有问题的。
        Andy2019-08-26 10:40 回复 Windows 7 | Chrome 75.0.3770.100
    8. 用您的方法成功添加了安全图标,没有任何问题,十分感谢
      匿名2019-08-31 15:14 回复 未知操作系统 | Chrome 76.0.3809.132
    9. 非常感谢!Minimal也安排上了!
      匿名2019-11-09 15:02 回复 Windows 10 | Chrome 77.0.3865.120
    10. 亲自试过,Supply Theme也适合。
      匿名2019-11-16 17:00 回复 Windows 7 | Firefox 70.0
    
    error: Content is protected !!