Product Filters 2.0 and Separated Variants on Collection Pages

Store Design
1

While developing and customizing a theme for a client, I was able to successfully display product variants as individual products on collection pages via tutorials like Here. All is well and good but I haven’t been able to figure something out in regards to the Shopify 2.0 product filter.

If each color variant of a T Shirt is showing on the page all three will continue to show no matter which color I select in the product filter. For example, I have a Green T Shirt, a Red T Shirt, and a Blue T Shirt. If I click the Green color filter option, it still shows the Red and Blue because it’s tied to the overall product or product id somehow. It’s baffling me and I was just wondering if anyone had some ideas or past experience working with separate variants on collection pages and filters. It’s a long shot but thought I would ask. :slightly_smiling_face:

1 Like
2

Please let us know if you find a solution. I’m facing the same issue. I think it is because the code is prioritizing showing all variants even after the filter is applied.

3

Well, I don’t believe it is possible. We were hoping to make it happen somehow because we thought that’s what was going on with a few other sites we liked but it turns out they were just actually entered as separate products and the “variant” options on the single product page were links that refreshed the content of the page without a full reload. So, in the end, that’s what we are doing as well.