第 2 类:产品网格和列表

25 个由专家精心制作的 Claude.AI 提示,用于创建 Shopify 产品展示

具有过滤功能的动态产品网格

为产品网格创建一个 Shopify 部分:

  • 动态显示所选系列的产品
  • 包括按标签、价格和可用性进行筛选
  • 支持网格布局选项(2、3 或 4 列)
  • 响应迅速且易于访问
输出 Liquid、JSON-T 模式和 CSS。

无限滚动产品列表

构建一个产品网格部分:

  • 当用户滚动时自动加载更多产品
  • 在获取过程中显示加载旋转器
  • 使用适当的分页标记保留 SEO
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有快速查看模式的产品网格

为 Shopify 生成产品网格:

  • 以网格布局显示产品
  • 每个产品悬停时包含“快速查看”按钮
  • 在模态框中显示产品详情、图片和添加到购物车
输出 Liquid、JSON-T 模式、JavaScript 和 CSS。

自定义产品类型显示

创建产品网格:

  • 在每个产品标题下显示自定义产品类型
  • 从 Shopify 的产品对象中提取产品类型
  • 允许商家在主题设置中切换显示
提供 Liquid、JSON-T 模式和 CSS。

带有可定制徽章的网格

构建产品网格,其中:

  • 产品可以显示自定义徽章(例如“畅销品”、“库存有限”)
  • 徽章通过元字段或标签设置
  • 徽章颜色和文字可定制
提供 Liquid、JSON-T 模式和 CSS。

砌体式产品网格

生成砌体风格的产品网格部分:

  • 以类似 Pinterest 的布局排列产品
  • 自动调整以适应不同的图像高度
  • 在所有设备上保持响应
输出 Liquid、JSON-T 模式和 CSS。

标签式产品网格(热门/新品/畅销品)

为 Shopify 创建一个选项卡式产品网格部分:

  • 允许商家设置“流行趋势”、“新品”、“畅销品”等标签
  • 每个标签显示来自不同系列或标签的产品
  • 可在主题编辑器中自定义标签
提供 Liquid、JSON-T 模式和 CSS。

具有悬停效果的产品网格

构建一个产品网格:

  • 悬停时显示替代图像或产品详细信息
  • 允许商家自定义悬停效果(缩放、淡入淡出、滑动)
  • 针对桌面和移动设备进行了优化
提供 Liquid、JSON-T 模式和 CSS。

带有颜色样本的网格

生成产品网格,其中:

  • 每件产品的图片下方均显示可用的颜色样本
  • 色板可点击并更新主图像
  • 样品颜色通过产品变体设置
提供 Liquid、JSON-T 模式和 CSS。

带有库存状态徽章的网格

创建产品网格:

  • 根据库存显示“有货”、“库存不足”、“售罄”等标记
  • 库存阈值可在主题设置中配置
  • 如果可能的话,徽章实时更新
提供 Liquid、JSON-T 模式和 CSS。

SEO优化产品网格

构建一个产品网格:

  • 使用语义 HTML 来列出产品列表(例如 <article>、<h2>、<img>)
  • 包括产品、价格和评论的 schema.org 标记
  • 针对快速加载和可访问性进行了优化
提供 Liquid、JSON-T 模式和 CSS。

带有愿望清单集成的网格

创建产品网格部分:

  • 允许用户在愿望清单中添加/删除产品
  • 将愿望清单存储在 localStorage 中或通过 Shopify 客户元字段
  • 每件产品上均显示愿望清单图标
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

具有快速添加到购物车的产品网格

生成产品网格,其中:

  • 每个产品都有一个快速“添加到购物车”按钮
  • 如果需要,支持变体选择
  • 实时更新购物车数量
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有评分和评论的网格

构建一个产品网格:

  • 显示每个产品的平均星级和评论数
  • 与 Shopify 的产品评论应用程序或元字段集成
提供 Liquid、JSON-T 模式和 CSS。

价格范围和折扣网格

创建产品网格,其中:

  • 如果有多个款式,产品会显示价格范围
  • 显示比较价格和折扣百分比(如果促销)
  • 销售徽章可定制
提供 Liquid、JSON-T 模式和 CSS。

移动优化产品网格

生成产品网格部分:

  • 在移动设备上垂直堆叠产品
  • 允许使用滑动手势进行水平滚动
  • 保持快速的加载时间和触摸目标
提供 Liquid、JSON-T 模式和 CSS。

带有供应商/品牌展示的网格

构建产品网格,其中:

  • 每个产品的标题上方都显示供应商或品牌名称
  • 供应商显示可在主题设置中切换
提供 Liquid、JSON-T 模式和 CSS。

带有倒计时功能的销售表格

创建产品网格:

  • 显示活跃销售产品的倒计时器
  • 计时器从产品元字段中提取销售结束日期
  • 促销结束时隐藏计时器
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

包含产品类别元字段的网格

构建一个产品网格:

  • 显示每个产品下的类别元字段(例如尺寸、颜色、面料)
  • 从 Shopify 的标准产品分类法和元字段中提取数据
  • 允许商家选择要显示的属性
提供 Liquid、JSON-T 模式和 CSS。

带有分页控件的网格

创建产品网格部分:

  • 包括可访问、SEO友好的分页控件
  • 允许商家设置每页产品
  • 支持编号和“加载更多”分页
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

带有自定义标签的网格,用于显示新品/特色商品

生成产品网格,其中:

  • 标有“新品”或“特色”的产品会显示自定义标签
  • 标签文本和颜色可在主题设置中编辑
提供 Liquid、JSON-T 模式和 CSS。

具有产品比较功能的网格

构建一个产品网格部分:

  • 让用户选择产品进行并排比较
  • 打开比较模式或部分,查看所选产品的规格
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

具有辅助功能增强功能的网格

创建产品网格:

  • 确保所有图片都具有 alt 属性
  • 对所有交互元素使用 ARIA 角色
  • 完全可以通过键盘导航
提供 Liquid、JSON-T 模式和 CSS。

包含最近浏览过的产品的网格

建立一个部分:

  • 向用户显示最近查看的产品网格
  • 商店在 localStorage 或通过 Shopify 客户元字段查看过产品
  • 响应迅速且可定制
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

具有自定义排序选项的网格

创建产品网格:

  • 允许用户按价格、受欢迎程度或最新情况对产品进行排序
  • 排序选项可在主题设置中配置
提供 Liquid、JSON-T 模式、JavaScript 和 CSS。

如何使用:

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