如何在Shopify店铺中设置菜单链接（逐步教程与移动端检查）

在Shopify中设置菜单链接只需在Content > Menus中点击几下，但只有当模版正确关联了该菜单并且在手机端顺畅可用时，菜单才算真正搭建完成——本指南将同时涵盖这两个核心环节。

当你建立新的Shopify独立站时，将商品系列、主打产品和基础政策页面连接到导航栏是最关键的基础步骤之一。清晰的导航能帮助顾客在店铺中找到想要的页面。在当前的Shopify后台架构中，所有链接列表均由中央管理后台统一管理，而前台模版（Theme）则负责决定这些链接如何在电脑端与手机屏幕上呈现。

快速解答：如何在Shopify中设置菜单链接

在Shopify中设置菜单链接，请进入Shopify后台的Content > Menus，打开所需菜单（通常为Main menu），点击Add menu item，输入名称并选择链接目标，然后点击Save menu保存即可。若要创建下拉菜单，将项目拖动至另一个项目下方并缩进。

遵循以下6个步骤即可添加任意链接：

1. 登录Shopify后台，进入 Content > Menus。
2. 点击需要编辑的菜单名称（通常为 Main menu 主菜单）。
3. 点击 Add menu item。
4. 在 Name 字段中输入希望顾客看到的文字，在 Link 字段中选择或粘贴目标链接。
5. 点击 Add。
6. 点击 Save menu 保存并发布更改。

无论何时需要在主分类下对子项目进行归类，只需将对应项目拖拽至另一个项目下方使其缩进，即可快速生成下拉菜单。

Shopify中的菜单与链接概念解析（标头、页脚、模版）

理解Shopify的导航逻辑，首先需要区分后台的“菜单列表”与前台模版的“展示组件”。菜单是你在管理后台创建的一组有序链接列表；链接则是该列表中的单个可点击条目，负责将访客带往特定的产品系列、单品、静态页面或外部网站。

每个新建的Shopify店铺都会默认自带两个在全站所有页面显示的菜单：主菜单（main menu）与页脚菜单（footer menu）。主菜单通常横向铺展在电脑端的标头位置，或以侧边栏形式出现；页脚菜单则位于页面最底部，用于放置服务条款、退换货政策与联系方式。

模版决定了这些菜单在前台的具体位置和展现样式。每个模版都有不同的设计，因此你的菜单在不同模版上的显示效果可能会有所不同。例如，部分模版会将主菜单展示为水平文字条，而另一些模版则会将其收纳进滑出的侧边抽屉。

由于模版掌握着最终的显示效果，你必须检查标头（Header）和页脚（Footer）部分的模版设置，以确认所选菜单与你正在编辑的菜单一致。如果你在后台保存了修改，前台却没有任何变化，通常是因为模版关联的是另一个菜单列表。若想更系统地掌握店铺导航架构，欢迎阅读我们的Shopify菜单完整指南。

在Content > Menus中逐步添加菜单链接的操作指南

Shopify将所有导航链接集中在同一个专属界面中管理。请注意，早期的一些教程可能会提到“在线商店 > 网站导航”，但在最新的Shopify管理后台中，该功能已移至 Content > Menus。

创建新菜单

除了默认的标头与页脚列表，你有时可能需要为页脚辅助列或侧边栏单独制作一个专用菜单。

要新建列表，请进入 Content > Menus 并点击创建菜单的选项。输入便于辨识的标题，例如“页脚客户支持”或“顶部快捷帮助”。创建完成后，即可在其中添加各个链接项，随后在模版编辑器中选中该菜单进行调用。

添加菜单项 (Add menu item)

向现有菜单添加单个链接仅需几秒钟：

1. 打开Shopify管理后台，前往 Content > Menus。
2. 点击需要编辑的菜单名称（如 Main menu）。
3. 滚动到页面底部，点击 Add menu item。
4. 在 Name 字段中输入要展示的文本。该名称会直接呈现在菜单中，并支持使用特殊字符或表情符号（emoji）来突出节日促销或新品。
5. 在 Link 字段中点击并选取已有的产品系列、商品、静态页面、博客文章，或直接粘贴外部网址。
6. 点击 Add 确认加入列表。

保存菜单与调整项目顺序 (Save menu)

添加完新链接后，请检查排布顺序是否合理：

1. 找到需要移动的菜单项旁边的手柄图标（⠿）。
2. 点击并按住菜单项旁边的手柄图标（⠿），然后将该菜单项上下拖动至新位置。
3. 当项目移动至目标位置后松开鼠标。
4. 点击 Save menu 保存。

