之前我发过两期关于 Shopify Dawn 等一系列官方主题添加超级菜单 以及 鼠标悬浮触发超级菜单 的视频。
本期介绍挺多人问到的,如何在点击 Shopify 一级菜单的时候,跳转到对应的链接。
的确,默认的官方丐版主题因为点击要展开菜单,所以不跳转。
而增强版主题都已经能够悬浮展示超级菜单了,为什么不让它点击跳转呢,这样也更符合用户习惯,一级菜单也可以链接到对应的页面。
第 142 期 适用于所有 Shopify 推出的主题 增强版本 添加三十几项功能
Shopify增强版主题,添加几十项功能,支持一键开启或关闭。适用于所有Shopify推出的 2.0 版九款主题,减少插件安装,降低每个月的插件订阅费。访问查看具体内容与视频演示

其实修改起来非常简单,跟着视频复制粘贴即可。
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>