Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接 封面图

Shopify 第 12 课:Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接

摘要

从主菜单、下拉菜单到页脚链接,按 Shopify 后台路径说明导航怎么搭,避免分类混乱和关键页面找不到。

导航不是把所有页面都放到顶部,而是帮客户更快找到产品、政策、联系入口和下一步行动。本文按 Shopify 后台当前常见路径,说明主菜单、下拉菜单、页脚菜单和前台检查怎么做。

先想清楚菜单要解决什么问题

新店导航先保持简单。客户进入网站后,通常只需要快速回答四个问题:

问题 菜单应该提供的入口
你卖什么 主品类集合、全部产品
有什么新内容 新品、热卖、折扣或活动集合
这家店可信吗 关于我们、联系我们、FAQ
购买前后怎么处理 配送政策、退款政策、隐私政策、服务条款
Shopify 主菜单和页脚菜单的分工
主菜单负责购物路径,页脚菜单负责信任和售后信息。新店先把这两个位置分清楚,再考虑复杂下拉和 Mega Menu。

如果你还没有创建 Shopify 店铺,可以通过 Shopi8 的 Shopify 注册入口 打开当前注册页面。这个链接可能会让 Shopi8 获得推荐佣金,但不会改变你在 Shopify 页面看到的官方价格和注册流程。

新店推荐的菜单结构

主菜单建议控制在 5-7 个一级入口。超过这个数量,桌面端会拥挤,移动端也会变难点。

位置 推荐内容 不建议放
主菜单 Home、Shop、New Arrivals、Sale、Blog、About 所有政策页、太多细分类、内部管理词
下拉菜单 主品类集合、场景集合、价格段集合 过深层级、只有 1 个产品的分类
页脚菜单 About、Contact、FAQ、Shipping、Returns、Privacy、Terms 多层下拉、强促销入口

一个服装新店可以这样做:

菜单 示例
Main menu Home / Shop / New Arrivals / Sale / Blog / About
Shop 下拉 All Products / T-Shirts / Dresses / Accessories
Footer menu About us / Contact / FAQ / Shipping policy / Refund policy / Privacy policy / Terms of service

不要为了显得内容丰富,把空集合也放进导航。导航链接出去的页面如果没有产品、没有说明、没有清晰标题,会比不放更伤信任。

设置主导航菜单的完整步骤

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:设置主导航菜单的完整步骤
真实页面参考:Content / Menus 导航菜单。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

Shopify 后台现在通常从 Content > Menus 管理菜单。部分旧教程或旧后台界面可能还会写 Online Store > Navigation,两者说的是同一类菜单管理入口。

操作前先准备好要链接的目标页面。比如你要把 T-Shirts 放进菜单,最好先创建对应集合;要放 About us,就先创建页面。直接粘 URL 也能用,但店内已有页面优先从后台列表里选择,后面页面 URL 改动时更不容易出现 404。

步骤:

  1. 进入 Shopify admin。
  2. 打开 Content > Menus
  3. 点击 Main menu
  4. 确认默认项目是否保留,例如 HomeCatalog
  5. 开始新增、编辑或排序菜单项。

保存前先检查这三件事:

  • 菜单名称是不是客户能看懂的词。
  • 链接目标是不是具体页面、集合、产品或博客,而不是错误 URL。
  • 这个入口是否真的需要放在主菜单,而不是页脚或首页模块里。

添加菜单项

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:添加菜单项
真实页面参考:Content / Menus 导航菜单。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

添加集合、页面、博客文章、政策页、搜索页和外部链接,都从 Add menu item 开始。

操作步骤:

  1. Main menu 页面点击 Add menu item
  2. Name 输入前台显示名称,例如 T-ShirtsAbout us
  3. 点击 Search or paste a link
  4. 如果是店内资源,选择对应类型,例如 CollectionsPagesBlogsPolicies
  5. 选择具体目标。
  6. 点击 Add
  7. 点击 Save menu

常见写法:

目标 推荐方式
产品分类 选择 Collections 里的具体集合
关于我们 选择 Pages 里的 About us
博客 选择 Blogs 或具体 Blog posts
政策页 选择 Policies 里的对应政策
站外链接 粘贴完整 URL,等下拉结果出现后选中目标
邮箱链接 使用 mailto:support@example.com

