这个图标可以提高，Tiktok+独立站的转化率

今天我们要说的是shopify结账页面的一个小细节，那就是结账页面的Trust badge（网站安全图标）

做海外电商几乎每个人都需要有一个独立站，目前海外基大部的用户都会选择shopify来搭建自己的独立站来卖产品。

通过一个成熟的电商saas，来搭建自己的网站可以节省很多时间。一般用户从我们的Tiktok，还是其他的社媒平台最终都会有一个落地页，也就是用户最终付款的页面。

如何提高用户进入落地页的信任感是提高转化率的关键！

01.

什么是信任图标

信任图标的英文叫做Trust badge，一般国内都叫网站安全图标，一般用于Shopify结账页面提高安全信任度用的。

它的主要作用就是建立网站客户客户，和店铺之间的安全信任，其实对比于国内电商或者国外大平台电商来说，一般抖都不需要用到这个。

但是独立站由于是一个独立的站点，不具备大型网站的信任感，所以适当的增加一些安全图标是有利于提高网站转化率的。

比较谁也不希望在一个看起来像是骗子网站的地方支付自己的金钱。

目前几乎每个Shopify的店铺中都会添加trust badge，网站安全图标越来越成为一种趋势，因为它可以增加店铺的购买转化率。

第一种 SSL证书徽章

SSL （Secure Socket Layer）是在用户浏览器与用户访问的网站之间，建立了一种保护机制。

如果你的网站放置了这个图标，代表会为用户保护在网站输入敏感信息。

比如结账时候的信用卡信息，通过这个图标让用户放心在网站输入敏感信息（Shopify店铺默认都是赠送SSL证书的）

看自己网站有没有这个证书，通过浏览器https访问就可以知道了。

网站前面加了一把锁代表网站访问是安全的。

第二种 付款安全图标

通常Shopify国内卖家都会使用Paypal、Stripe这两种最常见的收款方式，在用户添加购物车按钮下面放上付款安全图标。

主要是让客户知道我们支持这些付款方式，还可以让客户看到用这两种方式付款是没有任何安全隐患的。

第三种 杀毒软件图标

目前用的最多的杀毒软件图标就是诺顿（Norton）和迈克菲（McAfee）

通常这两个就足够了，直接把最常见的是将杀毒软件图标放到店铺的最下面footer板块。

02.

如何正确的设置信任图标

通过添加Trust Badge可以提高你网站的转化率。你如果经常浏览独立站应该经常看到下面这种图标，比如支付相关的。

包括很多店主喜欢用这些自定义的图标比如30天退货、100%正品，如果能提供这些服务的情况下，增加这类图标肯定是非常好的。

这里分享3种给网站添加信任图标的常用方法。

1、安装Free Trust Badge 应用

这种是直接使用第三方的APP来实现这个图标的集成，一般三方APP提供的图标都比较全，而且很高清，这是推荐的一种方式，但是如果需要使用多个可能需要收费。

当然也有免费的版本下面这个APP，就是专门解决信任安全图标的问题。

我们在自己Shopify App Store中搜索 Free Trust Badge，具体方法如下，我使用的是这个App，点击后根据提示直接安装即可。

安装后我们可以看到APP显示到了我们的商店应用里面，然后点击这个APP就可以进入到设置后台了。

Trust Badger如何设置

下面图片打开的是APP的编辑后台，下图左边是编辑区，右边是效果显示区。

后台设置图标的编辑就这三个步骤

第一步：选择图标

选择需要的图标，可以对现有图标通过上下箭头调整位置，编辑和删除，击Add badge按钮可以添加新的图标，这里需要注意的是打开梯子，否则按钮失效；

选择图标最好是结合自身网站运营的情况来选择，并不是图标越多越好，而是要选择合适的图标来结合。

比如你明明已经有一个退款图标了，那么就不要在弄一个退款图标上去了，你可以结合一个全球免费送货的图标来搭配。

支付安全、退款退货、免费送货 基本都是围绕这几个方面来做安全提示。

第二步：设置图标

这一步可以可以调整图标以及上面的文字的大小、颜色、位置等，具体的效果需要结合自己网站的风格和配色来选择，尽量配色要和自己网站搭配一点，起码看起来不那么违和，首先自己看着舒服才行。

如果不知道如何搭配色可以多看看竞品网站是如何设计的，但是也不要太纠结于配色了。

第三部：激活图标

一般完成了上面二步后，我们编辑完毕点击右上角的保存按钮，刷新页面就可以查看显示效果。

但是我测试下来这个APP的加载有点延迟，可能是我网速的问题，大家可以自己装个APP试一试，加购物车页面有一个这样的安全图标看起来还是很不错的。

二、通过Footer中编辑信任图标

这个Footer就是网站底部显示的区域，shopify其实默认都会有底部这些图标，如果自己想变更图标或者换颜色，也可以通过在自定义网站部分修改它。

第一步：网站自定义页面编辑

打开我们Shopify后台自定义页面，找到的Footer 设置部分

勾选Show payment icons，选中之后可以看到网站底部显示了支付的图标。

三、编辑底部的支付方法图标

如果想要修改底部的图标的话，这里需要设计网站代码的修改，建议没有特殊需求的情况下，不要修改网站代码。

如果一定要修改一定一定在任何代码修改之前备份当前主题，这样防止网站代码被改错。

备份方法：

打开后台页面找到在线商店，模板页面，然后找到当前使用的主题，点击三个小点机会出现一个下拉选项。

我们直接点击复制就可以把当前主题的样式复制一份了，是不是很简单。

修改代码方法：首先要找到代码编辑位置

在线商店 -> 主题 -> 找到编辑代码的位置。

搜索footer，找到Sections中的footer.liquid

编辑代码

在footer.liquid文件中做代码替换，CTRL+F （Windows） 或者 command+F （Mac），找到

for type in shop.enabled_payment_types

然后替换成下面的语句：

{% assign enabled_payment_types = ‘paypal,visa,master,american_express,apple_pay' | remove: ' ' | split: ',' %}

{% for type in enabled_payment_types %}

点击左上角保存按钮，刷新界面，网站首页底部看到如下效果：

需要更详细的代码修改安全图标，可以查看官方的说明文档：

https://shopify.dev/tutorials/customize-theme-add-credit-card-icons

三、通过代码自定义安全图标

找到查询需要的自定义图标

安装插件Ultimate Product Icons，可以选择自定义的安全图标，或者Google搜索需要的安全图标，需要注意的一点是选择的安全图标背景是透明的。

a、上传找到的自定义安全图标

还是老样子在主题编辑代码的位置找打一个文件夹，在Assets中点击 Add a new asset，上传安全图标。

b、拷贝图标地址

上传成功后，然后选中已上传的图标，右击鼠标拷贝图标地址.

c、修改代码

完成上面的素材上传和图标地址获取后，然后我继续在编辑代码的位置，参考前面的方法找到对应的文件：

Sections -> product-template.liquid

在代码页面找到这段代码：

<div class="product-single__description rte" itemprop="description">

{{ product.description }}

</div>

在其下面增加如下代码：

<div> <img src=“前面拷贝的图标地址替换"></div>

<br>

然后点击左上角保存按钮，刷新界面，最终效果就展示成了，我们上传图标的样子了。

（文章完）