在 Shopify 上创建包含主页、商品目录和关于我们链接的导航菜单栏（支持电脑与移动端）
新开网店时，最初的导航菜单仅需三个精挑细选的核心链接 —— 主页、商品目录与关于我们。只需在 Shopify 后台的“内容 > 菜单”中创建一次，它就能同时呈现在电脑端标头和手机端侧滑抽屉中；若在手机端将其固定为底部标签栏，还能让顾客随时看到并点击这些链接。
- 三大必备链接：主页直通店铺根目录，商品目录集中展示在售货品，关于我们建立品牌信任。
- 双端自适应展示：同一份菜单数据可同时服务于电脑端水平顶部栏和手机端折叠抽屉。
- 移动端随手触达：底部固定标签栏让这三个核心链接在手机上始终可见，点一下即可到达。
快速解答：如何创建包含主页、商品目录和关于我们的菜单栏
在 在线商店 > 页面 中创建并发布“关于我们”页面，然后前往 内容 > 菜单 打开主菜单，添加三个项目：主页（链接类型为“主页”）、商品目录（指向 /collections/all 或特定系列）、关于我们（指向刚刚发布的页面）。保存后，你的主题会自动在电脑端标头和手机抽屉菜单中呈现这些内容。你也可以为手机额外添加标签栏。
5 步实施流程：
- 创建关于我们页面：在 在线商店 > 页面 中编写内容并将可见性设为可见。
- 打开内容 > 菜单：在 Shopify 后台选中你的主导航菜单。
- 添加三大核心链接：主页（链接类型选择 主页）、商品目录（
/collections/all或分类）和关于我们（对应页面）。 - 保存菜单配置：在主题自定义编辑器中确认店铺标头使用的是该菜单。
- 在移动端进行实机测试：检查手机抽屉展开效果，并按需添加常驻底部的快捷标签栏。
主页、商品目录和关于我们菜单栏的核心构成
开启线上业务之初，并不需要构建层级庞杂的目录树。精炼的三链接菜单能够为初访者提供最直接清晰的行动路径，避免信息过载：
- 主页（Home）： 作为全店恒定基准锚点，让访客在浏览任何深层页面时都能一键返回起点。
- 商品目录（Catalog）： 整个店铺的核心货架，顾客在此浏览各类产品、筛选系列并加入购物车。
- 关于我们（About）： 讲述品牌初衷、生产标准与售后保障，为初次光顾的消费者提供坚实的信任理由。
初建菜单维持三项设置能够确保各类设备上的最佳可读性。来自 Nielsen Norman Group（NN/g）的用户可用性研究表明，顶层常驻可见的导航项在保持 4 至 5 个时体验最佳。采用三个核心链接不仅保证了在小屏手机上字体完整展示，还为今后扩展“联系我们”或“常见问题”预留了足够的视觉空间。
第 1 步：创建关于我们页面并确定商品目录链接目标
在后台组装菜单结构之前，必须预先准备好目标页面，使每个菜单条目都能顺利跳转至已上线的实质内容。
创建关于我们页面
在 Shopify 后台，依次点击 在线商店 > 页面，然后点击 添加页面。页面标题填写为 关于我们。编写一段简短精悍的品牌介绍，阐明你的经营初心、商品品质或服务承诺。Shopify 官方页面文档 指明独立页面适用于存放不常变动的基础信息，而 Shopify 关于我们指南 则强调了它在转化首单客户中的信任背书价值。将可见性状态选为 可见 并点击保存。请注意，创建了 About page 并不意味着它会自动现身在导航栏上，仍需在后续步骤中手动加入菜单。
确定商品目录的链接目标
决定点击 Catalog link 后将顾客引流至何处：
| 目标方案 | 后台选择方式 | 适用业务场景 |
|---|---|---|
全店商品列表 (/collections/all) |
填写 your-store.com/collections/all |
默认按字母顺序列出店内所有处于可见状态的产品。 |
| 特定产品系列 | 在系列列表中挑选指定集合 | 适用于主推热销爆款、特定当季分类或精品展示。 |
根据 Shopify 帮助中心关于目录页的说明，每家 Shopify 独立站均原生自带 /collections/all 路径。若需修改默认的字母顺序，可新建一个别名（handle）为 all 的系列；亦可直接将菜单链接绑定至某一具体系列。
第 2 步：在“内容 > 菜单”中构建导航结构
目标页面发布后，即可在后台正式搭建菜单。
图1：概念示意图（Concept illustration）— 第 2 步：在“内容 > 菜单”中构建导航结构
添加主页链接
在 内容 > 菜单 界面中，点击打开主菜单，随后点击 添加菜单项。名称输入 主页。在 链接 区域选择 主页 类型。选择 Home page link 原生类型后，Shopify 会自动将路径锁定在店铺主域名，无需手输网址。
添加商品目录链接
再次点击 添加菜单项，输入名称 商品目录（或 在线商城）。在 链接 下拉列表中选择某个系列，或使用全部商品页面 /collections/all。Shopify 菜单编辑官方文档 明确警告：手动粘贴原始静态网址而非在系统列表中挑选对象，可能导致链接中断并引发 404 错误。只要目标出现在列表中，就请从列表里选择。
添加关于我们链接
点击 添加菜单项，输入名称 关于我们。在 链接 项下点开 页面 分类，选取在第 1 步中创建好的页面。
调整排序并保存
在后台列表中检查核对这三条项目：
| 链接名称 | 链接类型 | 目标地址 | 备注 |
|---|---|---|---|
| 主页 | 主页 | 店铺根目录 (/) |
系统自动分配。 |
| 商品目录 | 产品系列 / URL | /collections/all 或指定系列 |
呈现全部或精选在售货品。 |
| 关于我们 | 页面 | 已发布的“关于我们”页面 | 展示品牌理念与资质。 |
鼠标拖动每行最左侧的定位圆点，调整排列次序为：主页、商品目录、关于我们。实际网店前端将严格按此先后次序渲染。Shopify 限制未保存的操作上限为 200 步，因此编排完毕后请及时点击 保存菜单。如果希望在名称中增添视觉趣味，亦可直接在文本框内键入 Emoji 表情。
第 3 步：在电脑端店铺标头中显示菜单
后台存储了菜单并不等于前端页面会自动展示，菜单的挂载位置由当前所用主题的设置决定。
如需将该菜单接入电脑端顶部，进入 在线商店 > 模板，点击当前启用主题上的 自定义 按钮。在左侧组件栏中选中 标头（Header）。在其中选择刚才整理好的菜单。设置项名称因主题而异，请在该区块中查找菜单选项。
在电脑大屏下，务必确认你的主题是将文字链接水平横向展开，而非折叠在图标内。Nielsen Norman Group 关于桌面端导航的研究报告证实，大屏幕上完全可见的导航项能带来远优于隐藏菜单的内容发现效率。请确保你的 Desktop header menu 清晰无误地平铺展示这三个入口。
相同菜单在移动设备上的呈现形态
桌面显示屏拥有充裕的水平横向跨度，但智能手机受限于屏幕宽度，两者的交互逻辑截然不同。
图2：概念示意图（Concept illustration）— 相同菜单在移动设备上的呈现形态
绝大多数 Shopify 标准主题在检测到手机访问时，会自动收起顶部标头，把所有链接归整进通过汉堡图标唤起的侧滑抽屉（Menu drawer）中。NN/g 的移动端人机交互研究指出，隐藏在菜单层级之后的内容往往面临点击率下滑的风险。鉴于只有三个菜单项，如果能让顾客免去“先点汉堡按钮唤出抽屉”的多余步骤，直接在界面上点选，将大幅提升手机端的浏览流畅度。
如果你希望在手机端与电脑端展示截然不同的菜单体系，可进一步阅读我们的专项指南：如何在电脑端与手机端显示不同菜单。
| 导航布局方式 | 是否常驻可见？ | 是否需要额外点击开启？ | 最适配场景 |
|---|---|---|---|
| Desktop header menu | 是（电脑端） | 否 | 电脑宽屏显示。 |
| Mobile Menu drawer | 否（藏于汉堡图标内） | 是（需先点按展开） | 层级繁多、链接庞杂的长列表。 |
| Mobile tab bar | 是（手机底部固定） | 否（一次点击直达） | 少数高频核心访问目的地。 |
第 4 步：为移动端添加底部标签栏
如果你的许多顾客用手机浏览，汉堡按钮会把链接藏起来，直到他们点开。
Bottom tab bar 会把最核心的入口固定在屏幕底部。NN/g 的移动导航研究指出，标签栏是常驻的：无论用户是否滚动页面，它始终可见。
大部分原生 Shopify 主题默认并未集成底部标签栏，通常需要借助导航类 App 或定制代码。在设置底部栏时，请务必复用完全相同的三个链接（主页、商品目录、关于我们）及一致的目标网址。保持双端逻辑对齐能够避免消费者跨设备浏览时产生违和与混淆。
添加图标并在各类屏幕尺寸上进行全面测试
引入图形化图标能加速手指识别效率，但在界面排版时必须兼顾易用性原则。
尽管后台标题支持输入 Emoji，但专业矢量 SVG 图标通常依赖主题高级配置或专门的导航应用程序。Nielsen Norman Group 特别提醒应坚持使用 Icon with label（图标配以文字说明）的设计原则，避免使用无文字解释的抽象符号造成理解歧义。若使用专用应用，可参考教程学习如何 为每个菜单项单独配置图标。
此外，必须保障触控热区符合无障碍规范。W3C WCAG 2.2 成功准则 2.5.8 明确规定触控目标尺寸不得低于 24×24 CSS 像素（有部分例外）。
在正式上线前务必逐项完成以下屏幕验证：
- 桌面宽屏显示： 检查三个链接横向居中或靠左对齐，不存在意外折行。
- 平板电脑尺寸： 确认横向显示与汉堡图标折叠之间的断点（Breakpoint）平滑过渡。
- 手机竖屏模式： 验证侧滑抽屉展开顺滑，能完整呈现这三个菜单项。
- 手机横屏模式： 确认底部导航或抽屉没有侵占过多的商品展示纵向高度。
- 实际跳转验证： 逐一点击每一个链接，确认无 404 或死循环跳转。
常见问题与排错方法
如遇到菜单表现异常，请结合下文解决方案以及我们的 修复导航菜单损坏链接指南 进行排查：
点击链接显示 404 页面
若点击商品目录或关于我们提示 404，极可能是手动输入 URL 时拼写有误。请回到 内容 > 菜单，利用 Shopify 内置下拉菜单重新点选目标资源。
关于我们页面在店铺中未出现
后台已添加页面但前台毫无踪影。请牢记在 在线商店 > 页面 里新建内容并不等于自动加入导航。需在 内容 > 菜单 中手动新增该项目，并确保该页面处于 可见 发布状态。
商品目录展示顺序不符合预期
能够打开目录，但货品排列颠倒。Shopify 默认的 /collections/all 是依字母顺序排序的。请在后台创建一个 handle 名为 all 的系列。
店铺标头未同步最新菜单修改
后台点击了保存，网店前端依然呈现旧版导航。进入 在线商店 > 模板 > 自定义，点开 标头 检查所绑定的菜单对象是否为你刚才修改的那一份。
点击父级菜单无法进入页面
若在商品目录下方嵌套了子分类，点击父级商品目录却无法打开页面，这是现代主题的通用设计规则。当前大部分商业主题会将含下拉项的父级元素默认为展开开关，而非可导航链接。
权衡考量：何时三链接菜单不再满足需求
三链接菜单是起步阶段的黄金组合，但随着业务体量扩张，该架构也将面临演进瓶颈。
突破三链接的局限
当商品品类扩充为多个大类与子分类时，单一的商品目录按钮难以承载细分筛选需求。此时应当适时 在商品目录项下增加多级子菜单。Shopify 原生菜单支持最多 2 层的嵌套下拉深度。针对电脑端的大型货品库，你还可以 将商品目录改造为超级菜单（Mega Menu），按多列栅格陈列细分类目并搭配当季促销图。
你可以观看 Shopify Academy 官方制作的下拉层级配置指导视频：
手机底部标签栏的天然限制
底部标签栏虽能带来极致的单手操作便捷度，但 NN/g 的可用性报告强调它仅适用于选项有限的轻巧架构。如果塞入超过 4 至 5 项，标签栏会变得拥挤。同时，底部常驻条会永久占据一部分宝贵的屏幕垂直空间。若店铺的用户群体以电脑端下单为主，则无需急于装载移动底部栏。
Navi+ 的价值与应用场景
在 Shopify 后台搭建基础的主页、目录与关于我们非常便捷，但原生主题在精细化的移动端体验把控上往往受到制约。
如果你希望在每部手机底部牢牢吸附主页、目录与关于我们，并为每个按键配齐图标和文字，Navi+ Tab Bar 能在无需改动任何主题 Liquid 代码的前提下轻松实现。你依然保留原有 Shopify 主菜单负责电脑大屏标头，同时在手机端把同样的三个链接固定在底部。
伴随你的店铺规模扩大，Navi+ 提供平滑进阶方案：
- Navi+ Mobile Menu： 深度定制符合自身品牌美学的移动侧滑抽屉，并与 Shopify 后台结构一键同步。
- Navi+ Desktop Mega Menu： 将庞大的商品矩阵梳理为多列超级菜单，配以宣传横幅与营销卡片（深度支持多达 3 级导航）。
如需评估何种结构最契合你的经营类目，请参考指南：如何为你的 Shopify 店铺选择最适配的菜单形态。
实操检查清单
在面向公网发布全新的三链接菜单之前，请按此核对清单逐条确认：
- 发布关于我们页面： 在 在线商店 > 页面 确认创建完毕且状态为“可见”。
- 确定目录目标： 选定使用默认
/collections/all抑或是配置了 handle 为all的专属系列。 - 打开菜单管理工具： 进入 内容 > 菜单 选中主菜单对象。
- 添加主页： 选取原生 主页 类型由系统自动锁定域名根路径。
- 添加商品目录： 从系统系列列表中直接点选目录所指目标。
- 添加关于我们： 从内置页面清单中准确勾选对应文章。
- 拖拽排序并保存： 调整为指定顺序并点击 保存菜单。
- 关联主题标头： 进入主题编辑器核验标头区域绑定的菜单名称。
- 手机抽屉验收： 在真机上调出侧滑抽屉检查显示效果。
- （可选）启用底部标签栏： 固定 3 个带图文标签的快捷按钮于手机底部。
- 全流程真机验链： 逐一在双端点击各链接，保证加载通畅无报错。
常见疑问解答（FAQ）
商品目录链接应当指向哪里？
Shopify 店铺系统自带 /collections/all 网址，默认按字母升序列出所有上架商品。若想调整排序方式，可在后台建一个别名（handle）为 all 的系列，或直接指向精选的特定产品系列。
为什么在后台建好了页面，菜单栏上却没有出现？
在 在线商店 > 页面 创建内容不会自动关联到导航条上。必须进入 内容 > 菜单 编辑主菜单，手动将该发布页面作为菜单项加入。
这一份菜单会自动在手机端生效吗？
是的，绝大部分主题都会将电脑标头中的菜单自动同步进手机端的折叠抽屉（汉堡菜单）内。因展示细节取决于所用主题，建议在手机上实际预览。
制作屏幕底部常驻标签栏必须安装应用吗？
Shopify 原生官方模板仅配备顶部标头和折叠抽屉，通常不具备底部常驻吸底栏功能。实现这一效果一般需要安装应用或定制编写 Liquid 模板代码，且该形态适合少量核心高频链接。
可以在菜单项名称里加入图标吗？
你可以在后台文本输入框中直接敲入 Emoji 表情。若需要专业的矢量 SVG 图像，则需要依托主题功能支持或安装第三方菜单插件，且建议始终保留清晰的文字标注。
为什么点击菜单链接会遭遇 404 错误？
手动粘贴网址而非通过下拉列表挑选目标对象，容易在日后修改页面别名或系列路径时造成连接断裂。使用 Shopify 官方下拉选择器绑定资源可确保持久稳定。
引用与参考资料
- Shopify Help Center: Editing menus
- Shopify Help Center: Menus and links
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Add and edit pages
- Shopify Help Center: Change catalog page
- Shopify Help Center: About us page
- Nielsen Norman Group: Mobile navigation patterns
- Nielsen Norman Group: Visible navigation on mobile
- Nielsen Norman Group: Desktop navigation not hamburger
- Nielsen Norman Group: Hamburger menus and discoverability
- Nielsen Norman Group: Icon usability
- W3C: WCAG 2.2 Target Size (Minimum)
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。