在离开页面前，务必点击 Save menu，以确保所有改动均已妥善保存。

选择正确的链接类型：产品系列、产品、页面、博客、外部URL

Shopify的导航系统支持多种目标类型。你可以在在线商店中添加菜单，以显示和整理指向产品、产品系列、网页、博客文章等的链接。合理选择跳转类型有助于顾客以更少的点击次数抵达目标商品。

在将某个分类或页面加入菜单之前，务必先在Shopify后台将其创建完毕。如果目标内容尚未建立，你将不得不退出菜单编辑界面去先行创建，然后再重新回到菜单进行关联。

如果你希望某个顶级菜单项只用来展开下拉列表而不跳转到任何页面，请按照Shopify下拉菜单指引的建议，为带有 # 链接的顶级菜单项使用描述性标签，例如“按分类选购”。请在你的模版上测试该菜单项，确认它能展开下拉列表且不会加载页面。

通过嵌套菜单项创建下拉菜单

随着在售商品逐渐丰富，将所有分类并排堆砌在顶部标头会使整个布局拥挤不堪。你可以通过将子项目嵌套在父级分类下方来创建层级清晰的下拉菜单。

概念示意图（Concept illustration）：扁平菜单列表与嵌套下拉菜单的对比。

要嵌套某个条目，首先将父级项与子级项都添加到菜单列表中。点击并按住子菜单项旁边的手柄图标（⠿），将其移动到父级项目正下方，然后向右微移（Drag to nest）直至该行出现明显的向内缩进。看到缩进后松开鼠标即可。缩进后的条目将成为归属于 Top-level item（顶级项目）之下的 Nested item（嵌套项目）。

在后台编辑界面中，你可以清楚地比对未做层级划分的 Flat menu list（所有行均紧贴左边缘对齐）与结构分明的 Nested drop-down menu（子级链接呈缩进排列）。

下拉菜单支持嵌套多深？

Shopify对此有明确的层级规范：顶级菜单项最多可包含两级嵌套下拉菜单。这构成了最多三层的层级结构：

• 顶级项目（Top-level item，例如：“服装”）
  • 第一层嵌套项目（Nested item 第1级，例如：“女装”）
    • 第二层嵌套项目（Nested item 第2级，例如：“连衣裙”）

虽然Shopify管理后台支持两层嵌套，但商城前台的呈现取决于模版的设计。每个模版都有不同的设计，因此你的菜单在不同模版上的展示方式也会有所差异，部分模版可能不会显示所有嵌套层级。请在你自己的模版上测试菜单。想要深入了解复杂层级布局的构建逻辑，可以参考我们的多层级菜单工作原理深度解析。

页脚中的下拉菜单

许多店主常常询问是否能在页脚建立下拉菜单。根据Shopify官方文档说明，在标准模版配置中，页脚菜单只能显示顶级项目。

Shopify自己的下拉菜单帮助页面对页脚的说明并不完全一致，因此不要指望页脚下拉菜单：请只按顶级链接来规划，再检查模版设置，并在你的店铺中测试，了解所用模版如何处理页脚导航。

以下Shopify官方教学视频演示了通过拖动手柄来创建嵌套下拉菜单的标准操作：

合理排布与命名菜单项以便顾客查找

整理菜单的目的是帮助访客找到想要的内容。通俗易懂的标签和合理的先后顺序，会让菜单更容易浏览。

Shopify建议添加7个或更少的顶级菜单项，以避免导航区域产生拥挤。顶级项目更少，顾客也更容易快速浏览。

在文案命名上，请遵循成熟的人机交互原则。正如Nielsen Norman Group的菜单设计指南所指出的那样：菜单绝不是使用自创生词、内部行话或抽象宏观分类来卖弄玄虚的地方。请坚持使用“商城”、“男装”、“女装”、“特惠”、“联系我们”等直截了当的常见词汇，切忌使用“灵感空间”或“私藏宇宙”等晦涩表述。如果顾客猜不出链接背后的内容，点击的可能性就会降低。

将核心热销系列或主力品类放在菜单的前列位置。同时，确保每个标签文字尽可能精炼，以便在较窄的手机屏幕上保持完整单行显示，避免意外折行。

在移动端检查菜单并解决常见故障

仅在电脑显示器上浏览菜单是远远不够的。Shopify官方建议商家在正式发布前，确认其在桌面设备和移动设备上均能正确显示。

请在真实的智能手机上打开你的在线商城。通过点击汉堡图标，逐一展开各层文件夹，测试每个链接是否便于拇指轻触操作，从而全面检查移动端菜单。

