入门70分钟第 9 课

Pages、Menus 与导航:把首页到结账的路径接起来

创建 About、Contact、FAQ 等页面,在 Content > Menus 建立主菜单、页脚和客户菜单,并正确处理链接、层级、移动端与 URL redirects。

9
当前进度
9/20 课时

作者与维护者

卫染风

发布日期

更新日期

最近复核

维护边界 结合 Shopify、Google 搜索、广告、数据分析与独立站运营流程复核。

课程进度
学习进度
9/20 课时
当前章节已解锁继续按顺序推进

第二阶段 · 商品与店铺结构

Pages、Menus 与导航:把首页到结账的路径接起来

建立核心页面,给主菜单、Footer 和 Customer menu 分工,处理 handles 与 redirects,并从移动端和键盘路径验收客户能否找到并完成关键动作。

本课怎么做才算完成

沿着 Online Store > Pages and Content > Menus 找到正确页面,再完成设置、保存、验证和记录。完成不是看过页面,而是能指出保存状态、验证结果和继续条件。

后台路径
Online Store > Pages and Content > Menus
本课产出
一张导航图、核心 Pages 清单、Main/Footer/Customer menus、handles/redirects 和移动端/键盘验收记录。
可以继续
主菜单能购物,Footer 能提供信任信息,Customer menu 能登录,旧 URL 可达,移动端和键盘路径可复核。
必须暂停
如果核心页面没有真实目标、关键入口 404、政策/Contact 找不到或移动端/键盘不可用,先暂停上线。

证据边界:后台菜单保存不证明主题使用该菜单、链接目标存在或客户从首页能完成路径;要从真实前台逐条回读。

这一课为什么要先做

导航不是把链接堆在一起,而是把购物、信任、账户和 checkout 的责任接起来。页面、菜单、handle、redirect 和主题位置任何一环错误,客户都会在最需要信息时断路。

开始前准备

  • 列出核心页面、真实集合、产品和政策 URL。
  • 画 Main、Footer、Customer menu 的职责草图。
  • 准备代表性移动设备和键盘路径。
Shopify Pages 页面列表和核心页面入口。
Online Store → Pages先建立 About、Contact、FAQ 等核心页面;每页要有客户任务、owner、状态和后续链接。

跟着英文后台一步一步做

每做完一步就刷新页面或从前台验证一次。后台显示已保存,不代表客户看到的结果一定正确。

1

创建核心 Pages

在 Online Store > Pages 建立 About、Contact、FAQ 等核心页面。每页写客户任务、负责团队、更新频率和下一步入口,不要用一页很长的文字代替所有信任内容。

做完后应该看到或拿到:得到有标题、正文、联系人/政策边界和下一步链接的核心页面。

怎样算完成:页面从前台可访问,内容与 Brand、Policies 和客服流程一致。

如果结果不对或入口没出现:页面入口或内容不对时,确认当前店铺和页面标题,回到完整 Pages section,不要在菜单里堆长文临时替代。

留下证据:记录页面 handle、状态、owner、前台 URL 和验证时间。

2

画主菜单和页脚职责

先画首页、集合、产品、About、Contact、FAQ、Policies 和 checkout 的入口关系。主菜单服务购物,Footer 服务信任和政策,Customer menu 服务账户;不要把所有链接塞进一个菜单。

做完后应该看到或拿到:得到每个菜单的职责、链接层级和不应出现的内部链接。

怎样算完成:客户可从首页找到购物入口、信任信息、客服和政策,不依赖浏览器后退。

如果结果不对或入口没出现:如果路径绕圈或重要页面找不到,回到客户任务和菜单职责重新合并,不要无限增加子菜单。

留下证据:保存导航草图、链接层级、菜单位置和一条完整前台路径。

3

在 Content > Menus 建主导航

把真实集合、产品、页面和首页入口加入 Main menu,检查每个链接的目标类型和保存结果。不要把计划中的 slug 当成已经存在的页面。

做完后应该看到或拿到:得到保存后的主导航和每条链接的实际目标。

怎样算完成:从首页点击主导航能到正确集合/页面,返回路径、移动端和键盘焦点正常。

