为什么会有这篇教程

因为论坛有朋友想要在页面上添加一个这样的logo,添加 McAfee 的 logo 确实能提高在外国人眼中的可信度(主观上)。

借此也教给大家在主题上添加一些小元素的技巧,以后添加一些小图标或者小链接之类的也能轻松搞定啦。

image-20210327145532263

本期目标:在店铺的底部添加一个 mcafee 的图标。

image-20210327145702233

所需原料:一个shopify店铺,一个 mcafee 图标文件, 一个认真的你。

image.png

这次我们先迫害使用最多的 Debut 主题。

话不多说,先打开主题的编辑页面:

image-20210327142538686

接下来打开左侧 Sections 文件夹下的 footer 文件:

image-20210327143224627

接下的打开 Assets 文件夹,点击 add a new asset,选择上传文件,把事先准备好的图标上传:

image-20210327143537897

接下来,咱们回到 footer.liquid 的编辑页面,使用快捷键(Win: Ctrl + F Mac: Command + F)搜索 site-footer-item-align-right

点击下一个结果的按钮定位到最后一个元素:

image-20210327144927449

在这个元素的后面添加以下的代码:

 <div class="site-footer-item-align-right">
      	<image src="{{ 'mclogo.png' | asset_img_url }}" />
 </div>

image-20210327145052694

点击右上角的save 按钮保存。

酱紫全部的操作就弄完了,现在回到店铺前台拉到页面底部看看效果吧。

image-20210327145404925

图标文件下载:https://dlzhub.csuup.com/mclogo.png