如何在Shopify主菜单中添加超过3级的嵌套菜单？

核心思路 #

Shopify后台默认最多支持3级导航，但可以通过自定义元字段+Liquid递归渲染实现更深层级的菜单，完全不用第三方应用。

步骤1：给父菜单项添加自定义元字段 #

1. 进入Shopify后台「导航」页面，找到要扩展的3级菜单项（比如示例里的Shoes）
2. 点击该菜单项的编辑按钮，在页面底部「元字段」区域点击「添加定义」
3. 新建元字段：
   • 命名：比如deep_submenu
   • 命名空间：选择custom（或自定义命名空间如menu）
   • 类型：选「多行文本」，用来存储JSON格式的子菜单数据
4. 回到菜单项编辑页，在刚创建的元字段中填入四级菜单的JSON数据，示例：

   [
     {"title": "Sneakers", "url": "/collections/sneakers"},
     {"title": "Running Shoes", "url": "/collections/running-shoes"}
   ]
   

5. 保存菜单项。

步骤2：修改主题的导航Liquid模板 #

找到主题中负责渲染导航的文件（通常是sections/header.liquid或snippets/navigation.liquid），替换原有菜单渲染逻辑为递归渲染代码：

1. 创建递归snippet文件snippets/menu-item.liquid，内容如下：

   <li class="menu-item {% if link.active or link.child_active %}active{% endif %}">
     <a href="{{ link.url }}">{{ link.title }}</a>
     {% comment %} 渲染Shopify后台默认的3级子菜单 {% endcomment %}
     {% if link.links != blank %}
       <ul class="submenu">
         {% for child_link in link.links %}
           {% render 'menu-item', link: child_link %}
         {% endfor %}
       </ul>
     {% endif %}
     {% comment %} 渲染元字段中的四级子菜单 {% endcomment %}
     {% assign deep_submenu = link.metafields.custom.deep_submenu %}
     {% if deep_submenu != blank %}
       {% assign deep_items = deep_submenu | parse_json %}
       {% if deep_items.size > 0 %}
         <ul class="submenu deep-submenu">
           {% for item in deep_items %}
             <li class="menu-item">
               <a href="{{ item.url }}">{{ item.title }}</a>
             </li>
           {% endfor %}
         </ul>
       {% endif %}
     {% endif %}
   </li>
   

2. 在主导航文件中调用该snippet，示例：

   <nav class="main-navigation">
     <ul class="main-menu">
       {% for link in linklists.main-menu.links %}
         {% render 'menu-item', link: link %}
       {% endfor %}
     </ul>
   </nav>
   

步骤3：添加CSS样式（可选） #

根据现有菜单样式，给四级子菜单补充对应的CSS，示例：

.deep-submenu {
  margin-left: 20px;
  display: none;
}
.menu-item:hover .deep-submenu {
  display: block;
}

按照以上步骤就能实现Men->Fashion->Shoes->Sneakers的四级嵌套菜单，后续要扩展更多层级，只需在对应菜单项的元字段中嵌套JSON数据，再调整递归逻辑即可。

内容的提问来源于stack exchange，提问作者Faizan