Filter products in a collection

You can use the Storefront API to filter products in a collection. This functionality lets you build a desired customer experience on a storefront, such as the ability to narrow down the search results that you display to customers.

This tutorial shows you how to filter products in a collection based product type, vendor, variant options, price, and whether the product is in stock.

Requirements

To use the GraphQL queries, your app must request the unauthenticated_read_product_listings access scope for a Shopify store.

Limitations

For filter groups of type PRICE_RANGE, passing in multiple ranges isn't supported. If you specify multiple price filters, then everything is ignored except for the first range. The following filters are equivalent:

Query products by collection

To retrieve products by the collection that they belong to, you can query the collection's handle. You'll use the handle in subsequent steps in this tutorial to filter products in a collection based product type, vendor, variant options, price, and whether the product is in stock.

POST /api/unstable/graphql.json

View response

JSON response

Query products by type

You can query products in a collection by their type (productType). In the following example, products in the collection that have the "shoes" product type are returned.

POST /api/unstable/graphql.json

Variables

View response

JSON response

Query products by vendor

You can query products in a collection by vendor (productVendor). In the following example, products in the collection that are from a vendor called "bestshop" are returned.

POST /api/unstable/graphql.json

Variables

View response

JSON response

Query products by variant options

Merchants can add variants to a product that has more than one option, such as size or color. Each combination of option values for a product can be a variant of that product.

You can query products by their variant option name (variantOptionName) and value (variantOptionValue). For example, a variant option's name might be color, and the variant option's value might be red.

POST /api/unstable/graphql.json

Variables

View response

JSON response

Query products by price

You can query products in a collection by their price. In the following example, the first 10 products that are between the price range of 25.00 CAD and 50.00 CAD are returned.

POST /api/unstable/graphql.json

Variables

View response

JSON response

Query products in stock

To retrieve information about whether products and their associated variants are in stock, you can specify the inStock: true filter and query the availableForSale field on the products object.

POST /api/unstable/graphql.json

Variables

View response

JSON response

Combine filters

You can combine filters in your queries to retrieve products in a collection that have a set of characteristics.

Different filters get combined using the AND operator. For example [{ productType: "shoes" }, { productVendor: "bestshop" }] returns products that have the productType "shoes" AND are from the productVendor "bestshop".

Multiples of the same filter get combined using the OR operator. For example, [{ productType: "shoes" }, { productType: "socks" }] returns products that have the productType socks OR shoes.

The following example shows how to query for products that have all the following characteristics:

  • Type: shoes
  • Vendor: bestshop
  • Color: blue

POST /api/unstable/graphql.json

Variables

View response

JSON response

Query available filters

The following example shows how to query the available filters for products in a collection. You can use the response to construct a filter panel on a storefront.

The type field specifies two types of user interface (UI) components: LIST and PRICE_RANGE. LIST represents multiple choice options and PRICE_RANGE represents a range of prices.

Each filter group includes a list of selectable values with a corresponding count that indicates how many products in the collection match the filter value. Each value has a filterParams field with a JSON serialized value. The JSON serialized value matches the ProductFilter input schema and can be used as input to the filters field of the parent products field.

POST /api/unstable/graphql.json

View response

JSON response

Next steps

  • Learn how to manage a cart in Shopify with the Storefront API.
  • Learn how to manage customer accounts with the Storefront API.
  • Support multiple languages on a storefront with the Storefront API.
  • Learn about the different tools that you can use to create unique buying experiences anywhere your customers are, including websites, apps, and video games.