Hydrogen 2.0+Shopify Plus适配的Shopify应用及使用问题咨询

问题描述 #

1. 适配Hydrogen 2.0与Shopify Plus的新店铺前端，可使用哪些Shopify应用？
2. Shopify官方的Search & Discovery应用，在Hydrogen中如何使用？即便仅通过API获取其生成的关联/互补商品数据，也找不到可行文档。
3. 在Shopify应用商店搜索时，如何判断应用是否适配Hydrogen还是仅支持Liquid主题？

解决方案 #

一、适配Hydrogen 2.0的Shopify应用范围 #

• 优先参考Shopify官方整理的“扩展Hydrogen构建”应用集合，这类应用经过官方验证，适配Hydrogen的Headless架构。
• 关注支持Shopify Storefront API的应用：Hydrogen基于Storefront API构建，只要应用能通过该API暴露数据或功能，无论官方还是第三方，都可在Hydrogen前端集成。

二、Search & Discovery应用的Hydrogen集成方式 #

该应用的核心功能（商品推荐、搜索规则、个性化结果）完全通过Shopify Storefront API提供支持，无需专属Hydrogen文档，直接通过GraphQL查询即可获取数据：

• 关联/互补商品：使用productRecommendations查询，传入目标商品ID即可获取后台配置的推荐结果，示例查询：

query GetProductRecommendations($productId: ID!) {
  productRecommendations(productId: $productId) {
    nodes {
      id
      title
      price {
        amount
        currencyCode
      }
      images(first: 1) {
        nodes {
          url
        }
      }
    }
  }
}

• 搜索功能：使用search查询传入关键词，Search & Discovery配置的搜索规则（如同义词、权重）会自动生效，返回符合规则的结果。
• 在Hydrogen中可直接用useQuery钩子或内置GraphQL客户端执行上述查询，将数据渲染到前端组件。

三、判断应用是否适配Hydrogen的方法 #

• 查看应用详情页兼容性说明：部分应用会明确标注“支持Hydrogen”“Headless兼容”或“仅适用于Liquid主题”，这是最直接的判断方式。
• 检查应用技术文档：适配Headless的应用通常会提供Storefront API调用说明、Hydrogen/React组件示例，或明确说明支持Headless场景。
• 查看应用权限要求：仅请求“主题编辑”权限的应用大概率只支持Liquid主题；请求“Storefront API访问”权限的应用更可能适配Hydrogen等Headless前端。
• 咨询应用开发者：若没有明确标注，可通过应用商店的开发者联系方式确认适配性。

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