跳转至主要内容
Shopify 主题优化

第 174 期 Shopify Dawn 等主题优化 让 Mega Menu 超级菜单的一级菜单点击可跳转

点击这里查看 带字幕 视频教程     本期 YouTube 链接(免登录观看 4K)

之前我发过两期关于 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>

上期回顾

第 173 期 Shopify 店铺装修之多种配色方案和参考店铺