如果结果不对或入口没出现:链接 404 或跳错时,检查 handle、locale、域名和 URL redirect,不要用首页链接掩盖目标缺失。

留下证据:记录链接文本、目标 URL、保存时间、移动端结果和键盘结果。

失败处理:如果新页面已创建但菜单仍是旧目标,重新读取保存后的菜单和前台 HTML,确认不是缓存或错误菜单位置。

4

建立 Footer 与 Customer menus

Footer 放政策、Contact、About、FAQ、配送/退货等信任入口,Customer menu 放账户相关路径。链接文本要让客户理解,不要暴露后台或内部工单。

做完后应该看到或拿到:得到独立的 Footer、Customer menu 和公开页面入口。

怎样算完成:客户能从页脚找到政策、联系和 FAQ,登录客户能找到账户,不出现内部链接。

如果结果不对或入口没出现:政策或 Contact 找不到时,检查主题实际使用的 Footer menu 和链接状态,不要只检查后台菜单名称。

留下证据:记录 Footer/Customer menu 位置、公开路径、政策链接和验证时间。

5

检查 handles 和 URL redirects

页面或集合改名时确认 handle、canonical、旧 URL 和 redirect。不要为了让新菜单能开就删掉旧路径,也不要把不同语言/市场全部指向错误首页。

做完后应该看到或拿到:得到新旧 URL、redirect、canonical 和语言/市场路径的对应。

怎样算完成:旧链接可到新目标,内部链接无 404,canonical 与公开 URL 一致。

如果结果不对或入口没出现:出现 404 或 redirect chain 时,逐条检查 handle 和来源,不要新增无限重定向。

留下证据:保存旧 URL、目标 URL、状态码/返回、canonical 和复测时间。

6

完成移动端和键盘验收

从首页到集合、商品、政策和 checkout 走完整路径,检查移动端菜单溢出、焦点顺序、可见标签、外链提示和返回。菜单完成不是只在桌面端看一眼。

做完后应该看到或拿到:得到移动端、键盘和关键路径的实际验收记录。

怎样算完成:客户无需鼠标或宽屏也能打开关键入口,路径没有溢出、遮挡或焦点丢失。

如果结果不对或入口没出现:菜单遮挡或键盘卡住时,先定位实际主题菜单和组件,再修复菜单层级/标签,不要只缩短所有文字。

留下证据:记录设备宽度、键盘路径、目标页面、问题和复测负责人。

失败处理:如果关键链接只有图标没有可见或可读标签,先补标签和焦点状态再上线。

Shopify Content Menus 主导航编辑器。
Content → Menus → Main menu主菜单只放客户高频入口,集合、产品、政策和联系路径要能走到实际页面。
Shopify Footer 和 Customer menus 设置。
Content → Menus → Footer / Customer menusFooter 放政策、Contact、About、FAQ 等信任入口;Customer menu 不要混入内部管理链接。
Shopify 移动端菜单、URL redirect 和键盘路径验收。
Online Store → Navigation → storefront QA从首页到商品、集合、政策和 checkout 验证移动端溢出、键盘焦点、旧 URL redirect 和可访问标签。

现在把判断用到你的店铺

先让客户从首页进入集合、商品、Contact、Policies 和 checkout,再把高频购物入口放入 Main menu,把信任内容放入 Footer,把账户放入 Customer menu。改名时保留旧 URL redirect,并用移动端和键盘重复路径。

这一步先给出后台位置,再用一个实际情境检查你是否能做出决定。

把这一步用到你的店铺

完成后应得到:一套不超过两层的主导航、完整页脚、客户账户入口、所有核心页面的直接对象链接、移动端验收和重定向表。

相关后台路径:Online Store > Pages and Content > Menus

你把页面 URL 手动粘贴进菜单,后来修改了 handle,手机菜单现在打开旧地址。正确修复是什么?

先做判断,再对照原因

这不是记忆题。先选出能解决问题的动作,再看解释。

在店铺里逐项确认

按当前店铺的实际值逐项确认;这份清单不会替你保存设置或执行测试。

这一步还不能说明:菜单编辑器显示链接存在,不证明 live 导航、重定向、状态码或键盘操作已经正确

