如何在Shopify导航菜单中添加新项目（支持任何链接、任何菜单、移动端）
在Shopify中添加一个菜单项仅需一分钟；真正的关键在于选择正确的链接类型，将其放置在合理的层级位置，并确认它在顾客浏览的所有界面（桌面端页眉、移动端抽屉菜单、页脚以及应用生成的菜单）上都能正常显示与点击。
虽然在后台添加只需几秒，但链接需要合理定位才能在各种屏幕设备上清晰呈现。
本指南介绍如何在Shopify菜单中添加各类链接、合理布局，并验证其在全屏幕上的显示效果。
Quick answer: add a new item to your navigation menu
要在Shopify导航菜单中添加新项目，请前往Shopify后台的“内容 > 菜单”（Content > Menus），打开当前主题所用的菜单，点击“添加菜单项”，输入名称，从下拉列表中选择目标链接，然后点击“添加”并保存菜单。
请在Shopify后台按以下6个步骤操作：
- 在Shopify后台中，进入 Content > Menus（Shopify帮助中心）。
- 点击当前活动主题正在显示的菜单，通常默认名为 Main menu（主菜单）（Shopify帮助中心）。
- 点击Add menu item（添加菜单项）（Shopify帮助中心）。
- 在 Name 中输入前台展示的标签名称。
- 在 Link 中直接从下拉列表中选择目标，切勿手动粘贴URL（Shopify帮助中心）。
- 点击 Add，随后点击 Save menu 保存更改（Shopify帮助中心; Fudge.ai）。
较旧教程可能提及“在线商店 > 导航”，但在现代Shopify中，Content > Menus 是标准路径。
Before you add the item: create the destination first
在向菜单添加项目之前，请务必先在后台创建并发布目标页面、系列、商品、博客或政策。
请直接从Shopify列表中选择目标：更改菜单项URL或直接链接URL会破坏连接并导致404错误（Shopify帮助中心）。
保持 Name 简明易懂。诸如“跑步鞋”或“查询订单”等熟悉标签有助于顾客迅速定位。
Pick the link type for your new item
点击 Link 会显示Shopify固定的链接类型列表（Shopify帮助中心）。选对类型可确保顾客准确访问对应页面。
| 链接类型 | 适用场景 | 示例参考 |
|---|---|---|
| 主页（Home page） | 引导访客返回网店首页 | 明确的“首页”按钮或标志备用链接 |
| 搜索（Search） | 直接打开网店商品搜索界面 | 辅助工具菜单中的“搜索商品”文本链接 |
| 产品系列（Collections） | 分类商品集、季节专区或部门品类 | “女士牛仔裤”、“夏季促销”或“新品上市” |
| 产品（Products） | 直达某个具体商品的详情页 | 突出主打爆款或限量版商品 |
| 页面（Pages） | 独立的内容介绍与售后服务页面 | “关于我们”、“尺码指南”、“联系方式”或“FAQ” |
| 博客（Blogs） | 博客频道的总览页面或文章列表流 | “品牌故事”、“穿搭指南”或“行业动态” |
| 博客文章（Blog posts） | 已发布的某篇具体博客文章 | 推荐精选选购指南或节日送礼清单 |
| 政策（Policies） | 网店法律条款与顾客合规说明 | “退款政策”、“隐私政策”或“服务条款” |
| 客户账户（Customer accounts） | 登录、注册或查看历史订单的快捷入口 | “我的账户”、“订单历史”或“登录” |
| 外部网页（External page） | 托管在Shopify域名之外的任何网页 | 第三方批发分销系统或外部媒体报道 |
| 邮件链接（Email link） | 指向您的客服或销售邮箱的 mailto 链接 | “联系在线客服”等直接支持链接 |
Link to an external site or an email address
如需链接到外部网站，请在Link字段输入完整网址，等待下拉选项出现并点击选中（Shopify帮助中心）。
对于邮件链接，请在Link字段输入 mailto:[email protected]（Shopify帮助中心）。
店内页面若手动粘贴纯URL可能在路径变动时引发404死链（Shopify帮助中心）。
Concept illustration: 为新菜单项选择链接类型，并在商店菜单中看到它出现。
Decide where the item goes: top level, inside a dropdown or the footer
菜单项在前台的展示顺序完全由其在Shopify后台列表中的排序决定（Shopify帮助中心）。
Move the item and change its order
调整菜单项显示顺序的步骤：
- 按住菜单项名称左侧的拖动手柄图标（
⠿）（Shopify帮助中心）。 - 上下垂直拖动菜单项到目标位置。
- 松开鼠标并点击 Save menu。
Put the item inside a dropdown
若要放入下拉菜单，请将项目拖拽到父项正下方，并向右轻移直至出现缩进。
Shopify顶级项目下最多允许两级下拉子菜单（Shopify帮助中心）。若父项无需跳转，可在Link中输入 #。
多数主题将下拉菜单的父项视为展开按钮而非可点击链接（Shopify帮助中心）。业务扩张时应及早规划多级菜单结构。
Add the item to the footer menu
辅助性的服务条款链接更适合放入页脚菜单，以免页眉过于拥挤。
在 Content > Menus 中选择 Footer menu，点击 Add menu item 并挑选链接。页脚仅显示顶级项（Shopify帮助中心）；不支持下拉子菜单。
Shopify建议主菜单顶级项保持在7个以内，以避免前台界面过载（Shopify帮助中心）。
One item, every surface: where your new item shows up
保存菜单项并不意味着各设备上的呈现完全一致。实际显示取决于前台界面和主题设置。
Shopify在每个页面默认包含主菜单和页脚菜单（Shopify帮助中心）。但具体展示位置因主题而异（Shopify帮助中心）。
在移动端，许多主题会将主菜单折叠进汉堡按钮后的抽屉中；具体位置取决于主题。
Nielsen Norman Group研究指出，汉堡菜单并非人尽皆知，隐藏全局导航会降低桌面与移动端体验（NN/g）。对于核心类别，可探索超越汉堡菜单的移动端导航或视觉分类图标菜单。
第三方导航应用是在应用内创建菜单，而非调用后台菜单设置（Shopify帮助中心）。若使用应用管理导航，必须在应用内添加项目。
| 呈现界面 | 新菜单项会自动出现吗？ | 应对建议 |
|---|---|---|
| 桌面端页眉 | 通常显示（取决于主题） | 核对主题Header部分的菜单关联；确认文字排版无异常换行。 |
| 移动端抽屉 | 取决于主题 | 使用手机真机测试；确认抽屉内的缩进与点击触控区域正常。 |
| 页脚菜单 | 仅显示顶级项目 | 直接添加至页脚菜单；页脚不支持多级下拉子菜单。 |
| 应用生成菜单 | 不会自动同步 | 应用独立管理菜单树；需登录应用后台单独添加该项目。 |
Concept illustration: 新菜单项在桌面端页眉和移动端抽屉中可能出现的位置。
New item not showing? Five quick checks
若新添加的项目未在前台显示，请依次排查以下5点：
- 是否点击了Save menu？ 只有在点击保存后更改才会应用生效（Shopify帮助中心; Fudge.ai）。
- 主题是否关联了正确的菜单？ 在主题编辑器中核对Header与Footer关联的菜单（Shopify帮助中心）。
- 子项目是否已完成缩进？ 确认下拉子项已拖拽至父项下方并呈现缩进状态（Shopify帮助中心）。
- 主题版本是否过旧？ 部分较老的主题版本不支持三级或更多级的下拉菜单（Shopify帮助中心）。
- 菜单是否由第三方应用生成？ 导航应用在应用内创建菜单，不读取后台设置（Shopify帮助中心）。
若项目点击后报404错误，请确认是否是从下拉列表中选定目标而非手输URL（Shopify帮助中心）。
Trade-offs: when not to add another item
每增加一个菜单项都会提升顾客的认知负荷。无节制地增加链接会削弱店铺的易读性。
Shopify建议将顶级项目保持在7个以内以避免拥挤（Shopify帮助中心）。将同类项归纳到下拉菜单中，而非增加顶栏标签。
下拉菜单也存在权衡：多数主题将父项设为单纯的展开按钮（Shopify帮助中心），使顾客无法直达父系列页面。
在移动端，隐藏全局导航会降低体验（NN/g），导致深层菜单项极易被漏看。
添加前请考虑其他位置：服务条款适合仅显示顶级项的页脚（Shopify帮助中心）。产品属性或许更适合做页面筛选器。了解默认主题菜单的局限。
Adding the same item to a Navi+ menu
Shopify指出，导航应用会在应用内创建菜单，而不是使用后台的菜单设置（Shopify帮助中心）。Navi+ Tab Bar、Mobile Menu和Mega Menu也是如此，因此在Content > Menus添加不会同步到Navi+。
在Navi+中添加项目的步骤：
- 在Shopify后台打开Navi+面板，选择要修改的菜单。
- 点击 + Add item；新添加的项目默认置于末尾（Navi+ Documentation）。
- 垂直向上拖拽调整其排序位置。
- 向右微移将其变为上方项目的子级（Navi+ Documentation）。
- 点击 Save；只有在保存后前台才会显示更改（Navi+ Documentation）。
- 若为Tab Bar，需点击发布（publish）对应菜单以在网店生效（Navi+ Documentation）。
层级深度限制取决于菜单类型而非套餐计划（Navi+ Documentation）；Tab Bar支持3级树状结构（Navi+ Documentation）。详阅在菜单应用中构建桌面端导航菜单。
If you want the same new item to sit in a bottom tab bar or a mega menu on top of your theme menu, Navi+ Tab Bar & Mega Menu lets you add it in the app’s menu tree, drag it into place, save and publish.
Action checklist
在确认新菜单项上线前，请对照检查这8个要点：
- 目标内容已存在： 对应页面、系列、商品或政策已在后台发布。
- 从列表选定目标： 通过内置下拉菜单选择目标，而非手动粘贴URL。
- 链接类型正确： 链接类型与目标资源严格匹配。
- 位置布局合理： 顶级项保持7个以内、下拉项正确缩进或置于页脚。
- 已保存菜单： 在Shopify的Content > Menus编辑器中点击了Save menu。
- 主题设置已核实： 主题页眉和页脚部分准确关联了修改后的菜单。
- 手机真机已测试： 在真实智能手机上确认抽屉菜单中的显示与点击体验。
- 应用菜单已更新： 若网店使用导航应用，已在应用后台同步添加。
FAQ
在Shopify中应该去哪里添加新菜单项？
在Shopify后台中进入 Content > Menus，选择当前使用的菜单（通常为 Main menu），然后点击 Add menu item（Shopify帮助中心）。
菜单项可以链接到外部网站或电子邮箱吗？
可以。对于外链，在Link字段输入完整URL并从下拉提示中选中（Shopify帮助中心）；对于邮箱，输入 mailto:[email protected]。
Shopify菜单最多可以嵌套几层？
顶级菜单项下方最多支持两级下拉菜单，共计三级结构（Shopify帮助中心）。部分早期旧主题不支持三级菜单（Shopify帮助中心）。
为什么新添加的菜单项没有在前台显示？
常见原因包括未点击保存、主题设置中关联了其他菜单，或导航由第三方应用接管（Shopify帮助中心; Fudge.ai）。另外也需检查子菜单项是否正确缩进（Shopify帮助中心）。
可以在页脚菜单中设置下拉菜单吗？
不行。Shopify页脚菜单仅能展示顶级单层菜单项，不支持多层下拉嵌套（Shopify帮助中心）。
新项目会自动显示在手机移动端上吗？
主菜单可以在手机端显示，但具体形式取决于主题（通常折叠在汉堡抽屉中）（Shopify帮助中心）。如果使用了导航应用，则需要在该应用内添加（Shopify帮助中心）。
Sources
- Shopify Help Center: Add, remove, or edit menu items in your online store
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Understanding navigation
- Nielsen Norman Group: Mobile Navigation: Hamburger or Not?
- Navi+ Documentation: Item Create & Manage
- Navi+ Documentation: Tab Bar & Bottom Navigation
- Navi+ Documentation: Multi-level Structure
- Fudge.ai: How to Add a New Menu Item in Shopify
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。