今天我们要说的是shopify结账页面的一个小细节,那就是结账页面的Trustbadge(网站安全图标) 做海外电商几乎每个人都需要有一个独立站,目前海外基大部的用户都会选择shopify来搭建自己的独立站来卖产品。 通过一个成熟的电商saas,来搭建自己的网站可以节省很多时间。一般用户从我们的Tiktok,还是其他的社媒平台最终都会有一个落地页,也就是用户最终付款的页面。 如何提高用户进入落地页的信任感是提高转化率的关键! 01。hr什么是信任图标 信任图标的英文叫做Trustbadge,一般国内都叫网站安全图标,一般用于Shopify结账页面提高安全信任度用的。 它的主要作用就是建立网站客户客户,和店铺之间的安全信任,其实对比于国内电商或者国外大平台电商来说,一般抖都不需要用到这个。 但是独立站由于是一个独立的站点,不具备大型网站的信任感,所以适当的增加一些安全图标是有利于提高网站转化率的。 比较谁也不希望在一个看起来像是骗子网站的地方支付自己的金钱。 目前几乎每个Shopify的店铺中都会添加trustbadge,网站安全图标越来越成为一种趋势,因为它可以增加店铺的购买转化率。 第一种SSL证书徽章 SSL(SecureSocketLayer)是在用户浏览器与用户访问的网站之间,建立了一种保护机制。 如果你的网站放置了这个图标,代表会为用户保护在网站输入敏感信息。 比如结账时候的信用卡信息,通过这个图标让用户放心在网站输入敏感信息(Shopify店铺默认都是赠送SSL证书的) 看自己网站有没有这个证书,通过浏览器https访问就可以知道了。 网站前面加了一把锁代表网站访问是安全的。 第二种付款安全图标 通常Shopify国内卖家都会使用Paypal、Stripe这两种最常见的收款方式,在用户添加购物车按钮下面放上付款安全图标。 主要是让客户知道我们支持这些付款方式,还可以让客户看到用这两种方式付款是没有任何安全隐患的。 第三种杀毒软件图标 目前用的最多的杀毒软件图标就是诺顿(Norton)和迈克菲(McAfee) 通常这两个就足够了,直接把最常见的是将杀毒软件图标放到店铺的最下面footer板块。 02。hr如何正确的设置信任图标 通过添加TrustBadge可以提高你网站的转化率。你如果经常浏览独立站应该经常看到下面这种图标,比如支付相关的。 包括很多店主喜欢用这些自定义的图标比如30天退货、100正品,如果能提供这些服务的情况下,增加这类图标肯定是非常好的。 这里分享3种给网站添加信任图标的常用方法。 1、安装FreeTrustBadge应用 这种是直接使用第三方的APP来实现这个图标的集成,一般三方APP提供的图标都比较全,而且很高清,这是推荐的一种方式,但是如果需要使用多个可能需要收费。 当然也有免费的版本下面这个APP,就是专门解决信任安全图标的问题。 我们在自己ShopifyAppStore中搜索FreeTrustBadge,具体方法如下,我使用的是这个App,点击后根据提示直接安装即可。 安装后我们可以看到APP显示到了我们的商店应用里面,然后点击这个APP就可以进入到设置后台了。 TrustBadger如何设置 下面图片打开的是APP的编辑后台,下图左边是编辑区,右边是效果显示区。 后台设置图标的编辑就这三个步骤 第一步:选择图标 选择需要的图标,可以对现有图标通过上下箭头调整位置,编辑和删除,击Addbadge按钮可以添加新的图标,这里需要注意的是打开梯子,否则按钮失效; 选择图标最好是结合自身网站运营的情况来选择,并不是图标越多越好,而是要选择合适的图标来结合。 比如你明明已经有一个退款图标了,那么就不要在弄一个退款图标上去了,你可以结合一个全球免费送货的图标来搭配。 支付安全、退款退货、免费送货基本都是围绕这几个方面来做安全提示。 第二步:设置图标 这一步可以可以调整图标以及上面的文字的大小、颜色、位置等,具体的效果需要结合自己网站的风格和配色来选择,尽量配色要和自己网站搭配一点,起码看起来不那么违和,首先自己看着舒服才行。 如果不知道如何搭配色可以多看看竞品网站是如何设计的,但是也不要太纠结于配色了。 第三部:激活图标 一般完成了上面二步后,我们编辑完毕点击右上角的保存按钮,刷新页面就可以查看显示效果。 但是我测试下来这个APP的加载有点延迟,可能是我网速的问题,大家可以自己装个APP试一试,加购物车页面有一个这样的安全图标看起来还是很不错的。 二、通过Footer中编辑信任图标 这个Footer就是网站底部显示的区域,shopify其实默认都会有底部这些图标,如果自己想变更图标或者换颜色,也可以通过在自定义网站部分修改它。 第一步:网站自定义页面编辑 打开我们Shopify后台自定义页面,找到的Footer设置部分 勾选Showpaymenticons,选中之后可以看到网站底部显示了支付的图标。 三、编辑底部的支付方法图标 如果想要修改底部的图标的话,这里需要设计网站代码的修改,建议没有特殊需求的情况下,不要修改网站代码。 如果一定要修改一定一定在任何代码修改之前备份当前主题,这样防止网站代码被改错。 备份方法: 打开后台页面找到在线商店,模板页面,然后找到当前使用的主题,点击三个小点机会出现一个下拉选项。 我们直接点击复制就可以把当前主题的样式复制一份了,是不是很简单。 修改代码方法:首先要找到代码编辑位置 在线商店主题找到编辑代码的位置。 搜索footer,找到Sections中的footer。liquid 编辑代码 在footer。liquid文件中做代码替换,CTRLF(Windows)或者commandF(Mac),找到 fortypeinshop。enabledpaymenttypes 然后替换成下面的语句: {assignenabledpaymenttypes‘paypal,visa,master,americanexpress,applepayremove:split:,} {fortypeinenabledpaymenttypes} 点击左上角保存按钮,刷新界面,网站首页底部看到如下效果: 需要更详细的代码修改安全图标,可以查看官方的说明文档: https:shopify。devtutorialscustomizethemeaddcreditcardicons 三、通过代码自定义安全图标 找到查询需要的自定义图标 安装插件UltimateProductIcons,可以选择自定义的安全图标,或者Google搜索需要的安全图标,需要注意的一点是选择的安全图标背景是透明的。 a、上传找到的自定义安全图标 还是老样子在主题编辑代码的位置找打一个文件夹,在Assets中点击Addanewasset,上传安全图标。 b、拷贝图标地址 上传成功后,然后选中已上传的图标,右击鼠标拷贝图标地址。 c、修改代码 完成上面的素材上传和图标地址获取后,然后我继续在编辑代码的位置,参考前面的方法找到对应的文件: Sectionsproducttemplate。liquid 在代码页面找到这段代码: {{product。description}} 在其下面增加如下代码: 然后点击左上角保存按钮,刷新界面,最终效果就展示成了,我们上传图标的样子了。