如何在Shopify中分别创建桌面端和移动端菜单（逐步指南）
为Shopify网店设计导航时，桌面端头部通常需要承载丰富的目录：产品分类、系列活动以及多层级下拉菜单。但在手机屏幕上，这套庞大的结构极易演变成冗长混乱的侧边抽屉，迫使顾客频繁上下滑动以寻找商品。
许多商家习惯在Shopify后台寻找对应开关，希望能将一套完整菜单分配给电脑端，另设一套精炼菜单专供手机端。然而，不少主题并未内置这种分端开关。尽管您可以在“内容 > 菜单”中创建多套菜单，但主题才是决定其显示位置的推手 — 大多数主题在桌面头部和移动抽屉中均调用同一套菜单。
若要将两者彻底分开，您可以选择精简单套菜单、修改主题抽屉代码，或借助专业导航菜单应用。本文将为您详细拆解这三种解决方案的实操步骤。
快速解答：Shopify可以在移动端显示不同的菜单吗？
大多数主题默认无法做到。您在“内容 > 菜单”中创建菜单，但由主题决定它们显示在哪里，像Dawn这样的主题会把同一个菜单同时用于桌面端头部和移动端抽屉。要把两者分开，请编辑抽屉代码或使用菜单应用。
核心方案主要包括以下三种途径：
- 选项 1：保持单菜单结构并由主题抽屉自适应。 在“内容 > 菜单”中维护一份克制精炼的列表，无需编写任何代码。
- 选项 2：通过修改主题代码指定独立移动菜单。 复制备份主题后，修改Dawn等主题的
snippets/header-drawer.liquid文件，使其读取专属移动菜单句柄。 - 选项 3：使用专业导航菜单应用。 免代码构建桌面端超级菜单与移动端侧边抽屉或底部标签栏，通过设备开关独立控制展示。
如需评估哪种方案更符合您的目录体量与维护精力，请参阅后文“权衡取舍”部分的对比表。
Shopify菜单在桌面端与移动端的联动机制
Concept illustration: 单个Shopify主菜单同时为电脑端头部导航与手机端侧边抽屉提供数据。
在Shopify架构中，导航链接数据统一在后台的内容 > 菜单中进行管理。但如Shopify帮助中心下拉菜单文档所述，主菜单与下拉菜单在网店的具体呈现位置完全取决于所选主题。
以Shopify官方基准主题Dawn为例，其Header（头部）配置中仅包含一个link_list类型的选择项（默认值为main-menu）。在电脑宽屏上，主题将其横向排列呈现，子分类则展开为Header dropdown。
在手机屏幕上，汉堡按钮会打开Mobile drawer。在Dawn的底层代码中，渲染该抽屉的模板是snippets/header-drawer.liquid。其核心Liquid循环语句如下：
{%- for link in section.settings.menu.links -%}
移动抽屉调用的正是section.settings.menu.links — 亦即桌面端头部所使用的同一配置项。因此，只要在后台修改了Main menu，桌面端与移动端的外观便会同步发生改变。
部分主题可能会在主题编辑器的Header部分提供专用的移动端菜单选择框。在尝试改写代码或安装应用前，建议先进入主题编辑器检查Header设置。若未提供原生支持，则需采用下述三种方法之一。
步骤 1：在“内容 > 菜单”中创建桌面菜单与移动菜单
不论您选择修改代码还是使用应用，首要任务都是在Shopify后台建立好两套链接体系。
请始终在内容 > 菜单中操作。
搭建桌面端菜单（含下拉项的主菜单）
- 登录Shopify后台，进入内容 > 菜单。
- 点击默认的主菜单（Main menu）或点击添加菜单以新建列表。
- 点击添加菜单项，输入一级核心分类（如“全部商品”、“系列列表”、“关于我们”）。
- 拖动二级菜单项置于父级下方并微向右移以建立嵌套。依据Shopify官方下拉菜单规则，最顶级项目下方最多可嵌套两级下拉菜单（即整体最多三层结构）。
搭建更精简的移动端菜单
- 返回内容 > 菜单，再次点击添加菜单。
- 设定清晰易辨的名称，如
Mobile menu。 - 记下菜单的句柄（handle，例如
mobile-menu）。若选择选项2，代码将直接依赖此字符串。 - 仅保留最核心的高意向链接：主推系列、站内搜索、订单追踪及客服支持，避免繁冗嵌套。
- 点击保存菜单。
[!NOTE] 在内容 > 菜单中创建好Separate mobile menu后，该菜单并不会自动出现在前台。唯有在主题设置、自定义Liquid代码或Menu app对其进行引用后，菜单才会正式生效展示。
选项 1：保持单菜单结构并由主题抽屉自适应移动端
对于商品种类精简的店铺，最稳妥的策略是专注于打磨单个Main menu，并让主题自带的Mobile drawer自动适配触屏设备。
您只需合理规划分类、杜绝臃肿分层。在移动设备上，主题会自动将这批链接收纳进侧滑抽屉。
- 优势： 零代码介入、无额外应用成本，日常维护极简。在后台调整一处即可全端生效。
- 劣势： 桌面端与移动端完全镜像。桌面端若配置了容纳数十个链接的超级菜单，手机抽屉就会变得极为冗长，迫使顾客频繁滑屏。
请在主题编辑器中查看抽屉是否有微调选项。如需了解移动端侧滑抽屉的交互优化，请阅读我们的mobile drawer menu best practices指南。
选项 2：通过修改主题代码指定独立移动菜单
若您希望在不增添额外应用的前提下呈现专属移动导航，可以通过修改主题的Liquid代码，让移动抽屉直接读取第二套菜单。
务必先复制备份主题
按照Shopify主题管理官方建议，在变动代码前请务必先复制备份，以便在出现偏差时随时还原。
- 进入在线商店 > 模版（Themes）。
- 在当前已发布的模版旁点击三点图标（
...），选择复制（Duplicate）。 - 仅在此未发布的副本上执行后续代码修改。
将抽屉指向专属移动菜单
- 在复制的主题上点击三点图标（
...），选择编辑代码。 - 在Dawn主题中，打开
snippets/header-drawer.liquid文件。 - 检索遍历菜单的主循环：
{%- for link in section.settings.menu.links -%}
- 根据Shopify Liquid关于linklists对象的手册，可以通过句柄直接调用对应菜单。将其替换为：
{%- for link in linklists['mobile-menu'].links -%}
（请将'mobile-menu'替换为您在步骤1中实际记录的菜单句柄）。
类似的改造方案在Shopify社区针对Ride主题的讨论中也曾被成功验证。
[!WARNING] 上述文件名仅为 Dawn 的示例；其他主题使用不同的文件，请查找读取
section.settings.menu的类似循环。切勿修改内层循环，否则会导致二级子菜单无法展开。此外，更新主题后，手动写入的Liquid改动可能需要重新应用。
发布前请在桌面与手机模式下全面预览该副本模版。
选项 3：使用菜单应用分别配置桌面与移动端菜单
对于追求所见即所得、不愿承担修改代码风险的商家，选用专业的Menu app是最理想的途径。
菜单应用允许针对不同屏幕尺寸量身定制版式：为电脑端配置多列图文超级菜单，为手机端配置平滑抽屉或底部固定标签栏。
在Shopify应用商店挑选工具时，请着重考察：
- 按设备独立设置可见性： 可自由指定某个菜单仅在移动端、桌面端或双端显示。
- 内置移动端真机预览： 在编辑器内即可直接查看触屏交互效果。
- 安装方式： 请确认应用是通过Theme App Embed接入，还是需要您编辑主题文件。
- 与当前主题兼容： 能与原店Header平滑契合，不引发版面错位。
若想深入对比哪种形态更契合您的产品线，请阅读我们的指南：choose the right menu type for each screen。
移动端菜单的设计规范
Concept illustration: 多层过深嵌套的抽屉与具备宽大触控热区的精炼菜单的对比。
构建手机菜单时，请遵循以下人机工学原则：
- Fewer items（精简项目）： 手机纵向可视空间有限。重点展示爆款系列、热销新品、搜索与客服通道。次要的企业介绍或招聘等信息应下沉至页脚。
- Larger tap targets（增大点击区域）： 手指触控远不如鼠标精准。WCAG 2.2 准则 2.5.8（目标尺寸最小值）要求指针输入的目标尺寸至少达到 24×24 CSS 像素（有部分例外）。预留宽松的行距可有效杜绝误触。
- Shallow nesting（浅层嵌套）： 深层嵌套的折叠菜单在小屏幕上更难操作。请推行Shallow nesting：采用扁平单层列表或最多展开一层子菜单。
- 跳出汉堡菜单的局限： Nielsen Norman Group的可用性调研表明，并非所有访客都能立刻辨识汉堡菜单。将抽屉与常驻底部的标签栏等显性元素结合，能显著缩短核心页面的到达路径。
欢迎查阅我们关于mobile navigation beyond the hamburger menu的深度解析。
发布前的真机测试流程
依照Shopify帮助中心的指导建议，务必在真实移动设备上进行验证，以确保下拉子菜单能顺畅展开。
推荐执行以下检查步骤：
- 模版编辑器预览： 切换桌面端与移动端视图，确认基础样式正常。
- 实体手机真机测试： 使用iPhone和安卓设备在Safari与Chrome中打开预览链接。
- 测试抽屉开合手感： 验证抽屉滑出与关闭过程是否跟手顺滑。
- 逐项展开手风琴菜单： 检查文字有无重叠、换行错误或溢出裁切。
- 逐一点击链接： 确保没有失效链接或误跳至404页面。
- 横屏翻转测试： 将手机横放，确认菜单不会过长遮挡关闭按钮。
- 多页面模板抽查： 从首页、系列页和具体产品详情页分别测试唤起菜单。
常见问题排查与修复方法
- 手机端依然显示旧菜单： 您可能正处于已发布主题中，而修改仅保存在未发布的副本中。此外，请核对
linklists['mobile-menu'].links中的句柄是否与后台完全一致。 - 新建菜单在前台完全不可见： 仅在“内容 > 菜单”建好列表并不会自动呈现。必须在Header设置中指定、在Liquid中调用，或在应用里启用。
- 删除父项后子分类全部丢失： 依照Shopify菜单编辑机制，删除父菜单项时，其下嵌套的所有子项都会被同步清除。在移除父项前，请先将子项拖出。
- 手机上下拉菜单无法展开： 检查嵌套深度。Shopify允许在主项下最多嵌套两层；请让移动端菜单保持在该限制内，并在主题的抽屉中测试。
- 修改代码后抽屉子菜单消失： 请核实您是否仅替换了最外层的
for link in section.settings.menu.links。一旦改动内层的for childlink in link.links，子项将无法正常循环渲染。
权衡取舍：何时不建议拆分菜单
| 评估维度 | 选项 1：单菜单（主题原生） | 选项 2：修改代码 | 选项 3：使用菜单应用 |
|---|---|---|---|
| 初期配置成本 | 最低（仅维护一套列表） | 中等（需编辑Liquid文件） | 较低至中等（可视化拖拽） |
| 代码技术门槛 | 完全无需代码 | 需掌握基础Liquid知识 | 完全无需代码 |
| 主题更新风险 | 低（不改动主题代码） | 较高（自定义Liquid可能需要重新应用） | 视应用而定（请确认其安装方式） |
| 设备链接差异化 | 否（两端保持完全一致） | 是（通过句柄指向独立抽屉） | 是（按设备分别设定独立菜单） |
| 最佳适用场景 | 商品目录小且集中的店铺 | 不想使用应用的店铺 | 追求超级菜单及底部栏的商家 |
何时不应拆分菜单
拆分双端菜单并非适合所有网店：
- 目录规模较小： 若店铺目录小而简单，一套凝练干净的菜单足以服务全端。
- 缺乏日常维护精力： 维护两套菜单意味着每当上新或重命名系列时，都必须在“内容 > 菜单”中同步更新两次。一旦漏更，手机顾客将无从获知新系列。
- 没有技术支持且需频繁升级主题： 采用选项2修改代码后，主题更新后可能需要重新手动还原修改。
当单套菜单能优雅平衡电脑与手机的浏览体验时，维持统一架构通常是运维负担最轻的方案。
Navi+ 如何提供支持
如果不想编辑主题代码，Navi+ 可以让您分别创建桌面端超级菜单和独立的移动端菜单或 Tab Bar，并选择每个菜单显示在哪种设备上。您可以使用免费套餐试用，无需改动主题。
Navi+ 赋能商家通过拖拽方式构建吸底标签栏、多列桌面超级菜单、移动抽屉与悬浮联络按钮，全程无需触碰任何代码。
在每个菜单的 Publish 标签页中，Navi+ 提供了独立的设备展示开关：
- Mobile 开关： 控制该菜单在智能手机屏幕上的呈现。
- Desktop 开关： 控制该菜单在电脑端屏幕上的呈现。
默认情况下，创建移动菜单时仅激活 Mobile 开关。您可以让抽屉仅在手机端工作，同时另建一个仅开启 Desktop 的电脑端超级菜单。两套菜单在同个店铺内互不冲突，支持最多三层嵌套。
为了进一步优化触屏操作体验，你可以将侧滑抽屉与常驻的bottom tab bar for Shopify组合使用，把搜索、购物车及核心品类牢牢锁定在拇指操作舒适区。
实操行动清单
- 评估商品目录： 审视是否有必要拆分菜单，还是只需精炼现有单套菜单。
- 搭建电脑端主菜单： 在内容 > 菜单中细化主菜单，合理排布系列与多层下拉项。
- 搭建手机专属菜单： 在内容 > 菜单中创建短菜单，并随手记录其生成的句柄。
- 检查主题原生设置： 在主题编辑器的Header配置中查看是否已自带移动菜单选项。
- 敲定执行方案： 在选项1（单菜单）、选项2（改代码）与选项3（用应用）中做出抉择。
- 改代码前先做备份： 若选用选项2，务必先复制主题并在副本中修改
snippets/header-drawer.liquid。 - 配置应用端展示范围： 若使用应用，将超级菜单指定给电脑端，抽屉或底部栏指定给手机端。
- 进行真机细致核验： 在真实手机上测试抽屉开合、子菜单展开、触控间距与横屏兼容。
- 建立同步习惯： 日后凡有系列增减，必须同步更新“内容 > 菜单”中的两套列表。
常见问题解答（FAQ）
手机端能否显示与桌面端不同的菜单？
可以，但绝大多数Shopify主题默认共用同一套菜单。要展示不同内容，需改写抽屉代码或安装菜单应用。
为什么我的手机菜单显示的链接与桌面菜单相同？
因为在Dawn等主题中，移动抽屉直接读取了Header配置中选定的主菜单（section.settings.menu.links）。因此在后台修改主菜单会同时改变两端。
使用两套菜单需要编辑主题代码吗？
不必。您可以借助菜单应用在免代码环境下分别指定设备专属菜单。若选择修改代码，请务必先复制备份主题。
在Shopify中哪里创建菜单？
在Shopify后台的内容 > 菜单（Content > Menus）中集中创建与管理。
Shopify下拉菜单最多可以有几层？
顶级项目下方最多可嵌套两级下拉菜单，这意味着整套导航最多支持三层深度。
删除父级菜单项会怎样？
删除含有嵌套子项的父菜单项时，其下包含的所有子项目都会被一并删除。在移除父项前，请先将子项拖出。
资料来源
- Shopify Help Center: Editing Menus — 在“内容 > 菜单”中维护导航以及删除父级菜单项规则指南。
- Shopify Help Center: Drop-down Menus — 下拉菜单二级嵌套限制、主题位置差异及移动端测试建议。
- Shopify Help Center: Duplicating Themes — 在修改代码前通过复制主题建立备份的官方规范。
- Shopify Developer Documentation: Liquid linklists Object — 借助句柄调用特定菜单的Liquid API技术参考。
- Shopify Dawn Repository: sections/header.liquid — 展示头部link_list配置的Dawn开源代码。
- Shopify Dawn Repository: snippets/header-drawer.liquid — 说明移动抽屉循环读取section.settings.menu.links的Dawn开源代码。
- Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Ride主题针对header-drawer.liquid的代码改造实例。
- Shopify Community: Use Different Menu for Mobile and Desktop — 探讨分端展示菜单需求的用户交流帖。
- Fudge: How to Change Mobile Menu Behavior in Shopify — 针对统一菜单默认机制及移动定制方案的行业分析。
- W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — 成功准则 2.5.8 规定的触控目标尺寸不小于 24×24 CSS 像素要求。
- Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — 针对汉堡菜单识别度与显性导航结合的用户体验报告。
- Navi+ Help Center: Display Rules Settings — 移动端与桌面端菜单显示规则设置文档。
- Shopify App Store: Navi+ Navigation & Menu Bar — 用于创建超级菜单、移动抽屉及吸底标签栏的应用详情。
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。