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

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

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

Categories


Search

On Sale

Login

Contact

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

第二步：找到

标签，把复制的代码，黏贴在footer标签后面，对新手一丁点代码都不懂的，你可以放在

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

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

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

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

可能要自定义的代码：

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