Filter products in a collection with the Storefront API
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
Anchor link to section titled "Requirements"- 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.
Query products by collection
Anchor link to section titled "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 on product type, vendor, variant options, price, and whether the product is in stock.
Query products by type
Anchor link to section titled "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.
Query products by vendor
Anchor link to section titled "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.
Query products by variant options
Anchor link to section titled "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
.
Query products by price
Anchor link to section titled "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.
Limitations
Anchor link to section titled "Limitations"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:
Query products in stock
Anchor link to section titled "Query products in stock"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.
Combine filters
Anchor link to section titled "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
Query available filters
Anchor link to section titled "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 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.