如何在 Shopify 导航菜单中添加子菜单（下拉菜单、层级设置与移动端适配）
在 Shopify 中添加子菜单只需在「内容 > 菜单」中拖动一次即可完成 — 但只有在父项、模版的页头菜单以及移动端抽屉均配置正确的前提下，顾客才能顺畅浏览。
刚建立在线店铺时，一个包含四五个链接的单层横向菜单完全够用。然而随着商品目录不断扩充，将所有系列挤在同一行会导致页头极度拥挤。在电商网站设计中，子菜单、下拉菜单与嵌套菜单项均指代同一种结构：将次级链接整齐地收纳在主分类标题下方。你无需修改代码，直接在 Shopify 管理后台即可完成搭建。
- 快速嵌套操作： 在内容 > 菜单中，按住手柄图标（
⠿），将子项拖动到父项正下方并稍向右移即可完成嵌套。 - 层级深度上限： Shopify 支持在顶级项目下方嵌套最多两级（总共三级菜单），前提是你的模版支持该层级展示。
- 非跳转父级菜单： 在链接字段填入
#，可使父项仅作为下拉展开按钮，避免误触跳转至空白页面。
快速解答：如何在 Shopify 中添加子菜单
要在 Shopify 中添加子菜单，请前往「内容 > 菜单」，打开主菜单，在父项下方添加目标项目，将其拖动到该父项下方并稍向右移，然后点击「保存菜单」。顶级项目最多可容纳两级嵌套下拉菜单。
具体执行以下 5 个步骤：
- 在 Shopify 后台进入 内容 > 菜单。
- 点击要编辑的菜单标题（通常为 Main menu）。
- 点击 添加菜单项，输入 名称 及目标链接，点击 添加。
- 按住菜单项旁边的手柄图标（
⠿），将其拖至父项正下方并稍微向右移动以进行嵌套。 - 点击 保存菜单。
顶级项目下方最多可容纳两级嵌套下拉菜单。
什么是子菜单以及店铺何时需要子菜单
子菜单是归纳在主分类标题下的次级链接列表。在电脑端，鼠标悬停或点击会展开下拉菜单；在手机端，子项则展示在滑出式抽屉菜单中。
嵌套导航是有效组织产品系列、产品和页面的通用方案。嵌套菜单避免了页面的过度拥挤，能建立清晰的视觉路径。顾客可以先快速浏览「服饰」等大类，再精确定位到「夹克」等具体子类。
是否添加子菜单取决于目录的体量。Shopify 建议添加 7 个或更少的顶级菜单项以避免过度拥挤。将相关系列归并至父项下，可以让较长的导航栏更容易浏览。
若店铺仅经营几款商品或两三个小系列，则无需使用子菜单。在小目录上强加下拉菜单只会增加无谓的点击阻力。
合理的导航层级还有助于搜索引擎更高效地抓取店铺结构。深入了解 Google 如何抓取你的菜单，了解菜单链接如何帮助搜索引擎发现你的产品系列页面。
如何在 Shopify 中逐步添加子菜单
Shopify 提供了直观的拖拽式菜单管理器。你可以在电脑端或移动应用中轻松构建菜单层级。
在电脑端操作
- 在 Shopify 后台前往 内容 > 菜单。（注意：旧版指南将该板块称为 在线商店 > 导航；Shopify 帮助中心目前使用的是 内容 > 菜单。）
- 点击要修改的菜单，通常为 Main menu。
- 若尚未建立父项，点击 添加菜单项，输入名称（如「商城」），设置链接后点击 添加。
- 再次点击 添加菜单项 创建子项。在 名称 栏输入标签，在 链接 栏选择对应的产品系列或页面，点击 添加。
- 找到新项左侧的六点手柄图标（
⠿）。长按菜单项旁边的手柄图标（⠿），将菜单项拖动到其他位置。将其拖至父项下方并稍向右移，看到行缩进后松开鼠标。 - 重复此操作添加其他子项，并可通过拖动调整先后排序。
- 点击 保存菜单。建议经常保存菜单更改，以免达到 Shopify 的更改次数上限。
在 Shopify 移动应用中操作
通过智能手机也可以管理菜单结构：
- 打开 Shopify 应用，点击菜单图标，在 Contents 部分打开 菜单。
- 点击主菜单的名称，然后点击 添加菜单项。
- 输入名称与链接，点击 添加。
- 长按手柄图标（
⠿），将其拖至父项下方并向右滑动至缩进位置。 - 点击 保存。
Shopify 建议在移动设备上测试菜单，以确认下拉菜单按预期展开，并确保触控热区舒适易点。
创建仅用于打开下拉菜单的父项（无跳转链接）
许多商家常问：「如何让 Shopify 菜单项不可点击跳转？」
有时你希望像「按分类选购」这样的标题仅作为下拉开关。若父项链接至空页面，顾客误点后会被带离当前浏览页面。
配置非跳转父项的操作十分简单：
- 在 内容 > 菜单 中，点击父项旁边的 编辑（或点击 添加菜单项）。
- 在 名称 字段输入标题。对于带有
#链接的顶级菜单项，请使用描述性标签（例如「按分类选购」），让顾客明确知晓内容。 - 如果你不希望标题链接至任何内容，请在父项的「搜索或粘贴链接」字段中输入
#。 - 点击 应用更改，然后点击 保存菜单。
大多数模版将下拉菜单标头实现为按钮而不是可点击的链接。使用 # 链接时，父项没有可加载的页面，因此点击它可以改为展开下拉列表。
若仍需保留该大分类的综合落地页，可在子菜单的最顶部加入名为「查看全部 [分类名]」的子链接。
请注意：当你删除下方嵌套有子项的菜单项时，嵌套的菜单项也会被同时删除。若需移除父项，请务必先将子项向左拖出至顶级层级。
图 1：概念示意图 — 将父项设置为井号 (#) 开关按钮与设置为直接页面链接的效果对比
Shopify 子菜单最多支持多少级层级？
管理丰富品类的商家经常会问：「Shopify 导航最多支持几级菜单？」
在 Shopify 原生菜单管理器中，顶级项目下方最多可包含两级嵌套下拉菜单。算上最上方的导航条，共支持三级结构：
- 第 1 级（顶级主分类）： 显示在页头横向导航栏上的主项目（例如「男士」）。
- 第 2 级（第一级子菜单）： 激活第 1 级时展开的下拉列表（例如「鞋履」）。
- 第 3 级（第二级子菜单 / 飞出菜单）： 从第 2 级衍生出的延伸分支（例如「运动鞋」）。
尽管管理后台支持三级嵌套，但前台能否正常呈现取决于你的模版。请确保更新你的模版，以便在在线商店中显示全部三个菜单级别。
展示位置也会产生影响：几乎所有模版都会在主菜单中将嵌套项显示为下拉菜单，但只有部分模版会在页脚或侧边栏等其他位置以同样方式显示。
如需验证模版兼容性，可在第 2 级下方嵌套一个第 3 级测试链接，保存后在电脑端和手机端预览。若第三级无法展开，可能是模版不支持该层级。
在体验设计上，建议尽量控制在两级以内。第三级悬浮飞出菜单更难操作，尤其是用鼠标时。若商品规模确实庞大，请阅读我们的 Shopify 多级菜单规划指南 以在深度与易用性间取得平衡。
子菜单在移动端的运行机制
手机没有鼠标，所以你的子菜单必须能通过点击来使用。
移动端抽屉菜单的交互体验
在手机屏幕上，横向导航会自动折叠到汉堡包图标（三条横线）内。点击图标即会拉出侧边抽屉：
- 带有子菜单的父项通常会附有展开标志，如加号（
+）或向下箭头。 - 点击父项后，通常会展开下级列表或打开独立的次级面板，具体表现取决于你的模版。
- 当父项使用
#链接时，大多数模版会展开列表，而不是加载页面。
由于各模版风格存在差异，Shopify 建议在移动设备上测试菜单，以确认下拉菜单按预期展开，并确保按钮便于拇指触控。
添加「查看全部」链接
在电脑端，顾客可以悬停预览子项，同时直接点击父项查看整个大系列。而在触控屏上，由于不存在悬停状态，一次触控只能触发一种动作：要么展开菜单，要么跳转网页。
Baymard Institute 的调研指出，在移动主导航中提供「查看全部」选项，是网站满足移动用户此项需求的低成本有效方式。
然而 Baymard 的评测数据显示，仅有 24% 的网站能妥善实现这一细节。
具体落地做法：
- 在每个父类别下，新增一个名为「查看全部 [分类名]」的子链接，指向主系列页面。
- 将该链接放置在嵌套列表的第 1 位。
- 精简子项数量，避免造成过长的垂直翻页。
了解更多抽屉设计细节，欢迎参考我们的 移动端抽屉菜单最佳实践指南。
子菜单不显示？排查与解决常见问题
如果保存后子菜单未能显示在前台，问题多半是由以下 4 种常见配置疏漏导致的：
| 故障现象 | 潜在诱因 | 解决对策 |
|---|---|---|
| 前台任何区域均不出现子菜单 | 模版页头板块关联了其他菜单列表 | 前往 在线商店 > 模版 > 自定义 > Header，核对所选菜单是否为你刚刚编辑的菜单。 |
| 子项横向平铺在主菜单栏而非下拉显示 | 保存时子项未向右缩进在父项下方 | 在 内容 > 菜单 中，按住手柄图标（⠿）将子项拖至父项下方并向右缩进后保存。 |
| 第三级飞出子菜单在交互时无法显示 | 模版版本较旧或不支持 3 级菜单 | 将模版更新至最新版本，并确认模版是否限制了嵌套展示位置。 |
| 下拉菜单闪退或完全无法点击展开 | 第三方应用脚本冲突或自定义 CSS 覆盖 | 复制一份未经修改的模版副本进行测试，或在浏览器控制台检查脚本报错。 |
模版调用了其他菜单
最常见的错误是修改了 Main menu，但当前模版页头却绑定了另一份菜单。请确保被选为顶部主菜单的菜单与你刚刚创建的菜单完全一致。多数模版可以在 Header 板块中更改默认菜单。前往 在线商店 > 模版 > 自定义 > Header，查看 菜单 设置，选择正确的列表并保存。
菜单项尚未缩进
若子项行与左侧对齐而非缩进，Shopify 会将其视为顶级项目。在 内容 > 菜单 中，将子项拖拽到父项下方并稍向右移，直至出现清晰的缩进状态，然后保存。
模版隐藏了第三级菜单
若第三级项目无法显现，可能是模版未编写多层飞出菜单的代码。请确保更新你的模版，以便在在线商店中显示全部三个菜单级别。同时需留意部分模版仅允许在主页头使用多级菜单。
自定义代码或应用产生冲突
若菜单出现异常抖动或遮挡，可能是 theme.liquid 中的自定义样式或插件覆盖了 z-index 层级。复制模版并在纯净副本中排查即可定位原因。
键盘与屏幕阅读器无障碍支持
良好的导航必须兼顾依赖键盘或辅助技术的用户群体。
W3C 无障碍倡议（WAI）准则强调，应通过视觉和标记明确标示带有子菜单的导航菜单项。下箭头图标能直观提示展开内容，而合规的 ARIA 属性则能向屏幕阅读器通报状态。
此外，W3C 标准明确规定，使用 Tab 键在菜单中导航时不应自动打开子菜单。原因在于：否则键盘用户必须逐个经过子菜单的所有项目，才能到达下一个顶级项目。
查阅我们的 无障碍导航菜单指南 了解完整的代码规范。
图 2：概念示意图 — 在模版页头设置中核对绑定菜单并检查子项目的缩进层级状态
权衡考量：何时不应再增加子菜单
子菜单有助于理顺分类，但盲目叠加层级并非良策。每增加一级都会给顾客带来额外的浏览阻力。
当下拉菜单过长时，可用性会急剧恶化。尼尔森诺曼集团（NN/g）的研究明确指出：「需要滚动的过长下拉菜单会让用户无法一目了然地看清所有选项。」当顾客不得不滚动下拉列表时，底部的选项极易被彻底忽略。
在决定继续新建子菜单前，不妨考虑以下优化路径：
- 合并小型系列： 针对仅有两三件商品的零散分类，将其合并为体量更充实的大系列。
- 优化分类命名： 清晰贴切的大分类标签能让顾客快速定位，免去深入次级菜单翻找的麻烦。
- 利用产品系列过滤器： 引导顾客在系列落地页上按尺寸、颜色或价格进行多面筛选，无需将每种变体都写进菜单。
- 升级为多列超级菜单： 当商品品类极其丰富时，多列超级菜单能将链接划分为清晰的栏目与标题，让顾客无需滚动即可通览全貌。这通常需要模版内置支持或借助菜单应用。
深入了解原生架构的边界，请查阅我们的 Shopify 模版菜单限制分析。
Navi+ 的适用场景
Shopify 原生菜单能够很好地应对简单的单列下拉需求。但伴随店铺商品规模扩大，单列列表的局限性逐渐显现。较长的单列列表可能难以浏览，而模版默认的移动端菜单也可能比你的商品目录所需的更简单。
当店铺发展超出原生菜单的能力边界时，Navi+ 提供了实用的扩展方案：
- 电脑端超级菜单 (Desktop Mega Menus)： 构建包含产品、系列、图片、图标及灵活布局的超级菜单。用灵活的布局组织子分类，让顾客无需滚动就能浏览各个选项。
- 移动端菜单 (Mobile Menus)： 创建移动端菜单、抽屉菜单和汉堡包菜单，让顾客在手机上更方便地浏览店铺。
Navi+ 菜单在 Navi+ 应用内通过拖拽编辑创建，无需编写代码。它们与 Shopify 后台中的菜单相互独立，后者不会被自动替换。
如果你的子菜单已经发展成过长的列表，或者你希望在电脑端加入图片与多列排版并在移动端获得更清爽的抽屉菜单，可以尝试配合模版使用 Navi+ Tab Bar & Mega Menu，同时你的 Shopify 菜单保持原样。
子菜单发布前核对清单
在向顾客开放新菜单前，请逐一核对以下 8 项关键要素：
- 核实页头菜单关联： 在 在线商店 > 模版 > 自定义 > Header 中确认激活的菜单与在「内容 > 菜单」中修改的列表一致。
- 确认子项正确缩进： 确保每个子项目在对应父项下方清晰缩进排列。
- 设置清晰的非跳转标题： 若父项链接为
#，确保标签明确易懂（如「按分类选购」）。 - 提供「查看全部」链接： 在每个嵌套组的顶部为移动端用户添加直达综合页面的链接。
- 真实手机设备测试： 确认子菜单能够展开，并且链接在真实手机上方便点击。
- 顶级导航不超过 7 项： 保持横向主导航栏精炼，避免过度拥挤。
- 显式的子菜单视觉标识： 确保带有下级菜单的父项具有清晰的下箭头或展开指示。
- 成功保存菜单更新： 点击 保存菜单，确保所有结构调整均已正式生效。
常见问题解答 (FAQ)
如何在 Shopify 导航菜单中添加子菜单？
前往 Shopify 后台的 内容 > 菜单，打开主菜单，点击 添加菜单项 创建子项链接，使用手柄图标（⠿）将其拖拽至父项下方并稍向右移完成嵌套，最后点击 保存菜单。
Shopify 菜单最多支持几级层级？
顶级项目下方最多支持两级嵌套下拉菜单，共计支持三级菜单层级。同时需要你的模版完成更新以支持在商城前台显示全部三级内容。
如何让父级菜单项变成不可点击的纯文字？
在父级项目的「搜索或粘贴链接」栏中填入 #，并赋予如「按分类选购」等描述性标签。大多数模版会将其识别为展开开关而非网页跳转链接。
为什么我设置的子菜单在店铺中没有显示？
最常见的原因是模版的 Header 板块调用了其他菜单，而非刚刚修改的那一份。此外，如果子项未彻底拖动缩进，或模版本身不支持多级展示，也会导致子菜单无法显现。
子菜单在手机移动端上可以正常工作吗？
可以。在手机上，大多数模版会把菜单收在汉堡包图标后面，并在其中展开子项。建议在真实手机上进行测试，并在各分类顶部保留「查看全部」链接以便快速浏览全品类。
参考来源
- Shopify Help Center: Drop-down menus — 关于设置下拉菜单及移动端测试的官方指导。
- Shopify Help Center: Editing menus — 拖拽手柄、未保存更改上限及删除父项规则的官方规范。
- Shopify Partners Blog: Building Nested Navigations with Shopify Link List — 关于运用链接列表及嵌套导航组织商品目录的概述。
- Shopify Community: Nesting menu not showing — 针对模版页头菜单配置不一致的社区排错解决方案。
- W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — 飞出菜单视觉指示及 Tab 键导航无障碍规范。
- Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — 指出仅 24% 的网站在移动端妥善提供了「查看全部」选项的研究数据。
- Nielsen Norman Group: Dropdowns: Design Guidelines — 关于过长且需滚动的下拉菜单所产生可用性问题的调研。
- Shopify App Store: Navi+ Tab Bar & Mega Menu — 超级菜单与移动端菜单的应用商店页面。
- YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — 演示下拉菜单创建流程的官方教学视频。
- YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — 关于重构菜单结构与视觉层级的官方教学视频。
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。