继续条件:所有核心页面都有入口,菜单层级适合手机,链接指向正确对象,旧 handle 有必要的重定向

暂停条件:如果存在死链、循环跳转、手机菜单无法展开或键盘焦点到不了关键项,先修复导航

下一步:下一课把真实运营规则写进 Policies、Brand、About、Contact 和 FAQ。

先补齐判断或核对项。没有足够信息时,保持暂停比猜一个通过更安全。

这一课需要做出的决定

按行填写当前店铺的实际值,不要把示例或计划值当成完成。实际值符合条件并有保存或测试证据,才可以标记通过。

这一课需要做出的决定
项目推荐设置为什么
Main menu购物入口让客户找到集合和产品
Footer政策、信任、联系支持购买前后的信任判断
Customer menu账户路径不混入内部管理链接
URL changes保留旧路径并 redirect减少 404 和 SEO 路径断裂

这些地方先不要乱动

  • 不要把所有链接塞进 Main menu。
  • 不要把后台/内部工单链接放进公开菜单。
  • 不要改 handle 后丢掉旧 URL 的 redirect。

常见问题

页面创建后会自动进主菜单吗?

不会。Pages 和 Menus 是两个设置面,必须把真实页面目标加入实际使用的菜单。

为什么菜单链接已保存但前台仍 404?

检查 handle、页面状态、locale、域名和旧 URL redirect,并确认主题使用的是这一个菜单。

只测试桌面菜单可以吗?

不可以。移动端溢出、键盘焦点和触控入口会产生不同问题,关键路径要在代表性设备上复核。

本课结论与继续条件

导航验收不是菜单看起来整齐,而是客户能从首页到正确商品、信任页面和 checkout,旧链接不丢,移动端和键盘也能完成。继续前确认每个公开链接有真实目标、责任菜单和实际回读证据。

课程 FAQ

本课只保留这一组常见问题

Shopify 的菜单现在在哪里设置?

当前英文后台通常在 Content > Menus。后台界面会更新,找不到时先用 Shopify admin search 搜 Menus,不要完全依赖旧截图。

为什么要直接选择 Page 或 Collection,不手贴 URL?

直接对象链接更不容易因为域名、locale 或 handle 调整而失效,也减少复制错误。外部链接才需要完整 URL。

主菜单应该放多少项?

没有固定数字,但每项都要对应清楚的购物或理解任务。新店宁可少而清楚,也不要用很多空分类制造规模感。

本课 HowTo 步骤

按本课步骤完成

  1. 1

    创建核心 Pages

    进入 Online Store > Pages,先建立 About、Contact 和 FAQ。每页写清标题、正文、可见性、模板和 search listing。Contact 页面测试表单是否进入真实客服邮箱。

  2. 2

    画主菜单和页脚职责

    Main menu 只承担购物和品牌理解,Footer menu 放政策、联系、账户和辅助信息。不要把所有链接都塞进主菜单,也不要在页脚重复十几次同一入口。

  3. 3

    在 Content > Menus 建主导航

    打开 Content > Menus,选择 Main menu。添加项目时直接选择 Collections、Products、Pages 或 Policies,不要优先手贴完整 URL。拖动建立一层下拉,最多保持两层。

  4. 4

    建立 Footer 与 Customer menus

    页脚连接 Contact、FAQ、Shipping、Returns、Privacy、Terms 和账户入口。当前客户账户模式可能使用独立 customer accounts menu,创建后要从前台实际登录状态检查。

  5. 5

    检查 handles 和 URL redirects

    修改 page、product、collection 或 blog handle 时,确认 Create a URL redirect 是否启用。对旧 URL 建一对一重定向,不要全部指向首页。把迁移原因和日期记入重定向表。

  6. 6

    完成移动端和键盘验收

    手机上打开菜单,检查展开、返回、滚动和关闭。桌面用键盘 Tab 检查焦点顺序和下拉可操作性。逐个点击主菜单、页脚和账户链接,确认没有 404、循环或错误市场路径。

返回课程目录
20
查看所有教程

把这节课发给一起复盘的人

建议连同本课的复制笔记一起分享,让对方看到同一组数据、判断线和下一步动作。