第 5 类:滑块和旋转木马

22 个专家制作的 Claude.AI 提示,用于创建 Shopify 滑块和轮播元素

特色产品轮播

为特色产品轮播创建一个 Shopify 部分:

  • 显示选定系列的产品
  • 支持导航箭头和点
  • 允许商家设置每张幻灯片的商品数量
  • 实现图像的延迟加载
输出 Liquid、JSON-T 模式、JavaScript 和 CSS。

推荐滑块

建立一个推荐滑块部分:

  • 支持最多 10 条评价,每条评价均包含姓名、照片和引言
  • 具有可调速度的自动播放功能
  • 适合移动设备,支持滑动手势
  • 允许商家添加、删除或重新排序评价
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

博客文章轮播

生成博客文章轮播部分:

  • 显示最近的博客文章,包括图片、标题、摘录和“阅读更多”按钮
  • 支持水平滚动和导航控制
  • 完全响应
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

品牌标志轮播

为品牌标识创建轮播部分:

  • 显示最多 12 个品牌或合作伙伴徽标
  • 支持自动滚动和手动导航
  • 商家可以在主题编辑器中上传徽标并设置链接
提供 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。

Instagram动态轮播

构建一个 Instagram 动态轮播部分:

  • 从指定的 Instagram 帐户中提取最新帖子
  • 在可滑动的轮播中显示图片,并带有帖子链接
  • 商家可以设置显示的图片数量
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

促销倒计时轮播

生成产品轮播:

  • 显示当前正在销售的产品,并带有倒计时覆盖
  • 商家可以为每个产品设置销售结束日期/时间
  • 促销结束时计时器自动隐藏
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

可自定义断点的轮播

创建一个轮播部分:

  • 允许商家为桌面、平板电脑和移动设备上的可见幻灯片数量设置自定义断点
  • 支持拖动/滑动手势和键盘导航
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

无障碍优先轮播

构建一个轮播部分:

  • 对所有控件使用 ARIA 角色和标签
  • 完全可以通过键盘导航
  • 包括跳至内容和暂停/播放控件,方便访问
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有动画幻灯片过渡的轮播

生成一个轮播:

  • 支持多种过渡效果(滑动、淡入淡出、缩放)
  • 商家可以在主题编辑器中选择过渡风格和速度
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带产品快速查看功能的轮播

创建产品轮播,其中:

  • 每个产品都有一个“快速查看”按钮,可打开包含产品详细信息的模式
  • 模态支持添加到购物车和变体选择
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有部分背景的轮播

构建一个轮播部分:

  • 允许商家为整个轮播设置背景图像或颜色
  • 支持叠加文本或图形
提供 Liquid、JSON-T 模式和 CSS。

带有动态徽章的轮播

生成产品轮播:

  • 根据产品标签或元字段在幻灯片上显示自定义徽章(例如“新品”、“畅销品”)
  • 徽章样式可在主题编辑器中自定义
提供 Liquid、JSON-T 模式和 CSS。

带视频幻灯片的轮播

创建一个轮播部分:

  • 支持图像和视频幻灯片
  • 商家可以上传视频或嵌入 YouTube/Vimeo
  • 视频幻灯片自动播放和循环,带有静音选项
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

支持多语言的轮播

构建一个轮播部分:

  • 以客户选择的语言显示幻灯片内容(标题、说明、CTA)
  • 从元字段或 Shopify 市场提取翻译
  • 如果缺少翻译,则包含后备内容
提供 Liquid、JSON-T 模式和 CSS。

无限循环的轮播

生成一个轮播:

  • 双向无限循环
  • 支持自动播放,速度可调
  • 商家可以在主题编辑器中启用/禁用无限循环
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带分段调度的轮播

创建一个轮播部分:

  • 商家可以安排仅在特定日期出现(例如假日促销)
  • 根据时间表自动隐藏/显示部分
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

如何使用:

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