如何在 Shopify 菜单应用中创建桌面端导航菜单（分步指南）

在菜单应用中构建的桌面端导航菜单，其最终效果取决于前期的结构规划。在草稿上梳理清晰的三级树状结构、用多列布局替代冗长列表、审慎决定悬停或点击交互，并将菜单精准发布在页头正下方，能让顾客在浏览商品目录时倍感流畅。

对于正在扩展商品阵容的商家而言，层次分明的水平菜单提供了不可或缺的视觉引导。顾客不应费力去猜测商品分布，也不该在杂乱的单列列表中迷失。通过在页头下方展现舒展的分类网格，顾客在桌面端就能直观地访问你的各个系列。

快速解答：如何在 Shopify 菜单应用中创建桌面端导航菜单

要在 Shopify 菜单应用中创建桌面端导航菜单，请先规划最多包含三级的菜单树，在主题中启用应用嵌入，构建 1 级项目与下拉列，根据需要选择悬停或点击展开，然后将其发布在页头下方或直接替换主题菜单，最后测试各个屏幕分辨率下的展示效果。

1. 规划菜单树：在打开应用前，先在纸上画出最多三层的导航结构。
2. 启用应用嵌入：在 Shopify 主题编辑器中打开 Store Connector 嵌入开关。
3. 添加 1 级项目：创建 Desktop Mega Menu 并设置顶部主要的水平链接。
4. 构建下拉列：开启多列模式并平衡各列在网格系统中的宽度比例。
5. 在页头下方发布并测试：选择 Insert After 或 Replace 并验证桌面端外观。

下文将以 Navi+ 为例详细演示每个配置环节，并列出实施过程中常见的问题及排查方案。

菜单应用为 Shopify 桌面菜单带来的扩展价值

Shopify 提供了可靠的基础导航架构，但实际呈现的视觉形式高度受制于所使用的主题。根据 Shopify 帮助中心 的说明，一个顶级菜单项下最多允许嵌套两级下拉菜单。Shopify 同时指出，主菜单与下拉菜单在店铺中的展示位置完全取决于主题模板的设计。

部分现代 Shopify 主题自带基础的超级菜单选项。如果你的主题原生功能已经能够满足当前的排版需求，直接采用原生设置通常是最精简的选择。下方的演示视频展示了纯主题方式的配置流程：

If your theme already has a mega menu, this walkthrough shows the theme-only route.

然而，当店铺的商品和类目不断扩充时，主题自带的菜单往往显得局促。专业的菜单应用能够提供多项极具实用价值的进阶功能：

• 基于灵活的 12 列网格系统自定义分配各列宽度。
• 在下拉面板中直接置入精美的精选系列推广图块。
• 自主选择由鼠标悬停还是手动点击来触发菜单展开。
• 拥有精细的挂载点控制，可将导航条自由部署于页头上方、内部或下方。

尼尔森诺曼集团（NN/g） 的用户体验研究表明，二维超级菜单结构能让访客对所有选项一目了然，无需在多层级级联列表中费力记忆各个入口。要了解原生主题功能的局限所在，请参阅我们关于 Shopify 原生主题菜单限制 的深度解析。

先规划菜单树：1 级项目、列与链接

在开始设置应用前，先在纸上或表格软件中梳理好导航层级。一个清晰的桌面超级菜单遵循规范的三级树状结构：

• 1 级（顶部导航条）：横向陈列在页头上的主分类。建议控制在五到七个项目之间，确保在主流笔记本屏幕上不会被挤成两行。
• 2 级（列标题）：展开面板中各列的分类大标题。建议按照消费者的选购习惯进行分组：商品种类、目标客群或使用场合。
• 3 级（具体链接）：各列标题下方的具体系列、单品或页面链接。

在梳理这些层级时，务必保持克制与精简。尼尔森诺曼集团 的研究强调，导航菜单的精简标准应当比常规页面更为严苛。每一个多余的链接都会增加视觉噪音并拖慢用户的浏览速度。保持列标题简短，并且仅在图像代表真实选购入口时（例如特色系列图块）才使用视觉元素。

以下是一个架构合理的标准三级菜单示例：

