第 1 类:导航和菜单

21 个由专家精心制作的 Claude.AI 提示,用于创建 Shopify 导航元素

带有动态收藏的超级菜单

为超级菜单创建一个 Shopify 部分:

  • 最多显示 3 列
  • 从“目录”中动态提取集合链接
  • 支持每个系列的特色图片
  • 完全响应并可访问键盘
输出 Liquid、JSON-T 模式和 CSS。

带有公告栏的固定标题

构建一个粘性标题部分:

  • 滚动时保持在顶部
  • 包含可关闭的公告栏
  • 显示商店徽标和主要导航链接
  • 在移动设备上折叠成汉堡菜单
提供 Liquid、JSON-T 模式和 CSS。

多级下拉菜单

为 Shopify 生成导航菜单部分:

  • 支持最多 3 个菜单级别(父级、子级、孙级)
  • 悬停(桌面)和点击(移动设备)时展开/折叠
  • 包含可访问性的 ARIA 标签
  • 允许商家在主题编辑器中自定义菜单项
如果需要,输出 Liquid、JSON-T 模式、CSS 和 JavaScript。

徽章导航

创建标题菜单,其中:

  • 菜单项可以显示自定义徽章(例如“新品”、“促销”)
  • 徽章可通过元字段或主题设置进行配置
  • 徽章颜色和文字可定制
提供 Liquid、JSON-T 模式和 CSS。

语言选择器下拉菜单

为标题构建一个语言选择器下拉菜单:

  • 自动列出可用的商店语言
  • 显示国旗或语言代码
  • 突出显示当前语言
  • 如果可能的话,无需重新加载页面即可切换语言
提供 Liquid、JSON-T 模式和 CSS。

移动优先汉堡菜单

设计一个移动导航菜单:

  • 使用汉堡图标切换打开/关闭
  • 从左侧或右侧滑入
  • 支持嵌套菜单项
  • 包括平滑的 CSS 过渡
如果需要,提供 Liquid、JSON-T 模式、CSS 和 JavaScript。

带有实时商品计数的购物车图标

创建标题导航部分:

  • 显示带有实时商品计数徽章的购物车图标
  • 添加/删除项目时自动更新
  • 可访问且适合移动设备
提供 Liquid、JSON-T 模式和 CSS。

集成在标题栏中的搜索栏

使用以下内容生成标题部分:

  • 集成搜索栏,点击或聚焦时可展开
  • 使用 Shopify 搜索 API 的预测搜索建议
  • 键盘导航支持
提供 Liquid、JSON-T 模式、CSS 和 JavaScript。

条件导航项

构建导航菜单,其中:

  • 某些菜单项仅对登录客户显示或基于客户标签显示
  • 商家可以在主题设置中设置可见性规则
提供 Liquid、JSON-T 模式和 CSS。

带有倒计时器的公告栏

创建页面顶部的公告栏:

  • 包括可定制的销售或活动倒计时器
  • 允许商家在主题编辑器中编辑消息和计时器
  • 可关闭且针对移动设备进行了优化
提供 Liquid、JSON-T 模式、CSS 和 JavaScript。

无障碍优先导航

设计一个导航菜单部分:

  • 完全可以通过键盘导航
  • 对所有交互元素使用 ARIA 角色和标签
  • 包含屏幕阅读器的“跳至内容”链接
提供 Liquid、JSON-T 模式和 CSS。

浮动导航按钮

创建一个浮动导航按钮:

  • 保持在屏幕底角可见
  • 打开带有快速操作的菜单(例如,主页、商店、购物车)
  • 触摸友好且可定制
提供 Liquid、JSON-T 模式、CSS 和 JavaScript。

季节性导航样式

设计一个导航菜单:

  • 根据当前季节或节日更改配色方案或添加装饰元素
  • 商家可以在主题编辑器中安排样式
提供 Liquid、JSON-T 模式和 CSS。

面包屑导航

生成面包屑导航部分:

  • 根据当前页面/集合/产品动态更新
  • 支持丰富的 SEO 摘要
  • 易于访问且响应迅速
提供 Liquid、JSON-T 模式和 CSS。

页眉中的社交媒体图标

在标题导航中添加一行社交媒体图标:

  • 商店社交资料链接
  • 允许商家选择要展示的平台
  • 支持自定义图标上传
提供 Liquid、JSON-T 模式和 CSS。

导航中的促销链接

创建一个导航菜单项:

  • 重点宣传特定促销或促销活动(例如“春季大促销!”)
  • 使用不同的颜色或动画来吸引注意力
  • 可通过主题设置进行编辑
提供 Liquid、JSON-T 模式和 CSS。

用户帐户下拉菜单

在标题栏设计一个用户账户菜单:

  • 显示访客登录/注册链接
  • 显示已登录用户的帐户、订单和注销
  • 包含头像或姓名首字母
提供 Liquid、JSON-T 模式和 CSS。

多店切换器

在导航中构建一个商店切换器:

  • 允许用户在不同的区域商店或品牌之间切换
  • 显示当前商店和可用选项
  • 相应地更新链接和货币
提供 Liquid、JSON-T 模式和 CSS。

动画下划线导航

创建一个在悬停和活动状态下具有动画下划线效果的导航菜单。

  • 商家可以自定义下划线颜色和粗细
  • 适用于桌面和移动设备
提供 Liquid、JSON-T 模式和 CSS。

无障碍声明链接

在导航或页脚添加持久的“无障碍声明”链接,确保符合无障碍指南。

  • 商家可以在主题设置中编辑链接页面
提供 Liquid、JSON-T 模式和 CSS。

一键联系按钮

在导航中创建一键联系按钮:

  • 打开联系表单模式或链接到联系页面
  • 在移动设备上始终可见
提供 Liquid、JSON-T 模式和 CSS。

如何使用:

  • 将任何提示复制到 Claude.AI 3.7
  • 添加您的品牌或特殊要求
  • 将生成的代码粘贴到 Shopify 主题编辑器中
  • 使用 Shopify 主题编辑器中提供的架构字段进行自定义
提示已复制到剪贴板!