在Shopify中创建与移动端菜单结构相同的桌面超级菜单（统一结构，两种布局）

您可能花费了大量时间在Shopify后台梳理商品系列并建立多级链接。在宽屏电脑显示器上，您的分类能够井然有序地展开为大气宽敞的超级菜单。但在拿起智能手机打开侧边抽屉菜单时，导航体验却常常让人感觉脱节或内容缺失。

许多商家误以为，想要在电脑端呈现多列面板、在手机端保持清爽抽屉，就必须分别制作并维护两个独立的菜单。然而在实际操作中，您根本不需要两套不同的数据结构。您可以将单一的分类层级作为「唯一的真实数据源」，让各个终端设备以其专属的最优布局来进行展现。

快速解答：一个菜单能否同时驱动桌面端与移动端？

可以。在Dawn主题中，标头的主菜单同时向桌面菜单和移动抽屉提供数据，因此数据结构本就是共享的。两者的区别仅在于排版布局：电脑端展示多列内容，手机端则逐层深入展开。建议选择能够保持单一数据源的实现方式。

• 方法一（原生主题免代码设置）： 在Shopify后台保持单个菜单树，将标头桌面菜单类型切换为超级菜单，由主题自动完成移动抽屉的布局适配。
• 方法二（后台创建独立双菜单）： 在后台新建专属的移动端linklist，并将抽屉模板代码指向该菜单，但需要承担双倍的日常维护工作。
• 方法三（定制修改抽屉模板代码）： 调整抽屉的Liquid模板代码，使嵌套的子分类在打开抽屉时直接全部展开，无需多次点击滑屏。

Shopify主题如何在桌面端与移动端复用同一个菜单

在Shopify的底层架构中，导航数据与界面展现层是完全解耦的。当您在内容 > 菜单中创建菜单时，Shopify会将其存储为一个linklist对象。根据Shopify官方开发者文档，”链接最多支持三层嵌套”：即一个顶级项目加上下方挂载的两级子链接。如需系统规划分类架构，请参阅我们的Shopify menu guide。

由于linklist只是纯粹的结构化数据，当前激活的主题拥有完全的呈现决定权(Shopify Dev Docs)。在Dawn主题的sections/header.liquid中，menu_type_desktop配置项允许商家在普通下拉、超级菜单或桌面抽屉之间自由切换(GitHub Shopify Dawn)。

无论您为桌面端选择了何种样式，Dawn的移动端抽屉调用的都是同一个linklist。在snippets/header-drawer.liquid中，模板通过for link in section.settings.menu.links循环遍历标头菜单，并通过for grandchildlink in childlink.links向下读取至第三级的孙链接(GitHub Shopify Dawn)。Liquid还通过链接对象的levels属性自动识别其下方所包含的嵌套层级深度(Shopify Liquid API)。

这表明底层的数据架构本就完全互通。您所维护的始终是One menu tree，区别仅在于不同屏幕上的呈现形态。

为什么两种布局在实际使用中依然感觉不同

尽管读取的是同一份数据，电脑端与手机端的交互感受却大相径庭，这根源于鼠标悬停与触控屏幕之间截然不同的交互模型。

图1：概念示意图（Concept illustration）— 为什么两种布局在实际使用中依然感觉不同

在桌面电脑上，将光标悬停在主分类上会立即触发宽大的Hover panel。顾客无需跳转页面，即可同时扫视分布在多个列中的子分类与商品链接。

在移动设备上，狭窄的屏幕无法并排容纳多列。主题只能采用带层级深入（drill-down）机制的侧滑抽屉。顾客若要进入深层子分类，必须点击父分类行，等待屏幕横向滑动，然后再次点击。这种必须经过Two taps的操作流程，也是Shopify社区中部分Dawn用户提出过的抱怨(Shopify Community)。如需深入理解抽屉交互逻辑，可参考我们的mobile drawer menu architecture分析。

触控屏幕还会带来一系列特有的人机工效难题：

• Parent link not clickable： 在许多移动端抽屉中，点击父分类文字行只会触发下级面板的滑动展开，导致用户根本无法直接进入该父分类的集合页面。
• 触控误触率高： 尼尔森诺曼集团（NN/g）的可用性研究明确指出，”超级菜单中过于密集的微小选项在触控屏幕上极易造成点选失误”(NN/g)。
• 移动端独立设计： 正因如此，像Meteor这样的菜单应用会主动拆分桌面与移动模板(Helium Meteor Docs)，而Clean Canvas团队也在Symmetry主题指南中建议为移动端配置带有直接产品链接的单层菜单(Clean Canvas)。