女士系列 (1 级)
├── 服装 (2 级 列 - 宽度: 3/12)
│   ├── 连衣裙 & 连体裤 (3 级 链接)
│   └── 上衣 & T 恤 (3 级 链接)
├── 鞋履 (2 级 列 - 宽度: 3/12)
│   ├── 靴子 & 高跟鞋 (3 级 链接)
│   └── 休闲运动鞋 (3 级 链接)
├── 配饰 (2 级 列 - 宽度: 3/12)
│   ├── 手提包 (3 级 链接)
│   └── 时尚首饰 (3 级 链接)
└── 特色推荐 (2 级 列 - 宽度: 3/12)
    └── [新季精选系列图块] (3 级)

男士系列 (1 级)
├── 服饰专区 (2 级 列 - 宽度: 4/12)
│   ├── 衬衫 & POLO (3 级 链接)
│   └── 长裤 & 休闲裤 (3 级 链接)
└── 男鞋精选 (2 级 列 - 宽度: 4/12)
    └── 休闲皮鞋 (3 级 链接)

箱包配饰 (1 级)
├── 钱包 & 卡包 (2 级 列 - 宽度: 6/12)
└── 皮带 & 围巾 (2 级 列 - 宽度: 6/12)

特惠清仓 (1 级 - 直接链接)

若想探索更多布局模式，请参阅我们的指南：超级菜单布局与分组最佳实践。

步骤 1：安装 Navi+ 并启用应用嵌入

在 Shopify App Store 中搜索并安装 Navi+。

Navi+ 通过主题的应用嵌入（App embeds）加载，因此在你创建的菜单正式在前台生效前，必须在主题中开启对应的应用嵌入。

1. 在 Shopify 后台中，前往 在线商店 > 主题。
2. 如果你的店铺正在产生销售，请点击活跃主题旁的三个点并选择 复制。在副本主题上构建、调整与测试菜单，能完全避免对正常进店顾客造成干扰。
3. 在副本主题上点击 自定义，进入主题可视化编辑器。
4. 按照 Shopify 帮助中心关于主题应用扩展的说明，点击左侧工具栏的 应用嵌入 图标。
5. 在列表中找到 Store Connector，将开关切换至 开启 状态。
6. 点击右上角的 保存。

需要注意的是，应用嵌入是与具体主题绑定的。如果在未来更换了新主题或升级了主题版本，必须重新在新主题编辑器中开启 Store Connector 嵌入。

步骤 2：创建 Desktop Mega Menu 并添加 1 级项目

应用嵌入开启后，在 Shopify 后台中打开 Navi+ 的控制面板。

1. 新建菜单并选择 Desktop Mega Menu 作为菜单类型。你可以从预设模板开始，也可以从空白画布着手。
2. 如果选择从模板开始，请删掉与你的规划不相符的示例项目。
3. 按照纸面上的设计，逐一添加各个 1 级顶级菜单项。
4. 通过上下左右拖放条目，快速调整排列次序与父子层级。上下拖动可调整展示顺序，左右拖动则可将子项嵌套至父级项目下。
5. 为每一个 1 级项目指定有效的跳转链接。即便该项目是用来展开多列面板的，也建议关联到一个总分类页面，方便习惯直接点击主标题的顾客顺利访问。

Step 3: Build dropdown columns, links, and images

接下来，将单调狭长的链接列表重构成条理清晰、易于扫视的多列面板。

