如何在Shopify上根据参考图片实现特定菜单设计（超级菜单、抽屉菜单、底部标签栏）
您手头可能正有一张非常满意的菜单截图：它或许来自某个知名独立站、设计师精心制作的Figma设计稿，或者是从Pinterest上保存的灵感图。画面中展示了整齐的多列链接、精美的系列图片缩略图、促销横幅和醒目的标签。然而，当您打开Shopify后台准备实现它时，却往往会碰壁：后台既没有一键上传布局的按钮，默认的菜单项设置里也没有添加图片的选项。
一张菜单参考图本质上是一份设计规范（Spec），而不是一张可以直接贴到店铺里的静止图片：将其拆解为结构、内容块、样式与交互四个维度，选用合适的工具进行搭建，并有针对性地独立规划手机端展示。把图片拆解成具体的组成部分后，在Shopify上还原起来会容易得多。
Quick answer: how to turn a menu image into a working Shopify menu
请将参考图视为技术规范，而非不可拆解的画作。记下菜单类型、层级与列数、内容块（链接、图片、横幅、商品）、视觉样式以及移动端交互逻辑；然后借助主题标头设置、菜单应用或自定义代码进行分块搭建，并专门规划手机端界面。
在Shopify上还原任意菜单设计，通常只需遵循以下五个步骤：
- Step 1: Break the image into a menu design spec: 梳理链接层级、列数、图片卡片、品牌色调以及悬停或点击触发机制。
- Step 2: Choose the build route: theme settings, a menu app, or custom code: 权衡搭建成本、设计控制权以及后续主题版本升级时的维护风险。
- Step 3: Map each part of the image to a building block: 将视觉区域对应到具体链接组、系列图片卡片、促销横幅或图标上。
- Step 4: Translate the desktop design for mobile: 将宽幅多列桌面端布局转换为手机侧边抽屉、底部固定标签栏或图标导航列。
- Step 5: Match colors, fonts, and spacing to your brand: 运用本店的字型、配色与无障碍对比度规范，而非生搬硬套他人的品牌资产。
Shopify后台菜单主要用于存储链接路由信息；最终的视觉呈现则由主题、应用或代码决定。由于桌面端网格无法直接缩小适配手机屏幕，移动端导航必须单独精心设计。
Why a Shopify menu rarely matches a design image out of the box
当商家初次尝试按图还原菜单时，通常会打开后台的内容 > 菜单，希望能找到可视化排版工具。但映入眼帘的往往只是一份简朴的文本链接列表。
在Shopify系统底层，菜单由嵌套的链接树构成。根据Shopify帮助中心关于下拉菜单的官方说明，顶级菜单项最多只能嵌套两级下拉菜单，这意味着菜单整体层级上限为三级。在主题Liquid模板中，每个项目均以链接对象表示。根据Shopify Liquid开发文档，菜单项本质上就是“a link in a menu”（菜单中的一个链接），包含title、url等属性，但本身并没有原生图片或横幅配置字段。
为店铺添加菜单有助于客户浏览在线商店并找到重要页面（Shopify帮助中心）。然而，主菜单和下拉菜单在在线商店中的显示位置完全取决于您所使用的主题。Shopify后台只负责存储路由路径，而具体的排版样式—字体、颜色、间距以及下拉框是呈现为单列小面板还是多列超级菜单—由主题、应用或自定义代码决定。
绝大多数参考截图来自使用其他商业主题、二次开发代码或第三方插件的独立站。若您的截图正好是当前所用主题的官方演示站，请参考我们的专题指南：如何让菜单呈现主题演示站效果。但如果截图来自其他品牌或独立设计稿，您就需要主动将其拆分为组件并逐步组装。
Step 1: Break the image into a menu design spec
Concept illustration: 将设计图拆解为结构、内容块、样式与交互说明。
在修改设置或动手写代码前，请先仔细审视参考图，从结构、内容块、样式与交互四个维度整理出一份书面规范。
Structure: levels and columns
- 确认菜单形态： 它是带简单下拉框的水平导航栏、铺开多列的超级菜单（Mega Menu）、侧边滑出的抽屉菜单（Drawer），还是固定在屏幕下方的底部标签栏？如需对比选择，可参阅如何选择适合的Shopify菜单类型。
- 统计顶级项目数量： 记下顶部导航栏中常驻的主栏目数量（例如：新品、全部分类、关于我们、特惠专区）。
- 检查嵌套层级深度： 观察下拉面板内的数据结构。链接是直接平铺展示，还是归类在加粗分类标题下？请记住Shopify原生系统支持最多三级深度。
- 计算横向分列数量： 如果是多列展开的大面板，数清楚横向分为几列。
Content blocks: links, images, banners, products
逐一盘点参考图中所包含的视觉模块：
- 纯文本链接列： 指向产品系列或具体页面的垂直文本列表。
- 分组标题： 用于统领子链接的加粗分类标签。
- 系列配图卡片： 附带系列名称的方形或竖版缩略图卡片。
- 促销展示横幅： 用于宣传季节活动、折扣码或Lookbook的大幅广告卡片。
- 推荐商品卡片： 包含缩略图、商品名及标价的小型商品推荐块。
- 链接侧边小图标： 文字旁边点缀的微小图案或特色徽标（如火苗或五角星）。
- 行动按钮（CTA）： 采用胶囊按钮造型的重点链接（如即刻预约）。
Style: colors, fonts, spacing
定性记录视觉风格，无需在压缩过的图片上机械地测量精确像素：
- 色彩： 记录下拉面板背景底色（纯白、浅灰或深色）、默认文字颜色、悬停高亮色与分割线色调。
- 字型： 观察字体风格（现代无衬线体或经典衬线体）、大小写规则以及标题与子链接之间的字重反差。
- 间距与密度： 评估菜单布局是留白充分的舒展风格，还是为了容纳庞大类目而紧凑排布。
- 边框与圆角： 观察图片卡片是利落的直角还是带有轻微圆角修饰。
Behavior: hover, click, and mobile
- 打开交互： 鼠标悬停（Hover）展开还是需要点击（Click）才触发？
- 子层级展开方式： 在抽屉菜单中，子菜单是垂直手风琴式折叠展开，还是向右水平推入？
- 移动端对应视图： 设计稿中是否包含手机端视图？如果没有，您需要自行规划小屏幕交互。
菜单规范核对表
在正式搭建前，可将以下清单复制到工作笔记中填好：
- 菜单类型： 水平导航栏 / 桌面超级菜单 / 侧边抽屉菜单 / 移动端标签栏
- 顶级项目总数： (例如：5个项目)
- 层级嵌套深度： 1级 / 2级 / 3级 (Shopify系统上限：3级)
- 横向列数： (例如：PC端下拉框分为4列)
- 包含的内容块： 链接列表 / 系列图片卡片 / 促销横幅 / 推荐商品 / 装饰图标 / CTA按钮
- 预估配色方案： 背景底色、链接文字色、悬停高亮色、边框分割线
- 排版样式： 无衬线或衬线字体、英文大小写规范、标题字重
- 桌面端交互： 带有安全停顿的悬停展开 / 点击切换
- 移动端策略： 侧边滑出抽屉 / 手风琴折叠行 / 底部固定标签栏 / 圆形分类图标列
Step 2: Choose the build route: theme settings, a menu app, or custom code
明确了设计规范后，接下来就是选择搭建方式。在Shopify体系中，通常有三条途径：主题内置设置、菜单插件应用或二次开发代码。
可从初始投入、设计自由度以及主题更新时的维护风险三个维度来综合考量：
| 实现途径 | 搭建投入 | 设计自由度 | 主题更新维护风险 | 最适合的场景 |
|---|---|---|---|---|
| 主题设置 | 低（直接在主题编辑器内配置，无需写代码） | 有限（严格受限于所选主题自身具备的现有功能） | 低：通过主题编辑器完成的常规修改在主题升级时可自动继承 | 仅需纯文字下拉菜单或主题自带的简易超级菜单 |
| 菜单应用 | 中等（具备拖拽排版功能的可视化编辑器） | 高（支持多列分栏、系列缩略图、广告横幅、商品展示及手机底部标签栏） | 低至中等：App Embed组件无需修改主题代码；大版本重构时需复核兼容性 | 希望灵活展示丰富图片横幅与手机标签栏且不碰代码的商家 |
| 自定义代码 | 高（需编写Liquid、CSS、JavaScript及Schema配置） | 极高（对页面DOM结构、复杂动效及个性化业务逻辑拥有完整控制权） | 高：升级前应保存自定义代码的副本，升级后可能需要重新应用 | 拥有专职前端工程师或长期技术外包服务支持的品牌 |
方案1：挖掘主题内置设置
建议首先在主题自定义后台（在线商店 > 模版 > 自定义）中仔细查看。打开标头（Header）部分，看看提供了哪些菜单样式。部分主题提供原生超级菜单设置，可将内容 > 菜单中嵌套的链接自动铺开为多列。
该方案最大的优势是运行稳定：通过主题编辑器对主题所做的任何自定义设置都会被复制并应用到更新后的主题中（Shopify帮助中心）。然而其短板也很明显：如果主题标头本身没有设计图片位或横幅位，单凭设置项无论如何也调不出这些模块。详细限制可阅读我们关于Shopify主题菜单功能局限的解析。
方案2：采用专业菜单应用
如果您的参考图包含大幅促销广告图、系列展示卡片、商品推荐块或手机端固定底部导航，而当前主题缺乏相应支持，使用专门的导航应用是最稳妥高效的方案。
现代Shopify应用依托“主题应用扩展（Theme App Extension）”机制运行。当应用使用主题应用扩展时，商家无需手动编辑其主题代码（Shopify Developer Documentation）。您只需在应用提供的可视化面板内排布图文、配置链接与颜色，然后在主题编辑器中开启App Embed开关即可生效。
此方案的权衡在于引入了外部工具成本。应用通常会产生按月订阅费用，且Shopify官方文档也提到，在更换为新主题时，部分应用可能与新主题不兼容（Shopify帮助中心）。但对绝大多数非技术背景的店主而言，这能在不破坏主题底层代码的前提下实现极高的设计自由度。
方案3：通过代码二次开发
若您追求非常独特的分裂面板动效或非标准交互逻辑，而现有主题与应用均无法达成，编写定制代码是终极解法。开发人员将直接修改标头Liquid文件、追加CSS样式规则并打通Metafields元字段。
下方视频展示了一个自定义代码开发的真实案例，演示了如何通过编写代码与配置元字段为免费主题的导航栏增加图片展示块：
尽管定制开发能够实现任意天马行空的想法，但它会带来持续的维护负担。Shopify帮助中心特别提示：“更新主题之前，请务必保存所有自定义代码的副本”（Shopify帮助中心）。由于自定义代码在主题更新后可能需要重新应用，请务必保留一份副本，并在每次更新后重新检查您的菜单。
Step 3: Map each part of the image to a building block
选定实施路线后，下一步是将步骤1梳理出来的每个视觉模块精准对应到Shopify可执行的构件上。
下表展示了参考图中最常见的7类构件在三种途径下的具体落地方式：
| 图片中的视觉呈现 | 功能属性 | 主题原生设置 | 菜单应用 | 自定义代码开发 |
|---|---|---|---|---|
| 顶级主链接栏 | 承载全站核心类目的水平常驻主导航 | 原生支持：在内容 > 菜单添加项并绑定到Header | 取决于应用：可能替换或扩展主题现有标头栏 | 在标头模板中遍历linklists.main-menu.links的Liquid循环 |
| 带加粗标题的链接列 | 归属于某一级分类下的多列二级/三级链接组 | 取决于主题：若主题自带Mega Menu区块则支持 | 取决于应用：可查看是否提供带分组标题的列构建器 | 嵌套Liquid循环（for child in link.links）配合CSS Grid网格 |
| 系列图片卡片 | 包含系列缩略图与文字说明的图文方块 | 取决于主题：部分付费主题可自动拉取系列封面图 | 取决于应用：可查看是否提供关联系列的图片卡片模块 | 编写Liquid代码获取collection.featured_image或元字段图片 |
| 促销宣传横幅 | 突出展示当季促销活动或画册的广告位 | 取决于主题：部分主题在标头中带有促销区块 | 取决于应用：可查看是否支持使用自己的图片与按钮链接的横幅模块 | 在Section Schema中预置静态Block，配置图片选择器 |
| 推荐商品精选 | 带有缩略图、商品名与售价的小型商品卡片 | 取决于主题 | 取决于应用：可查看是否提供商品模块 | 通过all_products[handle]精准调取对应商品数据的Liquid语句 |
| 文字旁边的小图标 | 类目名旁边的促销Tag或分类指引图案 | 取决于主题 | 取决于应用：可查看是否提供图标选择器或自定义图标上传 | 内联SVG代码或通过CSS伪元素按链接句柄精准挂载 |
| 行动按钮（CTA） | 样式呈现为药丸状按钮的重点链接（如预约试衣） | 取决于主题：部分主题允许将最后一项转化为按钮样式 | 取决于应用：可查看是否支持为单个菜单项设置按钮样式 | 在Liquid模板中为指定锚点标签追加定制CSS样式类名 |
超级菜单排版准则
如果您的参考图是一个宽幅多列的展开面板，那么它属于超级菜单范畴。Nielsen Norman Group的可用性研究表明，超级菜单表现出众的关键在于“众多选项能够在二维下拉网格布局中一览无余地呈现”。借助二维空间展开，买家能够全盘扫视目录架构，而不必在又深又窄的多级层叠飞出框中来回摸索。
NN/g同时强调，“超级菜单使在合适的地方引入图片与图标变得非常容易”（Nielsen Norman Group）。图形能加速消费者的品类识别。但图片的运用务必以清晰为先：请务必为每个配图方块搭配清晰易辨的文字名称，确保访客明确知晓点击后的去向。
最后，NN/g建议商家“将选项分块归纳为紧密相关的集合”（Nielsen Norman Group）。如果您有二十个细分子分类，切勿混杂堆砌成一长条。请将它们归置到如上装、裤装、外套、配饰等加粗列标题之下。如需深入了解间距与列数平衡，欢迎研读我们的超级菜单最佳实践指南。
Step 4: Translate the desktop design for mobile
Concept illustration: 将桌面端超级菜单转译为手机抽屉菜单、图标菜单与底部标签栏。
按电脑端截图设计菜单时，最常犯的失误就是忽略手机端的浏览体验。电脑端超级菜单横跨宽屏，而智能手机屏幕十分狭窄。将一套多列的桌面网格生硬塞进手机屏幕是行不通的。
Baymard Institute的长期电商可用性评测揭示了这一痛点：“在可用性测试中，我们反复观察到移动端导航对用户而言尤其困难。”在手机屏幕上，访客常受困于细小模糊的字体与容易误触的狭小点击区域。
Baymard还指出，移动端菜单大多数情况下默认处于折叠状态，隐藏在汉堡包图标之后（Baymard Institute）。虽然收起菜单能腾出宝贵屏幕空间，但也带来了负面代价：Nielsen Norman Group的对比测试证实，当主导航被收拢隐藏至视口之外的图标后时，内容的可发现性几乎被腰斩。
为了缓解这种可发现性衰减，NN/g建议：“如果您的网站只有4个或更少的核心导航链接，请直接把它们作为可见链接展示出来”（Nielsen Norman Group）。在Shopify移动端落地时，这通常演化为三种相辅相成的解决方案：
1. 移动端侧边抽屉（Drawer）
对于具有一定深度的中大型目录，侧滑抽屉依然是不可或缺的承载载体。当顾客点击汉堡包按钮时，面板从侧方滑出。将桌面超级菜单转译到抽屉面板时应注意：
- 将桌面端平铺的横向各列转变为垂直叠放的手风琴（Accordion）折叠列表。
- 将二级列标题设为轻触展开的折叠开关。
- 三级具体分类项整齐缩进排在下方。
- 将桌面版大图横幅改版为扁平窄条横幅，或直接在手机抽屉中隐藏，避免导致页面纵向过长。
2. 屏幕底部常驻标签栏（Bottom Tab Bar）
为了让核心业务入口常驻眼前，可在手机屏幕底端启用固定标签栏。这一区域恰好处在单手握持时拇指最自然的触控舒适圈内，适合放置3到4个高频动作（如首页、逛商城、搜索、购物车）。访客无需唤醒抽屉面板即可一键穿梭各核心场景。欲了解完整布局策略，请参考我们的超越汉堡包菜单的移动端导航探索。
3. 系列圆形图标导航列
如果您的桌面设计包含精美的系列配图，在手机端可以将其改版为置顶于系列页或抽屉内的图标滑动行。带文字标注（如连衣裙、卫衣、板鞋）的小型圆形或倒角方块，能让手机用户获得直观图文导览，又不会过度侵占手机垂直视野。
针对不同设备构建针对性的交互架构是现代电商的通用标准。若想了解双端独立配置的完整步骤，请浏览我们的教程：如何为Shopify店铺分别创建桌面与移动端专属菜单。
Step 5: Match colors, fonts, and spacing to your brand
根据图片还原菜单，学的是其空间骨架与韵律—绝不是抄袭他人的知识产权或品牌资产。切勿直接套用其他品牌的注册商标、带版权的人物实拍图或商业付费字体。您应当将这种优秀的结构手法注入本店的品牌调性中。
承接在用主题的视觉风格
让新建的导航无缝融入全站既有风格体系：
- 沿用主题后台设置好的字体库（在线商店 > 模版 > 自定义 > 主题设置 > 排版），使导航栏与全站文字风格和谐统一。
- 将展开面板的背景调设为店铺基准中性底色（如纯白或柔和的浅米色）。
- 将品牌专属强调色分配给悬停下划线、折扣红标与CTA主操作按钮。
更多关于品牌调性与导航设计融合的细节，请参阅指南：让店铺导航自然流露品牌特质。
守护清晰可读的文字无障碍对比度
视觉美感必须以清晰易读为底线。社交网络上的设计概念稿经常采用浅灰文字配白色底板，或是把纤细白字直接叠在背景复杂的时尚摄影图上。但在实际运营的店铺中，过低的对比度会导致许多顾客根本无法辨认文字。
国际网页无障碍标准对此设定了明确的数学基准。依据W3C Web Accessibility Initiative的WCAG 2.2无障碍指南，常规正文文字与其背景之间必须达到至少4.5:1的对比度，大号文字（18pt以上或14pt粗体）也必须达到至少3:1。
在为菜单微调色彩时，请务必注意：
- 检验所有链接文字与其容器底色之间的对比度是否稳稳达到4.5:1的及格线。
- 若在促销图片横幅上叠放标题或按钮，请在文字后方衬上一层纯色或微透的卡片底衬，确保无论底图摄影本身明暗如何，字迹都能保有4.5:1的高对比度。
- 移动端各行链接之间应留足点击间距，防止手指按压时产生误触。
Trade-offs: what not to copy pixel for pixel
看到优秀的设计图时，人们难免会想百分之百逐像素克隆每一个投影、每一道渐变和每一丝边距。然而，脱离工程实际盲目复制视觉表象，往往会带来体验缺陷和维护泥潭。
请主动避开以下三大设计误区：
1. 过于敏感或零延迟的悬停展开
静态设计稿容易让人误以为菜单应该在光标滑过的一瞬间弹开。但在真实的网页操作中，零延迟悬停极为恼人：当用户快速将鼠标划过导航区想去点右上角搜索框或购物车时，半路会猝不及防触发巨大的下拉面板遮挡住整个屏幕。
Nielsen Norman Group提出过一条经过实践检验的建议：“在显示任何内容之前，鼠标应保持静止停留0.5秒”。这短短半秒的缓冲停顿，能有效避免光标误扫带来的视觉打扰。
键盘无障碍操作同样重要。W3C关于飞出式菜单的指导文档明确规定：“使用Tab键在菜单中穿梭导航时，子菜单不应自动展开弹出”。当依靠Tab键在顶级链接间聚焦切换时，沿途每个子菜单如果自动全部弹开，会造成极大的困扰与方向迷失。子菜单只能在用户发出明确交互指令时方可展开。
2. 生搬硬套脱离自身SKU体量的过多列数
如果您的参考图来自一家拥有众多分栏、数十个子品类的大型百货品牌，而您本店商品规模较小，千万不要强行塞入同款网格。把单薄的类目稀释在过多列数中，会产生大量空荡的留白与只有孤零零一个链接的列，让店铺显得备货不足。请根据您的真实商品体量来规划列数。
3. 产生高昂维护负债的异形怪异布局
斜切多边形面板、不对称分裂结构或复杂的原生物理动效，在概念展示时可能惊艳夺目。但在Shopify框架下，实现它们需要编写脆弱且高耦合的底层Liquid和JavaScript脚本。
正如Shopify官方更新文档所提醒的，更新主题之前应始终保存所有自定义代码的副本。高度定制的菜单在主题更新后可能需要重新检查并重新应用。
没有任何工具或主题可以承诺完美贴合任意天马行空的美术草图。我们的目标不是追求像素级的克隆，而是为您的买家提供一套稳定可靠、指引清晰的高效购物导航。
Where Navi+ fits
如果您心仪的参考图包含多列排版、系列图片卡片、促销横幅或手机端底部标签栏，而您的现有主题原生设置无法胜任，您并不一定需要耗费高额预算找外包写代码。这也正是Navi+大显身手的地方。
Navi+是一款面向Shopify的导航应用，帮助商家通过可视化方式搭建菜单布局：
- 电脑端超级菜单： 自由搭建支持商品、产品系列、图片、图标及灵活调整列宽的多列下拉面板（Shopify App Store），轻松重现参考图中的分组列与促销横幅。
- 移动端专用抽屉与菜单： 独立打造适配手机的侧滑抽屉与汉堡包菜单（Shopify App Store），既可一键复用电脑端架构，也可配置手机端专享的精简层级。
- 屏幕底部吸顶标签栏： 在移动端添加具有原生App质感的固定底部标签栏（Shopify App Store），配齐图标与文字标示，让最重要的转化入口常驻拇指操作区。
- 品类图标导航条： 配置圆形图片或图标导览条，方便手机用户以直观的视觉方式滑动浏览。
- 全程无需编写代码： 依托精选模版库、AI智能辅助及拖拽式操作，在不修改任何主题底层代码文件的状态下完成设计（Shopify App Store）。
- 安全融入主题生态： 基于Shopify Theme App Extension机制无缝安装（Shopify Developer Documentation），因此您无需手动编辑主题的Liquid文件。
- 符合标准层级限制： 完整支持最多三级菜单嵌套，严密贴合Shopify底层信息架构。
模版是帮您快速起步的脚手架，实际的产品系列挂载、高画质且经过压缩的图片上传以及配色微调依然需要您亲自把关。Navi+并不会直接读取图片文件凭空生成菜单，但它提供了全套积木式组件，赋予您亲手搭建心仪菜单的充沛自由。
如果您现有的主题无法生成参考图中的分列、图片卡片或手机端底部标签栏，不妨尝试在Navi+中基于模版重构它们，再结合本店的类目与品牌特色逐步微调。
Pre-publish checklist
在将新制作的菜单正式推向线上顾客之前，请逐项核对本清单：
- 对照设计规范： 将制作完成的在线菜单与步骤1的规格表对照，核实所有分栏与内容块均已配置到位。
- 全量链接测通： 逐一点击各菜单链接、系列卡片与横幅按钮，排查是否存在404死链。
- 图片资源优化： 确保所有使用的展示图均为自有合规素材，已做Web端文件体积压缩并填写了alt描述。
- 双端真机测试： 先在桌面电脑浏览器中体验，随后在真实智能手机上亲手触控操作。
- 键盘操作检测： 使用Tab键沿标头逐项跳转，确认子菜单不会在非主动操作下突然自动弹出（W3C Flyout Menus）。
- 对比度合规检查： 核算所有链接文字在容器底色及横幅图片上的对比度是否达到4.5:1基准（WCAG 2.2）。
- 移动端视口适应： 观察手机抽屉与底部标签栏能否在屏幕边缘整洁贴合，杜绝意外横向滚动的发生。
- 自研代码安全备份： 若曾改动过主题的Liquid或CSS文件，上线前请保存一份自定义代码的副本（Shopify帮助中心）。
- 更新应对预案： 安排好日后升级主题版本或新增第三方App时针对菜单显示效果的复测机制（Shopify帮助中心）。
- 应用内全局预览： 若使用Navi+，在正式启用App Embed发布前，请先在编辑器预览窗口中完整确认电脑端超级菜单与手机端标签栏。
FAQ
Can I add images to a Shopify menu without an app?
在Shopify后台“内容 > 菜单”中管理的标准菜单数据仅以Liquid link对象形式存储链接地址与标题文字（Shopify Developer Documentation）。下拉框中能否直接显示图片完全取决于您所使用的主题是否内置了相应的图文菜单模块（Shopify帮助中心）；如果主题不支持，则需要借助专门的菜单应用或自行编写定制代码。
How many levels can a Shopify menu have?
在Shopify的标准导航架构下，一个顶级父菜单项最多可以嵌套两级子下拉菜单（Shopify帮助中心）。这决定了菜单系统的最大嵌套层级为三级（顶级父项 > 二级分类 > 三级子项）。
What should my desktop mega menu become on mobile?
在移动端屏幕上，桌面端宽幅超级菜单通常需要专门的手机端布局，例如带可展开行的侧边抽屉菜单。鉴于手机端导航对用户而言较为困难（Baymard Institute）且隐藏菜单会削弱内容的可发现性，具有4个或更少主入口的站点应保持其可见性（Nielsen Norman Group），例如搭配一条屏幕底部吸顶的标签栏。
Will a custom-coded menu survive theme updates?
通过主题可视化编辑器完成的所有常规界面修改，在更新升级主题版本时均会被妥善保留并自动同步到新版主题中（Shopify帮助中心）。但是，对于直接手写在主题Liquid或CSS文件中的定制代码，您应在更新前务必保存一份副本，更新后可能需要重新应用。
Should I copy the image exactly?
不应该逐像素照搬。我们应当吸收的是其空间分栏、比例均衡与交互便利的设计逻辑，同时务必采用属于自己品牌的原创摄影作品、Logo标志与字型。此外，您需要确保全站文字严格符合4.5:1的无障碍可读对比度标准（W3C WCAG 2.2），并依据自身真实的商品阵容归纳分类（Nielsen Norman Group）。
Sources
- Shopify Help Center — Drop-down menus: https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links: https://help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Updating themes: https://help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Developer Documentation — Link Liquid object: https://shopify.dev/docs/api/liquid/objects/link
- Shopify Developer Documentation — Theme app extensions: https://shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Nielsen Norman Group — Mega Menus Work Well: https://www.nngroup.com/articles/mega-menus-work-well/
- Nielsen Norman Group — Hamburger Menus and Hidden Navigation: https://www.nngroup.com/articles/hamburger-menus/
- Baymard Institute — Navigation Menu Usability: https://baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- W3C Web Accessibility Initiative — Contrast Minimum (WCAG 2.2): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- W3C Web Accessibility Initiative — Flyout Menus Tutorial: https://www.w3.org/WAI/tutorials/menus/flyout/
- Shopify App Store — Navi+ Navigation Design: https://apps.shopify.com/pronavi-navigation-design
探索更多主题
本指南链接到一系列专题文章——逐一深入了解。