第 174 期 Shopify Dawn 等主题优化 让 Mega Menu 超级菜单的一级菜单点击可跳转
点击这里查看 带字幕 视频教程 本期 YouTube 链接(免登录观看 4K)
之前我发过两期关于 Shopify Dawn 等一系列官方主题添加超级菜单 以及 鼠标悬浮触发超级菜单 的视频。
本期介绍挺多人问到的,如何在点击 Shopify 一级菜单的时候,跳转到对应的链接。
的确,默认的官方丐版主题因为点击要展开菜单,所以不跳转。
而增强版主题都已经能够悬浮展示超级菜单了,为什么不让它点击跳转呢,这样也更符合用户习惯,一级菜单也可以链接到对应的页面。
其实修改起来非常简单,跟着视频复制粘贴即可。
PC 端
💡
以下代码基于录制视频时的最新版 Dawn 10.0.0, 如果你用的是低版本,可以参考 Shopify查找元素与定位教程 进行操作
在 header-mega-menu.liquid 中搜索:
Details-HeaderMenu
用以下代码包裹 <summary> 中的 <span> 元素
<a href="{{ link.url }}" style="text-decoration: none; color: #000;">
</a>
移动端
在 header-drawer.liquid 中搜索:
Details-menu-drawer-menu-item
用以下代码将 link.title 包裹起来:
<a href="{{ link.url }}" style="text-decoration: none; color: #000;">
</a>