图1：概念示意图（Concept illustration）— Step 3: Build dropdown columns, links, and images {#step-3-build-dropdown-columns-links-and-images}

1. 选中需要配置超级菜单的 1 级项目，开启 Is Multi-Column menu item 设置。该选项会将其直接子项（2 级）识别为多列的列标题。
2. 在每个列标题下方，继续添加 3 级的具体目标链接。
3. 利用应用内置的 12 列网格系统分配列宽。对于四列布局，可依次设为 3/12、3/12、3/12 和 3/12；若是两列布局，则各设为 6/12。
4. 如果某个下拉菜单包含的链接较少，可调整布局设置中的多列子菜单宽度限制，避免容器被无意义的留白撑得过宽。对于只有三四个链接的小类，单列常规下拉菜单往往比宽大的超级面板更加简洁。
5. 在最右侧列中加入一张能够点击的精选系列图块，提升视觉质感。请确保该图片直接链接到对应系列，使其成为实实在在的导购入口而非多余的装饰。规整的二维布局有助于清晰指引顾客的选购流程。

步骤 4：选择悬停或点击触发方式并调整菜单样式

接下来决定下拉面板的触发方式，并调整导航条视觉以契合店铺品牌调性。

关于桌面端下拉菜单究竟该通过鼠标悬停还是点击展开，商家常常各执一词。行业研究总结了清晰的利弊权衡：

在 Navi+ 中，切换交互模式仅需轻轻拨动一个开关。在布局设置中，通过 Show submenu on hover 即可确定偏好：开启该选项为悬停展开，关闭后则必须点击该项才能展开面板。

确定触发方式后，进一步微调视觉外观：

• 选择与店铺页头完全融合的背景底色与文字颜色。
• 配置柔和的悬停色彩变化或下划线提示，在用户浏览时给予明确的视觉反馈。
• 调整字体大小与水平间距，使导航条与品牌 Logo 及页头功能图标自然呼应。

Step 5: Publish under the header and test every screen width

制作并美化完成的菜单，只有在应用内确认发布后才会真正呈现在店铺前台。

图2：概念示意图（Concept illustration）— Step 5: Publish under the header and test every screen width {#step-5-publish-under-the-header-and-test-every-screen-width}

在 Navi+ 编辑器中点击 Publish to website 按钮，并打开 Insert/Replace 设置开关。

为了保证这些布局规则仅作用于桌面端屏幕，请在选择器后方附加 (D) 后缀，例如写作 header(D)。

在默认配置下，任何宽度低于 768px 的屏幕都会自动切换至移动端展现形式。

请在多种视口下实测显示效果：超宽带屏显示器、常规笔记本电脑以及横屏平板。重点观察菜单栏是否会突兀地折成两行，以及展开的面板是否居中对称。

1. 切换至键盘操作，轻按 Tab 键依次在各个项目与下拉链接间切换。
2. 确认每个父级项目和下拉链接在获焦时都能显现醒目的焦点轮廓。
3. 在展开面板的状态下按下 Escape 键，确认面板能顺利关闭并将焦点退回父级按钮，符合 W3C WAI-ARIA 规范。

针对特定模板的配置方法，请阅读关于 为 Dawn 主题添加超级菜单 的实操讲解，并浏览 常用 Shopify 主题上的 Navi+ 菜单案例。完整的图文配置步骤，请参阅官方的 附带截图的发布指南。

若你希望在手机端保持一致的导航体验，同一套菜单结构亦可通过下文提到的 Smart responsive 功能无缝映射至移动端。

常见问题：菜单未显示、被页头遮挡、换行变成两行

在安装并发布第三方桌面菜单时，有时会遇到意料之外的显示异常。你可以对照此排查表格快速定位解决：

若遇到特殊疑难情况或想了解更高级的设置，请访问 Desktop Mega Menu 常见问题解答。

权衡分析：何时简易下拉菜单优于超级菜单

多列超级菜单是非常出色的展示工具，但它未必适合每一个 Shopify 店铺。在决定搭建复杂布局之前，请客观权衡以下现实因素：

• 小品类目录：如果你的店铺仅经营少量单品，或全店只围绕两三个主推系列展开，Shopify 原生菜单或常规的单列下拉菜单更为轻盈高效。Shopify 原生导航支持两层下拉嵌套，应对轻体量库存绰绰有余。
• 维护成本：超级菜单需要持续投入精力维护。随着商品迭代、季节促销下架和库存调整，每一列文字、链接及推广图片都需要人工核对更新。盲目堆砌条目只会让面板显得拥挤不堪，反而增加顾客的选择阻力。
• 交互体验门槛：基于悬停的超级菜单若缺乏恰当的延迟缓冲，或遇到带触控功能的笔记本时，容易产生误触或菜单闪退等问题。
• 主题依赖风险：安装第三方导航应用会引入应用嵌入层，今后每次切换或升级店铺主题时，都必须多一道检查嵌入状态的流程。

只有当店铺类目纵深较大、确实需要按列分门别类，或是希望在主导航中凸显视觉推广位时，投入精力打造桌面超级菜单才是物有所值的。若想评估哪种结构最适合你的店铺规模，请阅读我们的深度建议：如何为你的店铺选择合适的菜单类型。

Navi+ 的价值与定位

Navi+ Tab Bar & Mega Menu 旨在弥合固定模板的局限与高昂定制开发成本之间的落差。

针对桌面端展示，Navi+ 提供了以结构化三级导航树为核心的专用 Desktop Mega Menu 构建器。商家可以在灵活网格上自由定制列宽、通过一个设置随心切换悬停或点击模式，并利用 Insert After 或 Replace 配合桌面专用选择器精准放置导航栏。

为了让栏目在较小的笔记本屏幕上保持整洁，Navi+ 提供断点设置和溢出箭头按钮，把放不下的一级项目收进箭头后面而不是换行。此外，Smart responsive 会把桌面端层级结构的实时引用嵌入移动端侧滑抽屉，因此你无需再搭建第二棵菜单树。

如果你想在自己的店铺中亲身体验，Navi+ Tab Bar & Mega Menu 能让你轻松搭建文中所述的 Desktop Mega Menu，在副本主题上从容验证，并能随时无痕关闭。

发布前的执行清单

在将全新的桌面导航菜单正式推送给进店顾客前，请逐一核对以下步骤：

• 菜单树规划完毕：在纸上梳理好了最多三层的导航层级（顶部主栏、列、具体链接）。
• 应用嵌入已开启：在“主题编辑器 > 应用嵌入”中开启并保存了 Store Connector。
• 1 级项目数量适中：顶部主分类在普通笔记本视口下能够舒适地维持单行排列。
• 各列结构与宽度合理：2 级项目作为列标题使用，并在网格中分配了匀称的宽度比例。
• 视觉图块甄选妥当：图片卡片均对应实际的系列入口，不存在无意义的装饰留白。
• 触发模式确认无误：根据目标受众有意识地选定了带延迟的悬停展开或确定性点击展开。
• 发布选择器核实准确：Insert After 或 Replace 配置了正确的目标选择器，并带上了桌面专属的 (D) 后缀。
• 多设备宽度实测完毕：在带鱼屏、普通笔记本以及平板电脑上均检验了显示效果。
• 键盘操作符合规范：按 Tab 键能顺畅选定各级项目，展开状态下按 Escape 能收起面板并让焦点退回父级按钮（符合 W3C 标准）。
• 所有链接点击测试：逐一测试了菜单中所有链接，确保均能正确进入对应的有效页面与系列。

如果你想在自己的店铺中亲身体验，Navi+ Tab Bar & Mega Menu 能让你轻松搭建文中所述的 Desktop Mega Menu，在副本主题上从容验证，并能随时无痕关闭。

FAQ

桌面端菜单最多支持多少层级？

Shopify 原生下拉菜单在一个顶级菜单项下最多允许嵌套两层。Navi+ 的 Desktop Mega Menu 导航树则采用清晰的三层架构：顶部横栏、各列标题以及末级链接。

超级菜单应该通过悬停还是点击展开？

两种方式在合理调优后都非常实用：悬停需要适度的延迟（Baymard 建议 300–500 ms）以防闪退，而点击则是更稳妥且符合无障碍规范的选择。在 Navi+ 中，你可以通过“Show submenu on hover”随心切换。

菜单会出现在页头的哪个位置？

使用 Insert After 模式并将选择器设为 header 时，菜单会紧贴在页头正下方。使用 Replace 模式时，主题原生菜单会被隐藏，Navi+ 会直接取代其位置。

为什么安装应用后菜单没有显示出来？

最常见的原因是应用嵌入未开启或菜单尚未点击发布。请检查主题编辑器中的 Store Connector 是否启用，核对选择器是否正确，若被固定页头覆盖则适当调高 z-index。

为什么桌面端菜单在平板或小笔记本上会变成手机版？

默认情况下，视口宽度小于 768px 的屏幕会自动转入移动端模式。你可以在布局设置中调低该断点阈值，并打开溢出箭头来保持桌面横向排列。

相同的菜单能直接显示在手机端吗？

可以。通过 Smart responsive 功能，系统会将桌面端菜单结构无缝投影到移动端的 Slide menu 抽屉中，无需从头重新搭建第二套菜单树。

Sources

• Shopify Help Center: Drop-down menus
• Shopify Help Center: App embeds in themes
• Nielsen Norman Group: Mega Menus Work Well
• Nielsen Norman Group: Mega Menus Gone Wrong
• Baymard Institute: Dropdown Menu Flickering Issue
• Smashing Magazine: Frustrating Design Patterns: Mega-Dropdown Hover Menus
• Shopify Dawn Theme PR #1316
• W3C WAI-ARIA APG: Disclosure Navigation Example
• Navi+ Help: Publishing on Shopify
• Navi+ Help: Desktop Mega Menu FAQ
• Navi+ Help: How to Use Desktop Mega Menu
• Navi+ Help: Setting Layout