Filtering products in a collection by tag

[lukebennett88]

Sorry if this isn't the right place, but I figured I'm more likely to find a developer who can help me here 😅
I'm building a Shopify store using Remix (I started working on it before Hydrogen 2 came out) and noticed the latest version of the API supports filtering by tag now (which would be super handy).
I don't suppose anyone can tell if I have the syntax wrong or something? It doesn't seem to work. Here's an example query using the GraphQL explorer hosted here.

{
  collection(handle: "latest-stuff") {
    products(first: 250, filters: {tag: "Tee"}) {
      edges {
        node {
          tags
        }
      }
    }
  }
}

The products returned don't seem to be filtered at all.

{
  "data": {
    "collection": {
      "products": {
        "edges": [
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "6",
                "Black",
                "Blouse",
                "DKNY",
                "White"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "6",
                "Black",
                "DKNY",
                "Tee",
                "White"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "2",
                "4",
                "6",
                "Black",
                "DKNY",
                "Dress"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "Black",
                "DKNY",
                "Dress",
                "White"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "6",
                "Black",
                "DKNY",
                "Heathered Dove",
                "Tee",
                "White"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "6",
                "Black",
                "DKNY",
                "Dress"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "6",
                "Black",
                "DKNY",
                "Dress",
                "Red"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "6",
                "DKNY",
                "Dress",
                "Pulse"
              ]
            }
          },
          {
            "node": {
              "tags": [
                "0",
                "2",
                "4",
                "DKNY",
                "Heather Grey",
                "Sweater",
                "White"
              ]
            }
          }
        ]
      }
    }
  }
}

[frehner]

Can you try adding the "Search and Discovery" app, and then adding "tags" as something that's enabled? I could be wrong but I think it has to be enabled that way for it to work correctly. Let me know if that doesn't do it.

[danielredwood]

playing with this, can second the search and discovery app has changed and filtering by tag returns no results for me.

a few details to add

• in search and discovery, you can create a filter with the data source of tags. perhaps the new mode?
• my test query returns the filter as available but returns no product nodes with it

Query

  collection(handle: $handle) {
    id
    handle
    filteredProducts: products(first: 20, filters: [{tag: "bib-shorts"}]) {
      availableFilters: filters {
        label
        id
      }
      nodes {
        title
      }
    }
  }
}

Response

{
  "data": {
    "collection": {
      "id": "gid://shopify/Collection/261512822895",
      "handle": "everyday",
      "filteredProducts": {
        "availableFilters": [
          {
            "label": "Availability",
            "id": "filter.v.availability"
          },
          {
            "label": "Price",
            "id": "filter.v.price"
          },
          {
            "label": "Tag",
            "id": "filter.p.tag"
          }
        ],
        "nodes": []
      }
    }
  }
}

[frehner]

Hey all, sorry I'm no longer part of the Hydrogen team so I'm not sure how to fix this at the moment. I'll try to bring this to the Hydrogen team's attention and hopefully they get back to you all.

[blittle]

The search & discovery app has changed, but these should work. You have to use the real tag value. (without - or _)
tag: "bib shorts"

[danielredwood]

nice thanks bret, that works for me.

@phanpak set up the search and discovery app with the attributes you want to filter on over the API. for tags in particular use the value per above, like product.tags. that means spaces and so rather than a slugified version. hope that helps!

[phanpak]

I don't see tags in the sources for filters

[meisbellajack]

When building with Remix or Hydrogen, getting the Storefront API syntax exactly right for filtering can be tricky, especially since the API evolved recently.

A common issue is the formatting of the query parameter. When filtering by tag, the syntax usually requires a specific string format like query: "tag:your-tag-name". If you are trying to combine multiple tags, ensure you are using the correct boolean logic (AND/OR) within that string. Also, double-check that your API version in your shopify.server.ts or client config is set to at least 2023-01 or later, as older versions handle filtering differently.

Beyond the Code: Improving User Experience
While technical filters are great for getting the right data, remember that how these options appear to the customer is just as important. If you are building out complex product pages with many variants or custom options, you want to avoid layout shifts where the page jumps around as the filters load.

For many Shopify developers, using a native approach like Misk Variant Options is a lifesaver. It is built as a Native App Embed, meaning it stays stable and loads instantly with your theme. This ensures that once your tags and filters work, the actual product selection feels smooth and Great and Beautiful for the shopper. It’s a simple way to make sure your custom build stays professional and flicker-free.