Nielsen Norman Group的权威研究强调，隐藏式导航的被发现度远低于可见或部分可见的导航。在手机端，模版会将链接折叠至汉堡图标背后的 Theme mobile drawer（模版移动端抽屉菜单）中。由于这些链接处于隐藏状态，顾客必须主动点击才能发现它们。如果抽屉内层级混乱，或者需要点击4次才能找到关键产品，顾客就会迅速流失。此外，某些模版可能需要进行CSS样式微调才能改善移动端的可用性，尤其是当行距或触控内边距过小时。

若遇到菜单显示不符合预期的情况，请参考下表排查原因：

为什么菜单修改后前台没有更新？

这是Shopify初学者最容易遇到的困扰。你在Content > Menus里细致地添加了5个新分类，点击了 Save menu，刷新前台网站后却发现依然显示老菜单。

这是因为 Shopify 将菜单列表与模板的显示设置分开管理。店铺可以有不止一个菜单，但前台只会显示在模板编辑器中选定的那一个。请打开模板编辑器，进入 Header 区域，查看它使用的是哪个菜单。若指向的是旧菜单，请切换为你更新后的菜单并保存。

子链接缺失或无法下拉展开

如果你在后台完成了层级嵌套但在前台无法展开，请先检查后台的缩进幅度。在 Content > Menus 中，子项目必须在视觉上明显位于父项目下方并向右缩进。如果它与父项目处于相同的左侧对齐线，Shopify会将其判定为普通的同级顶级链接。如果后台缩进无误但前台依然无法展开，很可能是当前模版在代码层面上仅支持单级导航。

菜单项突然不翼而飞

Shopify会为你保持链接的一致性：删除关联的资源也会同时移除该菜单项。如果你在管理后台删除了一个季节性产品系列或草稿页面，原本指向它的菜单项也会一并被移除。如果某项导航消失，请查看产品系列或页面列表，核实底层资源是否已被删除。

如果你发现完全依赖手机抽屉菜单导致核心品类难以被顾客注意到，可以考虑配置常驻视窗底部的移动端底部标签栏，确保关键入口在任何浏览时刻都触手可及。

权衡考量：何时Shopify默认菜单已经足够

并非每家Shopify店铺都需要加装第三方的复杂应用或编写高度定制的代码。对于大量中小型独立站而言，Shopify原生的菜单系统已经够用。

原生默认菜单在以下情况下表现出色：

• 店铺商品量适中，仅围绕少数几个核心分类展开。
• 主导航栏包含7个或更少的顶级菜单项。
• 所选模版自带的移动端抽屉菜单交互平滑、排版清爽。
• 无需在下拉菜单中嵌入促销横幅、产品缩略图或多列复杂网格。

使用默认菜单无需额外安装任何应用。

然而，原生菜单也存在客观的局限：

• 嵌套深度受限： 顶级项目最多支持两层嵌套下拉菜单，也就是总共三层。
• 高度依附模版样式： 每个模版都有不同的设计，因此菜单在各模版中的呈现效果不同，这让你在布局排版、微交互以及移动触控间距上完全受限于模版开发者的预设代码。
• 移动端全隐藏属性： 默认模版将所有链接藏在汉堡菜单之后。由于隐藏式导航的发现度不及可见式导航，手机端顾客必须多一步操作才能展开分类。

想要了解自家店铺何时会达到原生菜单的瓶颈，请参阅我们关于模版菜单局限性分析的深度对比。

更高阶需求：借助Navi+打造Mobile Menu、Mega Menu与Tab Bar

当你的商品矩阵迅速扩张，或是移动端访问者需要更快捷的购物路径时，单调的纯文字抽屉列表可能会成为转化的绊脚石。此时，专业的增强型导航布局能带来立竿见影的改善。

概念示意图（Concept illustration）：模版默认移动端抽屉与带底部标签栏的移动菜单的对比。

借助 Navi+ Tab Bar & Mega Menu，你无需改动任何模版代码，即可通过直观的拖拽操作构建固定底部标签栏、多列超级菜单、图片化移动抽屉、图标菜单以及悬浮快捷按钮。

对于既希望提升移动端展示质感，又希望保留原有后台操作习惯的商家，Navi+可以复用你现有的Shopify菜单。其 Mobile Menu 功能可直接嵌入Shopify现有的菜单列表，并支持通过“Sync now”按钮实现一键刷新同步。这意味着你依然可以在Shopify后台的 Content > Menus 中照常增删或调整链接，只需在Navi+后台轻点“Sync now”，即可快速将最新目录同步至移动端抽屉。 同步是手动的：Navi+不会自动更新，也不会修改 Content > Menus 中的菜单。

