I’m building a React Native mobile app using the Shopify Storefront GraphQL API.
I’m fetching products from a collection and already support sorting, pagination, and basic filters.
Currently, I’m able to:
-
Fetch products by collection handle
-
Sort products (featured, price, title, created)
-
Paginate using cursors
-
Apply price and availability filters
Now I want to filter products based on variant fields, specifically:
-
Variant options like Size and Color
-
Possibly variant-level attributes in the future.
Below I have added the query I am using:
storefront GraphQL Query:
query getCollectionProducts(
$handle: String!
$cursor: String
$sortKey: ProductCollectionSortKeys
$reverse: Boolean
$filters: [ProductFilter!]
) {
collection(handle: $handle) {
title
products(
first: 50
after: $cursor
sortKey: $sortKey
reverse: $reverse
filters: $filters
) {
edges {
cursor
node {
id
title
tags
description
vendor
images(first: 1) {
edges {
node {
src
}
}
}
priceRange {
minVariantPrice {
amount
currencyCode
}
}
}
}
pageInfo {
hasNextPage
}
}
}
}
Filter structure on frontend:
type ProductFilter = {
availability?: boolean;
minPrice?: number;
maxPrice?: number;
colors?: string;
sizeFit?: string;
};
How I am building
filters dynamically:
const filters: any = ;
// Price filter
if (
options?.filters?.minPrice !== undefined ||
options?.filters?.maxPrice !== undefined
) {
filters.push({
price: {
min: options.filters.minPrice,
max: options.filters.maxPrice,
},
});
}
// Availability filter
if (options?.filters?.availability === true) {
filters.push({ available: true });
}
// Size filter (variant option)
if (options?.filters?.sizeFit?.length) {
filters.push({
variantOption: {
name: “Size”,
values: options.filters.sizeFit,
},
});
}
// Color filter (variant option)
if (options?.filters?.colors?.length) {
filters.push({
variantOption: {
name: “Color”,
values: options.filters.colors,
},
});
}
Hi @Team_Impat! I spotted the issue - you’re using values (plural) in your filter, but the VariantOptionFilter expects value (singular). Each filter can only specify a single value.
Here’s what the correct structure looks like:
# Single variant option filter
filters: [
{ variantOption: { name: "Size", value: "Large" } }
]
If you want to filter by multiple sizes (like Small OR Medium OR Large), you need to pass multiple filter objects - the Storefront API combines multiple filters of the same type with OR logic:
# Multiple sizes (returns products with Small OR Medium OR Large)
filters: [
{ variantOption: { name: "Size", value: "Small" } },
{ variantOption: { name: "Size", value: "Medium" } },
{ variantOption: { name: "Size", value: "Large" } }
]
# Combining different options (Size OR Color filtering)
filters: [
{ variantOption: { name: "Size", value: "Large" } },
{ variantOption: { name: "Color", value: "Blue" } }
]
So you’ll need to build your filters array by adding one filter object per value you want to include.
This is the actually query I am trying on postman:{
“query”: “query getCollectionProducts($handle: String!, $cursor: String, $sortKey: ProductCollectionSortKeys, $reverse: Boolean, $filters: [ProductFilter!]) { collection(handle: $handle) { title products(first: 10, after: $cursor, sortKey: $sortKey, reverse: $reverse, filters: $filters) { edges { cursor node { id title vendor availableForSale options { name values } variants(first: 20) { edges { node { id availableForSale selectedOptions { name value } } } } images(first: 1) { edges { node { src } } } priceRange { minVariantPrice { amount currencyCode } } } } pageInfo { hasNextPage } } } }”,
“variables”: {
"handle": "boys",
"cursor": **null**,
"sortKey": "TITLE",
"reverse": **false**,
"filters": \[
{
"variantOption": {
"name": "Size",
"value": "xxl"
}
},
{
"variantOption": {
"name": "Color",
"value": "Red"
}
}
\]
} And I am still not able to filter products based on variant fields, specifically: Variant options like Size and Color.
The syntax looks correct now with value (singular). If you’re still not seeing filtered results, the most common cause is that the filter hasn’t been enabled in the Search & Discovery app.
The Storefront API relies on filters being configured in Search & Discovery before they’ll work in API queries. By default, only availability and price filters are enabled. To enable variant option filters like Size and Color:
-
Install the Shopify Search & Discovery app if not already installed
-
Go to Apps > Search & Discovery > Filters
-
Click “Add filter” and select your product options (Size, Color) as filter sources
-
Save
Once configured there, your API filters should start working (sometimes there can be a short indexing delay after filter creation).
Also double-check that your filter values match exactly what’s stored on the variants - they’re case-sensitive. If your variants have “XXL” but you’re querying for “xxl”, it won’t match. You can query the available filters for a collection using the filters field on the products connection to see exactly what values are available and their expected format:
query {
collection(handle: "boys") {
products(first: 1) {
filters {
label
values {
label
input
}
}
}
}
}
If you’ve done all the above and it’s still not working, share the following and I can take a closer look:
-
The output of the filters query above (this shows exactly what filter values are available)
-
A screenshot of your Search & Discovery Filters page showing Size and Color are enabled
-
An x-request-id from the response headers of a request that didn’t work as expected
Hey @Team_Impat did the above end up working for you? If not, share the following and I can take a closer look: