为Shopify独立站添加Trust Badge安全图标

Shopify1年前 (2023)更新 Nest1234
29 0

通过添加Trust Badge,可以提高你网站的转化率。何为Trust Badge,类似下面这种图标。

比如支付相关的:

image 23
image 24

又或者其他一些店主自定义的图标:

image 25

这里整理了3种给网站添加信任图标的常用方法。

使用APP

下载 & 安装 Trust Badge

Shopify App Store中搜索 Free Trust Badge,具体方法如下:

image 26

我使用的是这个App,选中后根据提示直接安装即可:

image 27

或者登录自己Shopify站后直接访问下面的链接:

https://apps.shopify.com/trust-badge

编辑 Trust Badge

下图左边是编辑区,右边是效果显示区。

对这款插件的编辑有三个步骤:

Badge Selection

选择需要的图标,可以对现有图标通过上下箭头调整位置,编辑和删除;

点击Add badge按钮可以添加新的图标,这里需要注意的是打开vvv,否则按钮失效;

Design Settings

可以调整图标以及上面的文字的大小、颜色、位置等;

Activate badge

激活图标;

image 28

编辑完毕点击右上角的保存按钮,刷新页面查看显示效果。

image 29

在Footer中编辑支付信任图标

在网站底部打开支付图标

编辑Shopify后台的Footer sections

image 30

选中Footer section 的 Show payment icons

image 31

网站底部显示支付方法图标

image 32

编辑底部的支付方法图标

这里需要设计网站代码的修改,所以一定一定在任何代码修改之前备份当前主题。

备份方法:

Online Store -> Themes ->Actions -> Duplicate

image 33

在Theme library中出显示刚才的备份,建议Actions中修改备份名字;

OK,下面开始具体的变更方法。

找到代码编辑位置

Online Store -> Themes -> Actions -> Edit code

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

image 34

编辑代码

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 %}

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

image 35

其中具体支付安全图标的选择和顺序,有替换代码‘paypal,visa,master,american_express,apple_pay’中内容和顺序决定。

其他安全图标,也是变更方法的官方说明文档:

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

通过代码自定义安全图标

查询需要的自定义图标

安装插件Ultimate Product Icons,可以选择自定义的安全图标,或者Google搜索需要的安全图标。

需要注意的一点是选择的安全图标背景是透明的。

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

Online Store -> Themes -> Actions -> Edit code

在Assets中点击 Add a new asset,上传安全图标。

image 36

拷贝图标地址

选中已上传的图标,右击鼠标,拷贝图标地址

image 37

修改代码

参考前面的方法找到对应的文件:

Sections -> product-template.liquid

找到这段代码:

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

{{ product.description }}

</div>

在其下面增加如下代码:

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

<br>

点击左上角保存按钮,刷新界面,如下效果:

image 38
© 版权声明

相关文章