如何通过Shopify Storefront API获取FRONTPAGE首页内容？

问题背景 #

我正在使用Shopify GraphQL API的menu查询获取主菜单，返回结果正常：

{
"data": {
    "menu": {
        "id": "gid://shopify/Menu/888734372",
        "title": "Main menu",
        "itemsCount": 4,
        "items": [
            {
                "id": "gid://shopify/MenuItem/62623462",
                "title": "Home",
                "type": "FRONTPAGE",
                "url": "https:/test.myshopify.com/",
                "resourceId": null
            },
            {
                "id": "gid://shopify/MenuItem/251532",
                "title": "Electronics",
                "type": "COLLECTION",
                "url": "https://test.myshopify.com/collections/catalog",
                "resourceId": "gid://shopify/Collection/26262"
            },
            {
                "id": "gid://shopify/MenuItem/888888",
                "title": "Clothing & Accessories",
                "type": "CATALOG",
                "url": "https://test.myshopify.com/collections/all",
                "resourceId": null
            }, 
            {
                "id": "gid://shopify/MenuItem/111111",
                "title": "About",
                "type": "PAGE",
                "url": "https:/test.myshopify.com/pages/about",
                "resourceId": "gid://shopify/Page/111111"
            }
        ]
    }
}
}

其中有一个FRONTPAGE类型的菜单项对应店铺首页，现在需要编写GraphQL查询获取首页展示的这些内容：

• 轮播图（Slideshow）
• 热门商品列表（Trending Products list）
• 促销商品列表（On Sale list）
• 男士时尚商品列表（Men Fashion list）

解决方案 #

Shopify首页内容通常基于Online Store 2.0主题的Sections或自定义模板构建，可通过以下GraphQL查询获取所需内容：

1. 直接获取首页Sections数据 #

通过shop.onlineStore.homepage字段拉取首页所有sections的配置和内容，这是官方推荐的方式：

query GetHomepageSections {
  shop {
    onlineStore {
      homepage {
        sections {
          type
          settings
          blocks {
            type
            settings
          }
        }
      }
    }
  }
}

• type：标识sections的类型（比如轮播图对应slideshow）
• settings：sections的核心配置（如轮播图的图片链接、标题文案）
• blocks：sections内的子元素（如轮播图的单张幻灯片）

2. 查询特定商品列表数据 #

如果首页的商品列表关联了指定集合，可单独查询集合或筛选商品：

促销商品（On Sale）查询

促销商品可通过价格筛选（价格低于对比价），或直接查询预设的促销集合：

query GetOnSaleProducts {
  products(first: 20, query: "price < compareAtPrice") {
    edges {
      node {
        id
        title
        handle
        images(first: 1) {
          edges {
            node {
              url
            }
          }
        }
        priceRange {
          minVariantPrice {
            amount
            currencyCode
          }
        }
        compareAtPriceRange {
          minVariantPrice {
            amount
            currencyCode
          }
        }
      }
    }
  }
}

热门/男士时尚商品集合查询

若为自定义集合，通过集合handle或ID查询：

query GetCollectionProducts($handle: String!) {
  collection(handle: $handle) {
    title
    products(first: 20) {
      edges {
        node {
          id
          title
          handle
          images(first: 1) {
            edges {
              node {
                url
              }
            }
          }
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
          }
        }
      }
    }
  }
}

变量示例（替换为实际集合handle）：

{
  "handle": "men-fashion"
}

3. 注意事项 #

• 部分主题的sections配置可能需要结合theme查询获取模板细节，但onlineStore.homepage是最直接的首页内容获取方式
• 若首页使用自定义页面作为入口，需先通过page查询获取页面ID，再拉取页面关联的sections和内容
• 商品查询的数量可通过first参数调整，最大支持250条

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