graphqlshopifyshopify-storefront-api

How to implement Shopify's new ProductFilter on the latest storefront API


I have been trying to follow this guide with examples step-by-step, but when I run the following query, Shopify returns every product from the collection instead of the filtered products. I have confirmed that I have the variant options on my products, it just appears to not apply the logic. Appreciate your time 🙏

query shopifyCollectionQuery($handle: String!, $limit: Int!) {
  collection(handle: $handle) {
    id
    title
    handle
    products(first: $limit, filters: {variantOption: {name: "Color", value: "Diamond/Grey"}}) {
      pageInfo {
        endCursor
        hasNextPage
      }
      edges {
        node {
          title
          totalInventory
          handle
          options {
            name
            values
          }
          variants(first: 100) {
            edges {
              node {
                selectedOptions {
                  name
                  value
                }
              }
            }
          }
        }
      }
    }
  }
}

Solution

  • If you don't install Shopify's new Search and Discovery plugin, you only have access to the default price/availability filters. Once you install the app, you can create new filters that get exposed on the storefront API (including variant based filters)

    https://apps.shopify.com/search-and-discovery