方法一：保留单个Shopify菜单并将桌面样式切换为超级菜单

最优雅且无需编写代码的方法是直接利用主题内置的原生超级菜单引擎。该方案能让后台保持单一菜单树的整洁，同时由主题负责响应式呈现。

具体操作仅需四步：

1. 在后台建立三级分类架构： 进入内容 > 菜单，在主菜单中按照「一级大类 ＞ 二级分组标题 ＞ 三级终端链接」建立层级。
2. 将菜单分配给标头区域： 依次点击在线商店 > 模版 > 自定义 > Header，确保在Menu设置项中选中了该菜单。
3. 将桌面菜单类型切换为超级菜单： 在标头设置中，将Menu type从下拉菜单改为Mega menu(GitHub Shopify Dawn)。有关Dawn主题的详细配置，请查阅我们的add a mega menu to Dawn指南。
4. 验证移动抽屉显示效果： 将编辑器预览切换至Mobile视图并打开抽屉，确认系统已自动读取并呈现完全相同的分类结构(GitHub Shopify Dawn)。

如果您使用的是第三方商业主题，该设置的名称可能略有不同；请查阅对应的主题开发文档(Shopify Dev Docs)。

方法二：在Shopify后台使用两个独立的菜单

如果您的桌面端菜单包含了大量促销图片和次要链接，容易让手机屏幕变得杂乱无章，您可以选择在Shopify后台创建两个互不干扰的菜单。

您可以在内容 > 菜单中保留电脑端主菜单，并新建一个名为「Mobile Menu」的精简版菜单。由于大多数原生主题只提供一个菜单选择器，开发者通常需要修改snippets/header-drawer.liquid文件，使抽屉代码直接读取移动端菜单句柄，而非读取section.settings.menu(Shopify Community)。请查阅主题文档，确认它是否提供单独的抽屉菜单设置；如果有，就无需改代码。

这种方法虽然赋予了移动端完全独立的定制自由，却带来了繁重的后期维护负担：

• 每次店铺推出新系列或开展节庆促销时，您都必须在两个菜单中重复录入相同的内容。
• 随着时间推移，两个菜单可能出现偏差，导致移动端用户缺少电脑端上有的链接。想要“把桌面菜单复制到移动端”的商家，正是希望避免这种情况(Shopify Community)。

只有在移动端确实需要截然不同的导航路径时，才建议采用方法二。

方法三：修改抽屉代码以直接展开嵌套层级

许多商家都希望移动抽屉能够一次性平铺展开所有子分类，避免让顾客在多个滑动面板之间反复摸索(Shopify Community)。

Dawn的抽屉模板底层实际上已经处理了子链接和孙链接的循环逻辑(GitHub Shopify Dawn)。通过修改Liquid模板与CSS样式，开发者可以解除隐藏面板的限制，让各级子分类默认以类似展开式手风琴的列表形态直接呈现。

在动手实施前，请务必注意以下技术风险：

• 主题版本差异显著： 论坛中2022年前后分享的代码片段是针对旧版Dawn编写的。随着主题迭代，CSS类名和DOM结构早已发生改变。
• 务必先备份复制主题： 在编辑任何Liquid代码前，一定要在后台生成模版副本。绝不能直接在正式运行的店铺模版上调试未经验证的代码。
• 纵向滚动距离过长： 如果桌面菜单包含大量链接，移动端抽屉一旦全部展开，列表会变得很长，需要滚动很久。

桌面超级菜单中有哪些元素可以直接继承到移动端

将桌面超级菜单转移到智能手机屏幕上时，版面元素必须经过针对性的调整。尼尔森诺曼集团建议将导航选项合理划分为逻辑相关的分组(NN/g)。如需探索科学的排版规范，请阅读我们的mega menu layout and grouping best practices。

图2：概念示意图（Concept illustration）— 桌面超级菜单中有哪些元素可以直接继承到移动端

在正式发布前使用真机进行实地测试

电脑端浏览器的开发者工具模拟器无法真正还原手指的物理触达范围与真实的屏幕触控精度。在正式向公众发布前，请务必在真实手机硬件上执行以下测试：

1. 在真实的iOS和Android手机上测试： 在不同屏幕尺寸的机型上打开预览链接，分别测试横屏与竖屏模式。
2. 逐级点击所有分类链接： 亲手点击一级大类、二级子项和末级链接，验证跳转目标集合页面是否准确无误。
3. 检查父级项目的点击反馈： 确认点击父分类时是正确打开集合页面，还是顺畅展开下级菜单，杜绝无效点击。
4. 测量触控热区尺寸： 确认每个按钮和文字链接的间距充足，达到WCAG 2.2要求的24x24像素基本规范(W3C WCAG 2.2)。
5. 测试抽屉的滚动流畅度： 从菜单顶部一路滑至最下方的个人账户和货币切换栏，确保内容不会在视口底部被截断。
6. 始终在复制主题中测试： 在未发布的草稿主题中完成全部验收后再行上线。

