优化Shopify移动手机端界面优化美化（添加快捷导航栏/快捷菜单)详解使用教程

今天是周日，大家都出去赏花度假，我独自一人在家花费了我大约3个半小时，写出了一套几乎适应所有Shopify/Wordpress移动端的快捷导航栏菜单；

为什么要写这个手机导航栏？
最近通过谷歌广告烧了一段时时间，发现手机端的流量占了所有流量的一半以上，如果一个让人产生烦躁的网站，浏览一圈还找不着北的网站，一个对于新的访客不信任的网站，都会造成访客流失，广告白花。所以，优化手机端是我们做独立站必须要考虑去做的。那么写这个导航栏可以解决Shopify那些问题呢？
1.让顾客很清晰知道你的网站结构是怎么样，有那些东西？（比如把你网站的Categories,On Sale,New Arrive,Clearance放在底部导航栏上）
2.让顾客知道你认为最重要的信息，比如你很想顾客知道你的联系方式，或者某个产品要做促销，放折扣券等等，顾客都能第一眼看到你要让顾客知道的信息。
3.页面更美观；
4.不多说了，用处自己去想。
展示如下成果；
在这里插入图片描述

<!--added code start-->
<style>
.mobile_qaozen {
display:block;
position:fixed;
z-index:98;
bottom:0;
right:0;
left:0;
text-align:center;
background-color:#fff;
border-top:1px #eee solid;
padding:0px
}
@media (min-width: 678px){.mobile_qaozen{display:none!important;}}
.mobile_qaozen ul {
margin-right:0;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center
}
.mobile_qaozen ul li {
min-width:20%;
padding:0
}
.mobile_qaozen ul li:last-child {
border-right:none
}
.mobile_qaozen ul li.wechat a svg {
width:17px;
height:17px
}
.mobile_qaozen ul li a {
font-weight:400;
font-size:12px;
display:block
}
.mobile_qaozen ul li a svg {
width:14px;
height:14px;
display:block;
margin:auto
}
.mobile_qaozen ul li a:hover svg {
fill:#004FCB
}
.mobile_qaozen ul li a.cart {
position:relative
}
.mobile_qaozen ul li a.cart span.cart-contents {
font-size:10px;
position:absolute;
top:-4px;
left:50%;
margin-left:4px;
width:14px;
height:14px;
line-height:14px;
display:block;
color:#fff;
background-color:#232323;
border-radius:100%
}
.mobile_qaozen {
display:block;
position:fixed;
z-index:98;
bottom:0;
right:0;
left:0;
text-align:center;
background-color:#606ec6;
border-top:1px #eee solid;
padding:0px
}
.mobile_qaozen ul {
margin-right:0;
display:-moz-flex;
display:-ms-flex;
display:-o-flex;
display:flex;
justify-content:center
}
.mobile_qaozen ul li {
min-width:20%;
padding:0
}
.mobile_qaozen ul li:last-child {
border-right:none
}
.mobile_qaozen ul li.wechat a svg {
width:17px;
height:17px
}
.mobile_qaozen ul li a {
font-size:12px;
display:block
color:white;
}
.mobile_qaozen ul li a svg {
width:14px;
height:14px;
display:block;
margin:auto
}
.mobile_qaozen ul li a:hover svg {
fill:#004FCB
}
.mobile_qaozen ul li a.cart {
position:relative
}
.mobile_qaozen ul li a.cart span.cart-contents {
font-size:10px;
position:absolute;
top:-4px;
left:50%;
margin-left:4px;
width:14px;
height:14px;
line-height:14px;
display:block;
color:#fff;
background-color:#232323;
border-radius:100%
}
svg {
width:24px;
height:24px;
display:inline-block;
vertical-align:middle
}
.box111{width:30px;text-align:center;font-size:14px;}
ul li a img{width:20px;}
.footer ul li {
margin-bottom: 0.5em!important;
line-height: 1.1;
}
.footer ul {
list-style: none;
margin: 0;
padding: 5px 0 0 0;
}
.footer a, .footer a:visited {
font-size: 14px;
}
</style>
<aside class="mobile_qaozen">
<ul>
<li class="box111"><a href="#Categories" target="_blank" rel="external nofollow" ><img src="https://cdn.shopify.com/s/files/1/0162/4394/9616/files/Categories.png?2543"><br><span style="color:white;">Categories</span></a>
</li>
<li class="box111"><a href="#search" target="_blank" rel="external nofollow" ><img src="https://cdn.shopify.com/s/files/1/0162/4394/9616/files/chakan.png?2543"><br><span style="color:white;">Search</span></a></li>
<li class="box111"><a href="#On Sale" target="_blank" rel="external nofollow" ><img src="https://cdn.shopify.com/s/files/1/0162/4394/9616/files/On-Sale.png?2543"><br><span style="color:white;">On Sale</span></a></li>
<li class="box111"><a href="#login" target="_blank" rel="external nofollow" ><img src="https://cdn.shopify.com/s/files/1/0162/4394/9616/files/UserSettings.png?2543"><br><span style="color:white;">Login</span></a></li>
<li class="box111"><a href="#contact us" target="_blank" rel="external nofollow" ><img src="https://cdn.shopify.com/s/files/1/0162/4394/9616/files/contact.png?2543"><br><span style="color:white;">Contact</span></a></li></ul></aside>
<!--added code end-->

开始操作：
第一步：复制下面的所以代码，找到我们要添加代码的文件footer.liquid（怎么找？打开Shopify主题-设置-编辑下面的编辑代码，找到Sections,然后找到footer.liquid文件打开）；

在这里插入图片描述

第二步：找到

标签前面就行，查找标签就能快速找到。然后点击保存代码；注意；不要随便去掉注释标签，这个是方便找到加进去的代码。

在这里插入图片描述
第三步：返回前端主页，检查字体颜色，样式布局是否错乱，（手机端以及电脑端都要查看）看看此代码是否兼容你的主题，不兼容，请及时联系博主；

第四步：更换代码里面的链接以及图标链接，以及显示的文字，如下图所示；

图标链接可以去阿里巴巴icon font里面挑选图标，选择128像素的，清晰些，下载到电脑，然后上传到Shopify里面，把链接复制到如下图标链接地方替换即可；（图标的大小已经在代码里面约束了像素，所以不用担心。只管选择你喜欢的图标即可）同时，此代码里面也可以添加SVG图标，已对代码做了优化；

在这里插入图片描述

可能要自定义的代码：

更换快捷导航菜单背景颜色：
更改.mobile_btn{background-color:#606ec6;}里面的#606ec6颜色码换成你需要的颜色的颜色码即可；
更改字体颜色：修改里面的white;换成你所需要的颜色的颜色码即可；
在这里插入图片描述