Storefront API - filtering on product variant color

[dev88]

Hi,

How can I use GraphQL to retrieve all products with a specific variant option? (i.e. "color=red")?

(in the Storefront API)

[hassain · Accepted solution]

Hi @dev88 ,

When using the Storefront API, you can filter for specific products by passing in the “query” argument (along with the argument of “first” or “last”)  while querying the ‘products’ connection. Through this “query” argument, you can use Shopify’s search syntax to filter by the following supported filter parameters in the ‘products’ connection:

• available_for_sale
• created_at
• product_type
• tag
• title
• updated_at
• variants.price
• vendor
  

You can read more about the supported filter parameters of the “query” argument in the ‘products’ connection here.

You are unable to filter by varaints.title (or any other variants sub-field other than variants.price), so you cannot directly filter products by a specific variant option like ‘color=red’. As a workaround however what you could do instead is add the tag “Red” to your products that have a variant with the 'color=red'. (Read more about how to add tags to a product here). Then you can use the following GraphQL query to get all of your products with a variant that has the option for the color red:

query {
  products (first: 10, query: "tag:Red" ) {
    edges {
      node {
        id
        availableForSale
        title
        tags
        variants (first: 10) {
          edges {
            node {
              id
              title
            }
          }
        }
      }
    }
  }
}

[dev88]

Thanks for your detailed answer, @hassain.