常见问题排查与修复方案

在打通桌面端与移动端导航的过程中，商家常常会遇到以下四个典型问题：

移动端菜单需要点击两次才能打开子分类

• 产生原因： 逐层深入的抽屉机制要求用户先点击分类展开二级面板，再次点击才打开目标(Shopify Community)。
• 修复方案： 调整抽屉模板使其就地展开子项（方法三），或采用跳过多列中间过渡层的排版，让顾客一触即达。

深层分类项目无法显示

• 产生原因： Shopify原生菜单最多只支持三层深度(Shopify Dev Docs)。Dawn的模板代码不会读取超过第三级的孙链接(GitHub Shopify Dawn)。
• 修复方案： 扁平化重构您的商品类目，将所有核心页面全部收纳在三层架构内。

父级分类链接无法点击跳转

• 产生原因： 在移动触控环境下，点击父项目的一整行往往被系统专门用来控制二级菜单的展开或收起。
• 修复方案： 在子菜单的最顶端增设一个「查看全部 [分类名称]」的独立直达链接。

移动端显示的内容与电脑端不一致

• 产生原因： 店铺可能启用了方法二，在snippets/header-drawer.liquid中被硬编码指向了另一个独立菜单(Shopify Community)。
• 修复方案： 检查标头设置及抽屉代码，排查当前正在调用的菜单句柄。

权衡考量：何时不适合采用完全统一的结构

全端共用一套导航结构固然能大幅减少运营工作量，但各种实施方案都有其各自的局限性：

何时应该主动分离桌面端与移动端菜单

尽管保持统一的数据源是行业首选，但在某些特殊的业务场景下，适度拆分手机端菜单是更为明智的决策：

• 拥有海量SKU的大型商城： 拥有大量商品、分支类目众多的店铺，如果将全部体系强行搬到手机抽屉中，会导致顾客信息过载。此时，打造一个带有直达产品入口的轻量化单层移动菜单会带来更好的触控体验(Clean Canvas)。
• 突显移动端专属快捷通道： 手机购物者可能会从快速找到「订单查询」、「门店导航」等高频工具链接。
• 保障搜索引擎抓取（SEO）： 若在移动端菜单中精简隐藏了部分类目，请确保所有商品集合仍能通过分类页聚合链接、面包屑导航以及XML网站地图被网络爬虫抓取。建议参考我们的keep your menu crawlable指南。

Navi+如何发挥作用

如果您目前使用的主题不具备高级超级菜单功能，或者您希望避免直接修改Liquid代码的风险，Navi+提供了一种在不同设备间共享导航的结构化方式。

根据Navi+文档，桌面菜单与移动菜单是这样配合的：

• Desktop Mega Menu： 在电脑宽屏上，Navi+ Desktop Mega Menu展示带有图片和横幅的多列面板。该模块不会在手机上显示，因为多列排版在狭窄屏幕上并无空间展开(Navi+ Docs)。
• 嵌入到Mobile Menu： 商家无需从头手动重建分类，Navi+ Mobile Menu允许通过放置在抽屉第1层的专用嵌入项目（embed item），直接引用现有的桌面超级菜单(Navi+ Docs)。
• 自动转为单列纵向排版： 嵌入后，原有的Columns become one column整齐垂直堆叠(Navi+ Docs)。中间的列层级被自动省略，顾客只需单次点击即可触达商品页面，告别繁琐的两次点击。
• 灵活的元素显隐控制： 开启Exclude when embedded设置后，专为电脑端设计的大型海报会自动在手机抽屉中隐藏(Navi+ Docs)。
• 在一处编辑： 抽屉会复用超级菜单的各个项目，您只需在Desktop Mega Menu中修改一次（Edit once），抽屉中的嵌入副本就会随之更新。如需停用某个超级菜单，仅需先将Mobile Menu中的对应嵌入项移除即可(Navi+ Docs)。
• 完备的三级深度支持： Navi+ Mobile Menu原生支持大类、子类及内部链接三级结构，与Shopify官方标准深度完全契合(Navi+ Docs)。

设置流程仅需简单三步：

1. 在Navi+后台打开Desktop Mega Menu，复制对应的嵌入项目（embed item）。
2. 打开Mobile Menu，将该嵌入项粘贴至抽屉的第1层级中。
3. 检查各促销图块，为仅适合桌面大屏幕的素材勾选Exclude when embedded。

如需查看图文教程，请参阅关于reuse a Desktop Mega Menu on phones以及如何借助Exclude when embedded管理可见性的官方文档。

如果您已经在用Navi+制作Desktop Mega Menu，可以试着把它的嵌入项目复制到Mobile Menu中，并在手机上预览；如果效果不理想，删除这个嵌入项目即可，其他内容都不会改变。

行动检查清单

请依照以下实操清单打通您的桌面超级菜单与移动端导航：

• 确定单一菜单结构： 在内容 > 菜单中梳理分类，确保整体层级严格控制在Shopify的三级限制之内。
• 确定实施路径： 在主题原生配置（方法一）、后台双菜单（方法二）或抽屉代码调整（方法三）中作出选择。
• 创建主题备份副本： 在改动任何Liquid模板或添加样式前，务必先复制模版留作备用。
• 手机端收拢为单列展示： 确保电脑端的多列布局在手机上能顺畅转为可滚动的清晰单列清单。
• 剔除桌面专属重型素材： 屏蔽移动抽屉中尺寸过大的促销横幅或纯装饰性图片。
• 验证父级链接可达性： 确认点击父分类行能正常跳转对应集合，或包含醒目的「查看全部」直达链接。
• 使用真机全面验收： 在真实智能手机上亲手检测触控响应、滚动平滑度及不低于24x24像素的触控热区。

常见问题解答（FAQ）

我可以让桌面端和移动端使用同一个菜单吗？

可以。在Dawn等主流主题中，移动端抽屉默认正是通过标头绑定的同一个菜单生成的。这意味着您只需维护一份数据，主题便会自动按不同设备应用对应版式。

Shopify菜单最多可以有几层？

Shopify的一级菜单项下方最多可挂载两级子链接，总计形成三层导航深度。Dawn主题的抽屉模板同样原生支持遍历至第三级的孙链接。

为什么我的移动菜单需要点击两次？

传统的移动抽屉大多采用多层级推拉机制：用户点击一级分类滑入二级面板，再点击才能选中链接。这可以通过平铺展开子菜单或剔除中间列层级来消除多次点击。

超级菜单的列和图片在移动端能用吗？

横向排列的多列网格无法在手机屏幕上完整展示，通常会被堆叠为单列。而大幅促销图片会占用过多纵向滚动空间，因此普遍建议通过可见性设置在移动端予以隐藏。

我需要修改主题代码吗？

不一定。如果您的主题原生支持超级菜单，只需在主题自定义后台点选配置即可，无需编写代码。只有在希望彻底改变抽屉交互逻辑或强制读取其他独立菜单时才涉及代码改造。

参考来源

• Shopify Developer Documentation: Navigation and Search — linklist对象数据格式及支持最多三层嵌套的技术规范。
• Shopify Dawn Repository: header.liquid — 包含下拉、超级菜单和抽屉等桌面菜单类型的标头源码实现。
• Shopify Dawn Repository: header-drawer.liquid — 深度遍历至孙链接的移动端抽屉循环代码实现。
• Shopify Liquid API Reference: Link Object — 包含levels层级属性在内的Liquid链接对象官方说明。
• Nielsen Norman Group: Mega Menus Work Well Anywhere — 探讨触控误操作、选项分类编组及视觉阶梯的用户体验权威研究。
• W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — 规定触控操作热区不小于24×24 CSS像素的无障碍设计标准。
• Shopify Community: Main menu nesting mobile vs desktop — 关于Dawn移动端导航需要点击两次才可进入子分类的讨论。
• Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — 在抽屉中调用独立移动菜单的代码改造交流。
• Shopify Community: DAWN how to show nested menu/submenu on mobile — 商家希望在Dawn手机端同时展现二级与三级菜单的需求探讨。
• Shopify Community: How can I make my desktop menu identical on mobile — 商家咨询如何让移动端完全复刻桌面菜单结构的讨论帖。
• Helium Meteor Documentation: Welcome to Meteor — 区分桌面与移动独立模板架构的应用文档。
• Clean Canvas Blog: Mega Menu Your Shopify Store — Symmetry主题针对移动端推荐单层菜单设计的官方建议。
• Navi+ Documentation: Create a Desktop Mega Menu — 关于列自动堆叠、嵌入组件及显示控制的技术指导。
• Navi+ Documentation: Create a Mobile Menu — 三层移动端菜单体系及抽屉嵌入的使用指南。
• Navi+ Documentation: Item Visibility — 借助Exclude when embedded控制跨设备项目可见性的操作文档。