在无头Next.js店面中同步Shopify产品图片至Sanity的方案咨询

方案一：把产品图片同步到Sanity数据集 #

• 调整Sanity Connect的同步配置：打开Shopify里的Sanity Connect应用，检查产品字段的同步设置——默认可能没开启图片同步。找到产品的images字段勾选同步；如果Sanity的产品schema里没对应图片字段，先在Sanity Studio里修改schema，添加一个array类型的image字段，再回到Connect里把Shopify的图片字段映射到这个新字段。
• 重新触发同步：配置完成后，在Sanity Connect里选择单个产品或者全量重新同步，就能把图片拉取到Sanity数据集里了。
• 注意事项：Sanity会存储图片副本，占用存储空间；后续Shopify里产品图片更新后，需要重新同步才能同步到Sanity。

方案二：直接从Shopify Storefront API获取产品图片 #

• 在Next.js应用中调用Storefront API查询产品时，顺便请求images字段即可，给个示例GraphQL片段：

query GetProduct($handle: String!) {
  product(handle: $handle) {
    images(first: 10) {
      edges {
        node {
          originalSrc
          altText
        }
      }
    }
  }
}

• 你本来就依赖Storefront API实现购物车、结账等功能，这样图片数据和电商核心数据来源一致，不会出现同步延迟或数据不一致的问题。
• 优化建议：可以用Next.js的静态生成（SSG）或者增量静态再生（ISR）提前预取图片数据，减少实时API调用带来的性能影响。

方案选择参考 #

• 如果需要在Sanity里对产品图片做额外编辑（比如裁剪、添加自定义标注），或者要在Sanity的内容组合场景中使用这些图片，选方案一。
• 如果追求数据实时性、不想占用Sanity存储空间，且电商逻辑本来就依赖Storefront API，方案二更省心高效。

内容的提问来源于stack exchange，提问作者Dave