菜单名称可以和页面标题不同。比如集合标题是 Organic Cotton T-Shirts,菜单里可以写更短的 T-Shirts。前提是客户点进去不会觉得不匹配。

创建下拉菜单(子菜单)

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:创建下拉菜单(子菜单)
真实页面参考:Content / Menus 导航菜单。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

下拉菜单适合把同一类入口收在一起。比如一级菜单叫 Shop,下面放 All ProductsT-ShirtsDressesAccessories

操作步骤:

  1. 先创建一级菜单项,例如 Shop
  2. 如果 Shop 只是一个分组标题,可以把链接设置为 #;如果它也要能点击,就链接到 All Products 或核心集合。
  3. 点击 Add menu item,添加子菜单项。
  4. 把子菜单项拖到 Shop 下方,并向右缩进,形成嵌套关系。
  5. 重复添加其他子项。
  6. 点击 Save menu

建议不要做太深:

层级 是否推荐 说明
一级菜单 推荐 Home、Shop、Blog、About
二级下拉 推荐 T-Shirts、Dresses、Accessories
三级下拉 谨慎 大店可以测试,小店通常不需要
四级以上 不建议 移动端很难使用,也容易被主题限制

如果下拉不显示,先检查三件事:菜单项是否真的缩进、主题 Header 是否使用了这个菜单、当前主题是否支持这个层级。

调整菜单项顺序

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:调整菜单项顺序
真实页面参考:Content / Menus 导航菜单。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

菜单顺序会影响点击。一般把最重要的购物入口放前面,把信任和内容入口放后面。

推荐顺序:

  1. Home。
  2. Shop 或核心品类。
  3. New Arrivals。
  4. Sale 或活动集合。
  5. Blog。
  6. About。

在后台可以按住菜单项旁边的拖拽图标调整顺序。调整后必须点击 Save menu,再打开前台确认顺序是否生效。

如果一次调整很多项,建议分批保存。后台对未保存的菜单修改有数量限制,改很多次还不保存时,可能会被要求先保存再继续。

设置页脚菜单

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:设置页脚菜单
真实页面参考:Content / Menus 导航菜单。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

页脚菜单的任务不是卖货,而是补足信任信息和售后信息。客户下单前经常会找配送、退款、联系方式和隐私政策,这些入口更适合放在页脚。

推荐页脚结构:

分组 页面
Company About us、Contact us、Blog
Help FAQ、Shipping policy、Refund policy
Legal Privacy policy、Terms of service、Cookie policy

操作步骤:

  1. 进入 Content > Menus
  2. 点击 Footer menu,或创建一个新的页脚菜单。
  3. 添加 About、Contact、FAQ 和政策页。
  4. 保存菜单。
  5. 进入 Online Store > Themes > Customize
  6. 打开 Footer 区域,确认主题正在使用正确菜单。

多数主题的页脚更适合展示一级链接或多个菜单块。不要依赖页脚下拉来承载重要信息;如果需要分组,优先在主题 Footer 里添加多个菜单块。

让主题真正显示你编辑的菜单

很多人后台菜单已经改好了,但前台没变化,原因是主题 Header 或 Footer 没有选择对应菜单。

检查路径:

  1. 打开 Online Store > Themes
  2. 点击当前主题的 Customize
  3. 进入 Header,查看 Main menu 选择的是不是你刚编辑的菜单。
  4. 进入 Footer,查看 Footer menu 或菜单块选择是否正确。
  5. 保存主题设置。
  6. 打开前台刷新检查。

如果你安装了 Mega Menu 或导航类应用,应用可能会覆盖主题自带菜单。遇到这种情况,要去应用里改菜单,或者先停用应用测试默认菜单是否恢复。

前台和移动端检查

Shopify 导航菜单设置:主菜单、下拉菜单和页脚链接:前台和移动端检查
真实页面参考:店铺前台预览页面。对照本步骤确认当前官方路径和关键概念,实际操作以你的店铺后台、本地终端或代码仓库为准。

