Filter products in a collection with the Storefront API

• You've reviewed and met the requirements that are listed on the Querying data with the Storefront API page.
• You've created products and collections in your store.
• You've verified that an Online Store 2.0 compatible theme, such as Dawn, is installed by checking if your theme supports filtering. The Online Store 2.0 theme does not need to be the published theme to enable product filtering.
• You've added any custom filters that you want to filter products by. Filters for availability and primary price are selected by default.

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

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 on product type, vendor, variant options, price, and whether the product is in stock.

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.

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.

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.

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.

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

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

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

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 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 an input 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.

• 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.