Quick answer: how to create a menu with the Navi+ app on Shopify
要在Shopify上使用Navi+应用创建菜单，请从Shopify App Store安装Navi+，点击Add menu，选择菜单类型，从模板、空白或AI起步，然后在主题的App embeds中开启Store Connector并发布。
- 从Shopify App Store安装Navi+并进入应用控制后台。
- 点击Add menu并选择您所需的导航菜单类型。
- 从现成模板、空白画板或AI搭建的骨架开始制作。
- 添加、排列并美化指向产品系列、商品或页面的链接。
- 在主题App embeds中开启Store Connector，保存并点击Publish to website。
- 在手机真机和电脑浏览器上全面检查上线后的导航效果。
无需修改主题代码。Navi+通过Shopify主题的app embed运行，因此你可以在应用内创建并预览菜单，而不必编辑主题文件。
Before you start: which Navi+ menu type do you need?
在搭建之前选对导航形式，有助于避免返工。每家店铺的商品目录规模不同，请选择与顾客浏览方式相匹配的类型。
图1：概念示意图（Concept illustration）— Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | 在移动端屏幕底部添加带有图标与文字标签的常驻吸底导航栏 | 移动端访问占主导地位，且希望顾客能够一键触达核心购物页面 |
| Mobile Menu | 打造容纳完整商品分类目录的抽屉式侧边栏或汉堡菜单 | 需要一个条理分明的移动端目录来整洁归纳丰富的品类体系 |
| Desktop Mega Menu | 构建展示商品、系列、促销横幅与图素的多列下拉超级菜单 | 桌面端顾客需要在一个视野内完整纵览多部门分类与重点活动 |
| Mobile Mega Menu | 创建专为手机屏幕设计的 Mega Menu 布局 | 多层级商品目录需要更深的浏览路径，同时又不想让小屏幕显得拥挤 |
| Icon Menu 和 Floating Button | 添加可链接到商品、系列或页面的图标磁贴或悬浮按钮 | 你希望在不占用页头的情况下，快速通往客服、购物车或重点促销 |
以移动端访客为主的店铺可以从Tab Bar或Mobile Menu入手。正如Nielsen Norman Group所指出的，隐藏的导航比可见的导航更难被发现。常驻底部的Tab Bar让关键入口保持可见，而不是藏在尚未打开的抽屉后面。
尽管您可以同时启用多种菜单形态，但最佳实践是先完整配置并测试好一个菜单，再添加补充方案。如需获取更详尽的选型框架，请参阅我们的如何选择合适的菜单类型指南。
Step 1: Install Navi+ from the Shopify App Store
访问Shopify App Store上的Navi+ Tab Bar & Mega Menu页面。通过官方应用市场安装，会走Shopify标准的安装流程。
点击Install开始设置。Shopify会显示其标准的权限确认页面。Navi+通过主题的app embed显示你的菜单，你将在第5步中启用它。
确认授权即可完成安装。安装结束后应用会在Shopify管理后台内自动打开。后续需要使用时，只需在Shopify后台左侧菜单点击Apps即可随时唤起构建器。
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
在Navi+管理后台中，点击顶部的Add menu按钮。系统将展示Choose kind of menu选择界面，包含六张卡片：Tab Bar、Mobile Menu、Desktop Mega Menu、Mobile Mega Menu、Icon Menu和Floating Button。请根据店铺需求选择合适的类型。
Start from a template
选择Create from a template可浏览预设的设计模版。挑选到契合您商品类别的布局后，点击Use this template。编辑器将自动填入示例链接、图标与排版样式，供您直接微调修改。
Start blank
如果您已在草稿纸上规划好完整的分类树，选择Blank最为适宜。这种方式免去了清理示例数据的繁琐，提供绝对的搭建自由度。若您尚未理清目录层次，建议在添加前阅读在建站前规划菜单结构的步骤指南。
Build the structure with AI
如果您希望免去手动逐条录入并快速获得结构草稿，可使用内置的AI辅助工具。用日常语言简述您的店铺主营定位与商品范围，AI便会在编辑器中直接生成现成的菜单骨架。生成后您依然拥有绝对控制权，可自由替换链接目标与色彩。
Use your existing Shopify menu
Navi+也可以连接现有的Shopify导航菜单作为起点。菜单进入编辑器后，请在发布前检查嵌套位置；之后每次在Shopify中修改原菜单时，也请重新检查。
Step 3: Add and arrange menu items
添加和调整菜单项的顺序使用拖放式编辑。你可以添加新菜单项，拖动以改变顺序，并将其嵌套到父级菜单项之下。
Link to products, collections, and pages
每个菜单项都必须关联有效的跳转地址。在Navi+中，菜单项可以链接到商品、系列和页面。请合理组织分类，一级菜单文案务必精炼，把畅销系列排在最前，详细步骤请参阅在Shopify中配置菜单链接的教程。
Nest items up to three levels
面对品类繁多的商品目录，层级嵌套能够有效避免视觉混乱。在Navi+的Business方案中，导航最多支持三个菜单层级。相比之下，根据官方文档说明，Shopify原生导航仅支持在顶级项下包含最多两层下拉子菜单。
Step 4: Customize icons, images, colors, and layout
菜单树确定后，调整样式以匹配你的品牌。对于Tab Bar，选择清晰的图标，并在手机上检查标签是否易读。对于Mega Menu，添加商品系列图片，并选择适合你商品目录的布局。
调整文字和背景颜色，使其与当前使用的Shopify主题相匹配。请务必在真实的手机屏幕上检查文字和图标的对比度，确认清晰可读。
上线前，打开Publish选项卡，使用Test this menu预览菜单。如需了解更多样式设计内容，请阅读我们的修改菜单设计风格指南。
Step 5: Turn on Store Connector in App embeds, then publish
在店铺中显示Navi+不需要编写或修改主题代码。它通过Shopify主题的app embed运行。
图2：概念示意图（Concept illustration）— Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
如果您的网店正在持续接待真实访客，最稳妥的上线准则是先在测试环境中进行演练。根据Shopify主题管理规范的建议，复制一份当前主题作为备份，能够让您在不影响正在下单的顾客的前提下验证所有改动。
Turn on Store Connector
进入Shopify管理后台的Online Store > Themes，点击目标主题的Customize。在左侧工具栏中点击App embeds图标，找到Navi+提供的Store Connector项，按照Shopify操作指引开启开关并点击右上角的Save保存。此步骤在每个网站只需设置一次。
Click Publish to website
返回Navi+应用后台，打开做好的菜单，点击Publish to website按钮。系统将展示与该类型匹配的布局部署选项—例如Replace your main menu、Add below your header或Use your existing menu icon。Navi+按三大部署组别进行分类指引，选定目标部署位后确认，将发布开关切换至启用状态。
Step 6: Preview on mobile and desktop and fix common problems
发布生效后，请在电脑端和真实的智能手机上实地测试前台效果。触屏手势、大拇指触达范围与边缘留白细节往往是电脑模拟器容易忽略的关键点。
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector在其他主题中开启或未保存改动 | 进入线上运行主题的编辑器，在App embeds中开启Store Connector并点击Save |
| Two menus show at once | 原主题页眉菜单未停用，与应用菜单产生重叠 | 在Navi+发布设置中勾选Replace your main menu，或隐藏原主题页眉菜单项 |
| Menu disappeared after changing theme | 切换Shopify主题后应用嵌入不会自动继承生效 | 进入新主题的编辑器，在App embeds中重新开启Store Connector并保存 |
Menu does not appear
如果点击发布后菜单未显现，最普遍的原因是Store Connector开关开启在了未发布的草稿主题上，或者修改后忘记点击主题编辑器的Save保存按钮。
Two menus show at once
如果页面同时显示原主题菜单与Navi+菜单，说明原生的导航模块仍在页眉生效。只需在Navi+设置中选定Replace your main menu，或在主题编辑器Header区隐藏默认菜单模块即可解决。
Menu disappeared after changing theme
更换线上Shopify主题时，应用嵌入不会自动同步到新主题代码。请直接打开新主题编辑器，在App embeds中重新激活Store Connector并保存。如需全面排查，请参阅应用菜单未显示的完整检查清单。
How to turn off a Navi+ menu or go back to your theme menu
由于Navi+通过app embed运行，切换回默认导航无需修改主题代码。
如需在保持应用启用的情况下关闭单个菜单，请打开Navi+后台。每个已创建的菜单都会显示On / Off状态。将菜单切换为Off后，它将不再显示在线上店铺中，主题默认菜单即可重新显示。
若想在某个主题上彻底关闭Navi+的所有效果，进入Online Store > Themes > Customize，在App embeds栏目中关闭Store Connector并点击Save。如果您之前是在备份主题上测试，直接丢弃该测试副本即可，完全不影响正在营业的主题。
Trade-offs: when you don’t need Navi+ yet
虽然专用菜单工具功能丰富，但并非所有Shopify卖家在每个阶段都必须安装导航应用：
首先，如果您的店铺仅有十余款精选商品，Shopify内置的导航（原生支持顶级项下包含两级下拉子菜单）加上主题自带的移动端菜单通常完全够用。仅为几个基础链接接入第三方应用会增加不必要的维护成本。
其次，所有应用嵌入在日常换版时都需要人工维护。每次更换或升级店铺主题，都需要记得在新主题中重新激活一次Store Connector。
再次，AI生成工具虽然能提供合理的骨架，但并不能交付成品。卖家仍需亲手核对链接地址、关联对应商品系列、调整对比度并上传品牌物料。
最后，切忌在狭小的手机屏幕上同时堆砌过多导航形态（例如底部Tab Bar、侧边栏抽屉与浮动按钮并存），未作清晰架构规划前这样反而会让顾客感到无所适从。
Where Navi+ fits
当您的首个导航菜单上线平稳运行后，下一阶段的优化往往是引入另一种互补型菜单来承载不同的交互场景。例如，许多成熟品牌会将常驻底部的Tab Bar（用于搜索、购物车和爆款快选）与侧边栏Mobile Menu（容纳全店完整庞杂的分类架构）组合搭配。配置一个低调的Floating Button也能快捷引导客户服务。
所有补充菜单都能在管理后台通过同一个Add menu按钮统筹建立。此外，Navi+的导航组件同样可以无代码部署在Shopify之外的独立网站上。如需构建跨设备导航，请阅读我们的桌面端与移动端双重菜单构建指南。
当您的首个菜单上线稳定后，下一步通常是添加承担不同职责的第二个菜单 — 例如配合Tab Bar添加容纳全部分类的Mobile Menu。您只需点击同一个Add menu按钮即可继续添加。如果您尚未安装，可随时在Shopify App Store安装Navi+ Tab Bar & Mega Menu。
Action checklist
在Shopify上配置、发布与检查店铺菜单时，请对照以下行动步骤逐一核实：
- 依据店铺现阶段核心目标敲定匹配的菜单类型
- 在Navi+控制台点击Add menu按钮
- 选择合适的起步路径：预设模板、空白画板或AI骨架
- 为各层级项目绑定有效的商品、系列或页面链接
- 将品类嵌套层级合理控制在三级以内
- 在Publish选项卡使用Test this menu校验交互反馈
- 若网店已有真实客流，先在备份主题中完成隔离测试
- 在主题App embeds中打开Store Connector开关并Save
- 点击Publish to website按指引选定具体呈现位置
- 在真机智能手机与电脑浏览器中实际测试操作体验
前往Shopify App Store安装Navi+ Tab Bar & Mega Menu，无需编写主题代码即可轻松打造卓越导航。
FAQ
Do I need to edit theme code to show a Navi+ menu?
不需要。您完全不需要编辑主题的Liquid代码或任何模版文件。只需在Shopify主题编辑器中开启Store Connector应用嵌入，并在应用中点击发布即可生效。根据官方说明，该嵌入步骤每个网站仅需执行一次。
Can I use my existing Shopify menu with Navi+?
可以。Navi+可以连接你现有的Shopify菜单。连接后，请检查每个嵌套层级，确认分类和链接的显示符合你的预期。
Should I start from a template or with AI?
如果您已有心仪的版式，选用模版能最快上手。AI工具能根据文字描述秒级建立框架骨架，但具体商品链接、图素与配色仍需由您手动核对补充。
How many levels can a Navi+ menu have?
在Business商业方案中，菜单深度最多支持三级。相比之下，Shopify原生导航系统仅支持在主菜单项下展开最多两层下拉子菜单。
How do I turn a Navi+ menu off?
您可以在Navi+控制台随时将任意菜单的状态拨至Off以暂停呈现。若要全盘停用主题上的所有Navi+菜单，直接在主题编辑器的App embeds中关闭Store Connector并保存即可。
Why is my Navi+ menu not showing?
最常见的原因是Store Connector开启在未发布的草稿主题上，或者主题编辑器修改后未点击保存。如果在近期更换了主题，也需要在新主题中重新开启该应用嵌入。
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。