后台保存只是第一步,真正的检查要在前台完成。

至少检查:

  • 桌面端主菜单是否换行、挤压或遮挡 Logo。
  • 下拉菜单能否正常展开和点击。
  • 移动端汉堡菜单是否能展开。
  • 子菜单在手机上是否容易点。
  • 每个链接是否打开正确页面。
  • 政策页和联系页是否能从页脚找到。
  • 当前页面是否有高亮或面包屑等方向提示。
  • 搜索、购物车、账户图标是否没有被菜单挤掉。

最容易出错的是链接指向错误。尤其是集合、页面、博客文章和政策页,建议每个都点一次,不要只看后台名称。

常见问题

Shopify 菜单在哪里设置?

通常在 Shopify admin 的 Content > Menus。部分旧教程会写 Online Store > Navigation,本质都是管理在线商店菜单。最终是否显示,还要看主题 Header 和 Footer 是否选择了这个菜单。

主菜单应该放几个项目?

新店建议 5-7 个一级项目。更细的分类放到 Shop 下拉里,政策页和联系入口放页脚。主菜单越多,客户越难快速判断下一步点哪里。

下拉菜单的一级标题要不要能点击?

看使用场景。如果一级标题是 Shop,可以链接到 All Products。如果它只是分组标题,可以用 #,让客户主要点击下面的子菜单。无论哪种,都要在桌面和手机上测试。

为什么后台改了菜单,前台没有变化?

优先检查主题设置。进入 Online Store > Themes > Customize,看 Header 或 Footer 使用的是不是你编辑的菜单。其次检查是否有导航应用覆盖菜单,再检查浏览器缓存和主题代码自定义。

页脚菜单可以做下拉吗?

不要把重要内容依赖在页脚下拉里。不同主题对页脚菜单展示方式不同,新店更稳的做法是用一级链接或多个 Footer 菜单块,把公司信息、帮助信息和法律政策分开。

菜单链接可以直接粘 URL 吗?

可以,但店内已有资源优先从后台列表里选择。比如集合、页面、产品、博客和政策页,直接选择对应对象更稳。粘贴 URL 时,要等下拉结果出现并选中目标,再保存。

导航会影响 SEO 吗?

会。导航是站内链接的一部分,会影响搜索引擎和 AI 搜索理解页面关系。更重要的是,清楚的导航能降低跳出和迷路感。不要为了 SEO 堆关键词菜单,先让客户能顺利找到内容。

下一步

下一篇学习支付方式设置:/blogs/shopify-beginner/shopify-payment-methods-setup-guide

最后更新:2026-07-08
阅读时间:9 分钟
难度级别:基础
前置要求:已创建主要集合、页面和政策页

0 comments

Leave a comment

Please note, comments need to be approved before they are published.

📢 Share this article

Any other questions?

Our professional team is ready to answer your questions.

Was this article helpful to me?

This article is suitable for all merchants and developers who want to learn about Shopify. Whether you are a beginner just starting out with Shopify or an advanced user looking to improve your skills, you will gain practical knowledge and techniques from it. The methods in this article have all been tested and proven in practice and can be directly applied to your projects.

How can we apply the methods described in the article?

Each step in this article comes with detailed instructions and code examples, which you can directly copy and use. It's recommended to try it in a test environment first to confirm the results before applying it to the production site. If you encounter any problems during implementation, feel free to leave a comment or join our discussion group for help; we and our community members will be happy to assist you.

Can the code in the article be used directly?

Yes! All the code examples we provide have been tested and can be used directly in your Shopify theme. Remember to adjust the parameters and styles according to your actual needs. If you encounter any problems, feel free to leave a message for discussion.

How often will new content be updated?

We publish 2-3 high-quality Shopify tutorials and operational tips every week. Follow our WeChat official account or join our discussion group to get the latest content and exclusive resources first.

Can I get help if I encounter a problem?

Of course! You can leave a comment below the article or join our WeChat group to connect with 1000+ Shopify merchants and developers. We'll get back to you as soon as possible.

Ready to get started?

Follow us to get the latest Shopify tutorials and operational tips.

Join the community Contact Us