Shopify 商品与变体

product.images 和 media 顺序对不上导致主图错位

现象#

商品第 1 位放的是视频、第 2 位是主图,但 product.images.first 拿到的是第 2 位那张图,前台 featured image 与 API 导出的首图不是同一张。

原因#

  • images 只包含图片,跳过视频和 3D 模型,索引与 media 的位置不是一回事
  • position 属于 media 这一层,变体图仍指向底层的 Image 对象
  • featured_image 取第一张图片,而不是第一位的 media
  • 新上传媒体异步处理,处理完成前 position 可能还是空

处理步骤#

  1. 统一用 media(first: 20){ nodes{ id position mediaContentType status } } 读顺序
  2. 取图时在 ... on MediaImage { image { url altText } } 里拿真实地址
  3. 调整顺序调 productReorderMedia,不要直接改 position 数字
  4. 变体图用 variant.media 判断,别用 variant.image 反推位置
  5. 只在 status 为 READY 的媒体上做首图判断

验收标准#

media 第一位的 id 与前台 gallery 第一张一致;导出首图 URL 与后台标注的主图相同。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。