第 163 期 Shopify 超级菜单 Mega Menu 添加与美化
5 min read

第 163 期 Shopify 超级菜单 Mega Menu 添加与美化

点击这里查看 带字幕 视频教程

增强版主题已添加此功能,可以直接迁移到增强版,拥有全部功能

本期教程以 Dawn 为例,演示 Shopify 官方推出的 2.0 版主题如何添加超级菜单,也就是 Mega Menu。让你的导航菜单支持添加图片,而非单纯的文字形式。

如果你用的是其他主题( 例如:Refresh, Craft, Sense, Origin,  Ride, Studio, Spotlight, Taste, Crave, Publisher, Colorblock ),原理也是一样的,跟着视频操作即可实现。

效果预览

添加前(Shopify 默认的菜单导航样式)

Shopify 默认的菜单样式

添加后-1 (文字 + 图片 的形式)

Shopify-dawn-mega-menu-with-title

添加后-2(图片为主的形式)

Shopify-dawn-mega-menu-带图片的超级菜单样式

效果预览链接

一、准备工作(结合上方视频演示进行操作)

  • 设置 Header 菜单类型为超级菜单
Shopify-Mega-Menu-设置为超级菜单
  • 设置导航菜单
Shopify-超级菜单设置方法

分隔符号(如果你输入不出来,可以一键复制)

 | 

二、添加超级菜单

编辑 sections ~ header.liquid

搜索:

MegaMenu-Content-

将 ul 元素替换为(提示:宽高比和图片为主形式 index 可自主调整。图片为主形式默认只提供一项菜单,看视频教程较多或 SVIP懂主题原理,可自行修改增加更多数量):

<ul {% if forloop.index == 3 %}style="display: flex;"{% endif %} class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}" role="list">
    {%- for childlink in link.links -%}
    {% if childlink.title contains '|' %}
    {% assign menu_img_url = childlink.title | split: '|' | last %}
    <li class="flex">
    <a href="{{ childlink.url }}" style="color: #000;text-decoration: none;">
    <p style="margin: 0; margin-bottom: 10px;text-align: center;font-weight: 700;">{{ childlink.title | split: '|' | first | strip_html | escape }}</p>
    <img src="{{ menu_img_url }}" alt="mega-menu-image" loading="lazy" width="150" height="150" style="margin-top: 10px;">
    </a>
    </li>
    {% else %} 
    <li>
    <a href="{{ childlink.url }}" class="mega-menu__link mega-menu__link--level-2 link{% if childlink.current %} mega-menu__link--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
    {{ childlink.title | escape }}
    </a>
    {%- if childlink.links != blank -%}
    <ul class="list-unstyled" role="list">
    {%- for grandchildlink in childlink.links -%}
    <li>
    <a href="{{ grandchildlink.url }}" class="mega-menu__link link{% if grandchildlink.current %} mega-menu__link--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
    {{ grandchildlink.title | escape }}
    </a>
    </li>
    {%- endfor -%}
    </ul>
    {%- endif -%}
    </li>
    {% endif %}
    {%- endfor -%}
</ul>

搜索:

Details-menu-drawer-submenu-

将其上方 a 标签内部替换为:

{% if childlink.title contains '|' %}
	{{ childlink.title | split: '|' | first | escape }}
{% else %} 
	{{ childlink.title | escape }}
{% endif %}

三、美化超级菜单(可选)

隐藏下划线

隐藏一级菜单下划线:

span.header__active-menu-item {
    text-decoration: none;
}

隐藏二级菜单下划线:

a.mega-menu__link.link.mega-menu__link--active {
    text-decoration: none;
}

加粗二级标题

.mega-menu__link--level-2 {
    font-weight: 700;
}

效果预览链接

💡
图片比例与其他样式,可参考视频提示,结合店铺需求自行修改
第 135 期 零基础 Shopify 前端教程 修改店铺内容必看
面向个人卖家和运营人员的 Shopify 零基础前端教程,修改店铺网页内容必看,

还没有自己的店铺?点击这里 1 元开店或创建插件测试/免费试用店铺

第 143 期 一元开店 低成本拥有你自己的 Shopify 店铺
限时福利:既可用于创建新的店铺,也可以创建测试店铺(例如免费试用插件 APP 等),避免测试插件时代码残留在主题中,拖慢店铺网速。

如果不想自己操作,可以直接使用增强版主题(已添加)

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

免费版本提供了两种形式已基本够用,如需全部或同时使用多个以 “图片为主” 形式,实现更美观统一的效果,解决方法:

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

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

可微信私聊: Shopify2006 或 扫码 ↓

Shopify2006_Wechat

别人能学会的, 你也能会