Hydrogen Storefront - Product Filtering

[NewUser0606]

We are currently working on filtering products based on a metafield in a headless storefront (Hydrogen framework). We followed the documentation to create a basic query for this, but the response doesn't include the expected metafield value for the products. Here’s the query we used:

query tumbleDryProducts {
  collection(handle: "xxxxxxxxxxx") {
    id
    handle
    title
    products(first: 10, filters: { productMetafield: { namespace: "custom", key: "flag_name", value: "top" } }) {
      nodes {
        id
        title
        metafields(identifiers: [{namespace: "custom", key: "flag_name"}]) {
          key
          value
        }
      }
    }
  }
}

We need products with specific metafield values assigned to them, but the query does not return those filtered products as expected.
Could anyone please provide guidance or fixes for this issue? We're using the headless storefront built with Hydrogen, and any insights into the correct approach for implementing product filtering based on metafields would be greatly appreciated.

[obinecko]

Hi, have you manage to find solution, or still need help ?
iam more intrigued to enable filter including metafields on search route 😕

[Rafo]

If somebody is still trying to find a solution, thing that was a blocker for me was a Shopify Search & Discovery app. You HAVE to install it and then go in that app, filters settings and enable filters for specific metafields! Check docs on this link and make sure to check first section requirements. 

Regarding unauthenticated_read_product_listings access scope, my Hydorgen storefront already had this permission, but for other storefronts you might have to enable it.

[obinecko]

Does the filter work on search route tho ?

[Rafo]

---

I haven’t explored predictive search much yet, but as far as I can tell from the documentation, it uses a predefined list of properties for searching. So, adding any filters in the Shopify Search & Discovery app only allows filtering by that field in the collections GraphQL query, as shown in the first blog post. You can see all the properties used for filtering in predictive search in the documentation here. Hope this helps!