第 208 期 在移动端底部添加 App 风格的快捷导航功能

点击这里查看 带字幕 视频教程    本期 YouTube 链接

本期内容分享之前挺多人问过的,如何在 Shopify 移动端添加一个 App 风格的快捷导航条。

分为两个版本,包含五项功能:链接到首页、产品类目页、购物车、搜索、Account 页面,方便客户进行相应的操作和浏览。如下图所示;

Shopify 移动端快捷导航免费版

两个版本

一个是直接对照本教程复制粘贴即可实现的版本(提供给看我视频的粉丝),另一个则是已经更新到增强版主题最新版中的功能。

两者的区别是免费版很容易跟着操作,只需一步即可实现,不过五项功能都是链接;而增强版主题中的这项功能支持一键开启和关闭,并且能够调出弹窗购物车和搜索框,让客户不用跳转即可操作。

第 142 期 适用于所有 Shopify 推出的主题 增强版本 添加五十几项功能
Shopify 店铺用什么主题比较好?哪款主题更好用?Shopify增强版主题,添加几十项功能,支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题,减少插件安装,降低每个月的插件订阅费。访问查看具体内容与视频演示
Shopify 增强版主题一键开关功能

调出搜索框(同时可以看到免邮提醒功能)

移动端快捷调出弹窗购物车

调出搜索框,免跳转直接在当前页进行搜索:

移动端调出搜索框

顺便提醒一下,Shopify 增强版主题使用手册 已经支持快捷搜索功能,点击右上角或者使用快捷键 Ctrl + K/Command + K 即可搜索想要查找的内容。

代码复制

上面提到了,增强版主题最新版中更新了这个功能,已经在使用增强版主题的店铺可以去下载最新版本。即使是不同的主题风格(配色),也会自动匹配背景色。

接下来提供一键复制版,直接复制添加到 theme.liquid/body 之前即可:

以下内容只有授权的 SVIP 用户才能查看

目前已有 307 位 SVIP, 如果你还不是

可微信私聊: Shopify2006 或 扫码 ↓

Shopify2006_Wechat

别人能学会的, 你也能会

来自 Shopify 官方的介绍

内容标签:   #B站教程,   #主题优化,   #主题开发,   #导航菜单