第 6 类:内容块和手风琴

22 个由专家精心设计的 Claude.AI 提示,用于创建 Shopify 内容元素

常见问题解答手风琴部分

为 Shopify 创建一个常见问题解答折叠部分:

  • 从元字段或主题设置加载问题和答案
  • 允许商家在主题编辑器中重新排序常见问题解答
  • 包括平滑的展开/折叠动画
  • 完全可访问且适合移动设备
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

选项卡式内容部分

构建一个选项卡式内容部分:

  • 支持最多 5 个标签,每个标签包含标题和富文本内容
  • 商家可以在主题编辑器中添加、删除或重新排序标签
  • 响应迅速且易于访问
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可折叠公告栏

生成可折叠的公告栏:

  • 商家可以通过切换按钮显示/隐藏
  • 包括可编辑的消息和可选链接
  • 可由用户关闭并通过 localStorage 记住状态
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

功能列表块

创建功能列表部分:

  • 支持最多 8 个功能,每个功能都有图标、标题和描述
  • 商家可以在主题编辑器中自定义图标和订单
  • 以网格或行布局显示,适用于所有设备
提供 Liquid、JSON-T 模式和 CSS。

前后图像对比滑块

构建前后图像滑块:

  • 允许用户拖动滑块来显示两幅图像之间的变化
  • 商家可以在主题编辑器中上传这两张图片
  • 触摸友好且反应灵敏
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可扩展的产品详细信息

创建产品详细信息部分:

  • 使用折叠面板来显示规格、保养说明和运输信息
  • 商家可以为每个部分添加/编辑内容块
  • 手风琴面板可访问且可通过键盘导航
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

图标网格内容块

生成图标网格部分:

  • 显示最多 12 个带有标题和可选链接的图标
  • 商家可以上传 SVG 或从预设图标库中选择
  • 支持可调整列的网格布局
提供 Liquid、JSON-T 模式和 CSS。

团队成员手风琴

建立一个团队部分,其中:

  • 每个团队成员都是一个可折叠的方块,上面有照片、姓名、角色和简历
  • 商家可以在主题编辑器中添加/删除/重新排序成员
  • 部分响应迅速且易于访问
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可折叠的送货和退货信息

为运输和退货创建一个可折叠的信息块:

  • 放置在产品或购物车页面上
  • 商家可以在主题编辑器中编辑内容
  • 通过动画折叠/展开,并且可以通过键盘操作
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

比较表块

生成比较表部分:

  • 允许商家添加最多 5 列和 10 行的功能/规格
  • 支持突出关键差异
  • 在移动设备上响应迅速且可滚动
提供 Liquid、JSON-T 模式和 CSS。

可折叠的政策部分

为商店政策(例如隐私、条款、退款)构建一个可折叠的部分,以便:

  • 从页面或主题设置加载内容
  • 支持多种策略作为可折叠块
  • 可访问且适合移动设备
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带图标的手风琴

创建一个手风琴部分,其中:

  • 每个问题/标题都可以在文本旁边显示一个图标
  • 商家可以从预设中选择图标或上传自己的图标
  • 手风琴的样式注重可访问性和清晰度
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可折叠产品成分块

为产品成分生成可折叠块:

  • 点击/轻触即可展开显示完整成分列表
  • 商家可以在主题编辑器中编辑配料
  • 专为美容、食品或补品产品而设计
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

标签式产品信息

为产品页面构建一个选项卡式部分:

  • 支持描述、成分、评论和运输标签
  • 商家可以自定义标签标题和内容
  • 标签易于访问且响应迅速
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

博客分类的手风琴

为博客类别创建手风琴菜单:

  • 展开以显示每个类别下的帖子
  • 商家可以在主题编辑器中重新排序类别
  • 适合移动设备且易于访问
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可扩展的营业时间区块

生成内容块:

  • 默认折叠显示营业时间,点击后展开
  • 商家可以在主题编辑器中设置每天的营业时间
  • 易于访问且响应迅速
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

常见问题解答手风琴搜索

构建一个常见问题解答手风琴面板:

  • 包含一个搜索栏来实时过滤问题
  • 商家可以在主题编辑器中添加/编辑常见问题解答
  • 易于访问且针对移动设备进行了优化
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可折叠礼品指南块

为礼品指南创建一个可折叠的区块:

  • 展开以显示精选产品链接或系列
  • 商家可以按季节更新指南内容
  • 适合节日或特殊场合
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有富文本和图像的手风琴

生成一个手风琴部分:

  • 允许在每个扩展面板中显示富文本和图像
  • 商家可以在主题编辑器中添加/编辑内容
  • 响应迅速且易于访问
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

具有条件逻辑的内容块

创建内容块:

  • 根据客户标签、购物车价值或页面类型显示/隐藏部分
  • 商家可以在主题编辑器中设置展示规则
提供 Liquid、JSON-T 模式和 CSS。

多语言手风琴支持

构建一个手风琴部分:

  • 以客户选择的语言显示内容
  • 从元字段或 Shopify Markets 中提取翻译
  • 如果缺少翻译,则包含后备内容
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可访问性优先手风琴

生成一个手风琴部分:

  • 使用 ARIA 属性、键盘导航和高对比度样式
  • 完全兼容屏幕阅读器
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

如何使用:

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