Navi+的菜单同样最多支持三层嵌套，与Shopify自带菜单的深度相同，所以它的价值在于菜单的外观和放置位置（抽屉、标签栏、大型面板），而不在于更深的层级。若想评估最适合自家店铺的菜单形式，欢迎阅读我们关于如何为店铺挑选合适菜单类型的指南。

无论你是需要在手机端配置一条便于拇指操作的 Tab Bar（底部标签栏），还是需要在电脑端部署宽幅 Mega Menu（超级菜单），亦或是升级质感更佳的 Mobile Menu，你都有充分的升级空间。若模体现有菜单足以满足现状，保持即可；如果你希望在不触碰模版代码的前提下实现更富表现力的移动抽屉、底部常驻栏或超级菜单，可以前往Shopify应用商店尝试体验Navi+ Tab Bar & Mega Menu。

正式发布前的行动检查清单

在正式上线店铺或开启付费推广引流之前，请花几分钟过一遍这份核查清单：

• 逐条核验链接目标： 点击每一个菜单链接，确保其能顺利跳转至已发布且正常销售的产品系列、单品或页面。
• 遵守7项以内规则： 将顶级菜单控制在7项以内，避免标头因项目过多而拥挤折行。
• 采用大众化通用词汇： 剔除内部生僻黑话，改用顾客一眼就能读懂的常规词汇作为导航名称。
• 检查模版绑定关系： 确认模版编辑器标头（Header）与页脚（Footer）处选中的菜单，正是你在Content > Menus中所编辑的那个列表。
• 手机真机端实测： 在真实智能手机上访问商城，验证菜单在电脑端与移动端均能正确排版，且按钮易于点击。
• 设置URL重定向： 如果你修改过已有页面或产品系列的网址句柄，请记住可以通过URL重定向将旧网址流量导向新页面，防止顾客遭遇404死链。
• 在后台完成最终保存： 确认在离开浏览器标签页前，已在Content > Menus中点击了 Save menu 按钮。

常见问题解答 (FAQ)

Shopify管理后台中的菜单设置在哪里？

你可以在Shopify管理后台的Content > Menus中添加、删除、修改和查看链接与菜单。部分早期教程称之为“在线商店 > 网站导航”，但在当前的店铺后台中，该模块已划归在Content分类之下。

Shopify下拉菜单最多可以设置多少层嵌套？

顶级菜单项最多可在其下方包含两层嵌套的下拉菜单。这总共提供了三级层级深度，但最终的视觉呈现还取决于你所使用模版的设计风格。

为什么我在后台修改了菜单，店铺前台却没有更新？

这通常是因为模版在标头或页脚部分关联了另一个菜单。请检查标头和页脚部分的模版设置，确认当前绑定的菜单是否与你刚刚编辑的菜单相符。

导航栏的主菜单建议放置多少个顶级项目？

Shopify建议顶级菜单项保持在7个或以内，以防止标头过于拥挤并确保在各类屏幕尺寸下均具有良好的可读性。

可以在页脚部分添加下拉菜单吗？

Shopify官方文档指出，在标准模版配置中，页脚菜单通常只能展示顶级菜单项。你可以检查自用模版的设置项，确认其对页脚链接的实际渲染规则。

为什么原本设置好的菜单项会突然消失？

删除关联的资源也会同时移除该菜单项。如果你在Shopify后台删除了某个产品、静态页面或产品系列，系统会自动将菜单中指向该资源的项目一并剔除。

资料来源

• Shopify Help Center: Menus and links — 在Shopify后台的Content > Menus中管理菜单与链接。
• Shopify Help Center: Editing menus — 添加菜单项、使用拖动手柄重新排序及表情符号支持。
• Shopify Help Center: Understanding navigation — 默认菜单及在模版设置中分配菜单的具体规则。
• Shopify Help Center: Drop-down menus — 下拉嵌套层级限制、页脚表现、链接资源自动删除机制及移动端实测建议。
• Shopify Help Center: URL redirects — 修改页面路径时创建URL重定向以保护流量。
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation — 关于移动端隐藏式导航可发现性的权威人机交互研究。
• Nielsen Norman Group: Menu Design — 明确类别标签命名规范及规避内部行话的设计准则。
• Shopify App Store: Navi+ Tab Bar & Mega Menu — 用于创建底部标签栏、多列超级菜单与移动端抽屉的导航应用。
• Navi+ Blog: Shopify Menu Guide — 导航架构搭建与Mobile Menu单触同步技术文档。