Storefront API: Variants Query Fails When Product Has Multiple Options

Technical Q&A
, ,

Topic summary

A developer is experiencing issues with Shopify’s Storefront API when querying product variants. The problem occurs specifically with products that have multiple options (e.g., Color + Size).

Current behavior:

  • Query works correctly for products with a single option (e.g., Size only)
  • Query fails or returns incomplete data for products with multiple options

Technical details:

  • Using GraphQL to fetch product data via getProductQuery
  • The query includes a variants(first: 15) field with selectedOptions to capture option name/value pairs
  • Code includes fragments for product details, images, pricing, and SEO data

The developer has shared their complete GraphQL query structure and is seeking guidance on whether there’s a missing configuration or schema issue causing the multi-option variant query to fail.

Status: Awaiting community input on potential solutions or schema adjustments.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m building a headless Shopify storefront using the Storefront API and ran into an issue.

When my product has only one option (like Size), the variants query works fine. But when I add multiple options (like Color + Size), the query fails or returns incomplete data.

Here is the GraphQL snippet I’m using:

export const getProductQuery = /* GraphQL */ query getProduct($handle: String!) { product(handle: $handle) { ...product } } ${signleProductFragment};

export const signleProductFragment = /* GraphQl */ `
fragment product on Product {
id
handle
availableForSale
title
description
descriptionHtml
priceRange {
maxVariantPrice {
amount
currencyCode
}
minVariantPrice {
amount
currencyCode
}
}

featuredImage {
…image
}
variants(first: 15) {
edges {
node {
id
title
sku
availableForSale
price {
amount
currencyCode
}
compareAtPrice {
amount
currencyCode
}
selectedOptions {
name
value
}
image {
url
altText
}
}
}
}
images(first: 1) {
edges {
node {
…image
}
}
}

seo {
…seo
}
tags
updatedAt
}
${imageFragment}
${seoFragment}
`;

The same query works on single-option products but causes issues on multi-option products.

Am I missing something in the setup or schema? Any suggestions would be appreciated!

Thanks!