如果你在经营一家 Shopify 店铺，你一定能感受到：菜单悄悄地决定着多少销售。访客打开首页，扫一眼导航，几秒内就决定继续浏览——还是直接离开。然而绝大多数 Shopify 店铺仍然在使用主题自带的默认菜单：为桌面端设计的一串扁平链接，被勉强塞进移动端，和成千上万家其他店铺长得一模一样。
Navi+ AI Menu Builder 是一套专门为 Shopify 店铺打造的完整导航工具集。它不只提供一种菜单样式，而是一整套体系：移动端的 底部导航栏（Tab Bar）、桌面端的 Mega Menu、需要层级时的 侧滑菜单（Slide Menu）、用于促销的 FAB 浮动按钮，以及面向大型品类的 宫格菜单（Grid Menu）。所有菜单从同一个控制台统一管理。无需代码、无需改主题，更不需要请开发者。
本指南将完整介绍 Navi+ 在 Shopify 上能做的一切——它替换了什么、如何安装，以及为何已经有超过五千家 Shopify 商家在使用它。
为什么 Shopify 默认菜单正在让你流失订单
Shopify 自带的菜单设计于电商流量主要来自桌面端的年代。如今，大约 70% 的 Shopify 流量来自移动端——可默认菜单的基本模式并没有发生实质改变：
- 没有底部导航。你日常用的每一个 App——Amazon、ASOS、eBay、Instagram——都把核心操作锚定在屏幕底部的固定栏。而 Shopify 默认把导航钉在屏幕顶部，6.7 寸的手机上大拇指根本舒服地够不到。
- 移动端只有汉堡菜单。访客点开，看到一长串列表，滚动浏览，再次点击。要看到商品需要三四次点击，而每一次点击都是潜在的流失机会。
- 样式被主题锁死。想要更大的触控区域、自定义图标或多栏布局？你得改 Liquid 模板。想 A/B 测试新样式？更难。
- 没有给促销留位置。限时促销开始了，菜单里却显示不出来。某个品类需要视觉重点，菜单又放不下图片。每一个销售时机就这样从导航旁边溜走。
这些不是审美问题，而是实打实的转化漏洞，每一次访问都在悄悄消耗收入。
Navi+ 在 Shopify 上的菜单体系
Navi+ 用一整套导航体系替代了默认菜单。每个组件都可以独立使用，也可以组合搭配。
Tab Bar——移动端底部导航
屏幕底部的一条固定栏，最多支持 5 个入口：首页、分类、搜索、购物车、账户——或任何你想要的内容。支持自定义图标、激活态高亮、购物车数量角标，内置图标库包含 4,000+ 个 Google Material Symbols 图标。对绝大多数从默认主题切换过来的 Shopify 店铺来说，仅此一个组件就足以带来最显著的体验提升。
Mega Menu——桌面端下拉菜单
为大型品类设计的多列、图文并茂的下拉菜单。可添加标题、子链接、促销 Banner、精选商品 Block 和 CTA 按钮。把扁平的"Shop"链接替换为一个能预览品类概览的入口——访客看到更多内容、点得更深，也更快到达商品页。
侧滑 / 汉堡菜单（Slide Menu）
当移动端需要展开层级——多级品类、语言切换、账户链接——一个简洁的侧滑面板就能搞定，不用再把菜单嵌套进菜单。可从左侧或右侧滑出，支持全屏或半屏，过渡动画顺滑自然。
FAB——浮动操作按钮
一个锚定在屏幕角落的浮动按钮。适合用于促销（"限时秒杀 →"）、高优先级动作（"WhatsApp 下单"），或作为快速调出菜单的入口。颜色、图标、文字和点击行为都可自定义。
Grid Menu——宫格菜单
为品类丰富的店铺设计的瓦片式菜单。把 9 个或 12 个大尺寸品类瓦片排在一屏，远比让访客滚动一长串列表清晰得多。食品、服饰、电子产品等视觉化品类的店铺尤其常用这种模式。
抽屉与默认组件接管
在 Business 及以上方案中，Navi+ 还可以接管主题原有的搜索抽屉、购物车抽屉和默认菜单——保留原触发按钮，但 UI 完全替换为你自定义的版本。购物车 / 菜单 / 搜索图标以及购物车数量角标也都可以直接替换。
移动端与桌面端独立配置
Navi+ 最被低估的一点：每一种菜单都可以为移动端和桌面端分别配置。移动端用 Tab Bar，桌面端用 Mega Menu——彼此完全独立，而且根本不用写媒体查询。
为 Shopify 商城原生打造，而非外挂
Navi+ 不是一个恰好能嵌入 Shopify 的通用挂件，而是围绕 Shopify 主题的真实工作方式构建的：
- 独立于主题。同样适用于 Dawn、Refresh、Sense、Studio、Origin、Crave、Symmetry、Impulse、Prestige、Empire、Motion、Stiletto 以及任何自定义主题。菜单存在于主题的 Liquid 模板之外——所以主题更新、主题切换、节日改版都不会影响你的菜单。
- 无需改主题。从 Shopify App Store 安装，在 Online Store 2.0 中启用 App Embed Block，Navi+ 就会自动注入。卸载也只是一个开关。
- 纯 HTML5 + CSS3，零 JS 依赖。不会与主题的脚本冲突，主题更新后也不会出现行为异常，更不会与其他应用产生兼容问题。
- 默认移动优先。每个模板都内置了适配移动端的间距、字号和点击区域——再向上适配到桌面端，而不是反过来。
- 编辑器独立于 Shopify 后台。完整控制台运行在独立的应用
dash.naviplus.app上——速度快、不受 Shopify 后台拖累，任何设备都能访问。
性能与稳定性
一个出现在每个店铺每个页面上的菜单，必须足够快。Navi+ 正是为此打造的：
- 全球 CDN。覆盖六大洲的边缘节点。Elite 方案下，Cloudflare + BunnyCDN 双 CDN 互备。
- Elite 提供 99.99% SLA，Business 与 Starter 提供 99.00% SLA。
- 对 Core Web Vitals 友好。没有阻塞渲染的脚本、没有布局偏移、不占用主线程的 JS 任务。
- 轻量。每个菜单的运行时只有几 KB gzip 后体积，并在首屏渲染后才加载。
Shopify 安装步骤
- 打开 Shopify App Store，搜索"Navi+ AI Menu Builder"，点击 Add app。
- 在 Shopify 后台批准安装。此时尚无任何费用——Starter 方案永久免费。
- 在应用页面点击 Open dashboard，进入
dash.naviplus.app。 - 选择一个模板，选择菜单类型（Tab Bar、Mega Menu、Slide、FAB、Grid），自定义图标和链接，然后点击 Publish。
- 你的商城会即时更新——无需重载主题、无需部署、无需清缓存。
大多数店铺从安装到菜单上线只需不到五分钟。
Shopify 上的价格方案
与其他平台一致——相同功能，相同价格。
| 方案 | 价格 | 适合 |
|---|---|---|
| Starter | 永久免费 | 单个菜单、小型店铺、试用 Navi+ |
| Business | $6.25 / 月 | 成长期店铺，多菜单、多语言、图片上传、数据分析 |
| Elite | $10 / 月 | 大型品类、无限菜单、完整 SEO 支持、高级 CDN、专属服务 |
两个付费方案都提供 7 天免费试用——无需信用卡，全部功能开放。
Shopify 商家用了 Navi+ 得到了什么
- Shopify App Store 评分 4.9 星
- 目前已有 5,000+ 家店铺在使用 Navi+
- 一次安装通常替换掉 2–3 个独立应用：底部栏应用、Mega Menu 应用，有时还包括浮动按钮或聊天气泡应用
正是这种"替代多个应用"的能力，让 Navi+ 通常比它整合掉的那些应用加起来更便宜——而从"一堆小应用堆叠"迁移到"一个菜单工具集"，也成了我们看到的最常见升级路径之一。
常见问题
它会拖慢我的店铺吗？
不会。Navi+ 采用移动优先架构，不依赖任何外部 JavaScript 库，首屏渲染完成后才懒加载，并通过全球 CDN 分发。它不会引入阻塞渲染的脚本，设计上完全不影响 Core Web Vitals。
我需要懂代码吗？
不需要。整个控制台都是拖拽式操作，并提供模板起步。如果你想做更深入的自定义，也可以使用自定义 CSS、HTML 和 JavaScript，但大多数店铺从来用不到。
它能适配我的主题吗？
可以。Navi+ 存在于主题之外。它适用于每一款官方 Shopify 主题，也适用于自定义主题。主题更新或切换主题都不会影响它。
支持多语言吗？
支持——Business 和 Elite 方案。可与 Shopify Markets、Translate & Adapt 或任意翻译应用配合使用。每个菜单元素都能针对不同语言配置专属的文字和链接。
会和我的其他应用冲突吗？
不会。纯 HTML / CSS，没有全局 JS、没有 jQuery、没有第三方库依赖。每次发布前我们都会针对装机量最大的 Shopify 应用做兼容测试。
支持服务怎么样？
Starter 提供邮件支持，Business 提供 7×24 小时支持，Elite 提供专属服务（迁移菜单、配置布局、直接帮你修改 UI）。