A user implemented code to display product variants as separate items on Shopify collection pages, but this breaks the filtering functionality. When filtering by attributes like color (e.g., “Red”), all variants of matching products appear—even non-red variants—because the filter operates at the product level rather than the variant level.
One participant found a workaround for pricing display by switching from product.selected_or_first_available_variant.price to product.price_min, though this has bugs when the first variant isn’t the cheapest
Shopify’s official visual variant filters were suggested as a potential solution
Current Status:
The core issue remains unresolved. The problem stems from filters returning all products where at least one variant matches, rather than filtering variants themselves. A proper solution would require the search app to filter variants before passing product data to the theme, which may not be possible with current Shopify Search & Discovery functionality.
Summarized with AI on November 9.
AI used: claude-sonnet-4-5-20250929.
I’m a bit stuck and hoping to get some help from the community
I’ve edited the code to show variants as separate products on the collection page. It’s working fine, but now that seems to mess with the filtering ability. E.g. if I filter “Red” on the collection page, all red products AND their variants (even if not red) will all appear as separate products. Same occurs even if I use variant metatags.
I’m assuming this is because the code makes any product with variants, show variants as separate variant product cards. Therefore even after filtering, the variant product cards still show even though they’re not related to the filter.
I’ve been trying to resolve this, but haven’t had any luck. Would appreciate any pointers from anyone. Thanks!
For context:
I’m using the filter from Shopify’s Search and Discovery
On the collections page, you can see that even with filters applied - non-relevant variants will continue to show. In the example, I’ve selected “red”. The variant filter metatags are correct for each variant.
I think I’m running into the same problem from a different angle. I’m trying to only show “From $XXX” based on which variants pass the search/filter.
Our shared problem is that the products getting passed around is all products where at least one variant matches. We need each product to remove the variants that don’t pass the filter - not just products with no variants that pass the filter.
In theory, if I can figure out how to examine the active filters, I can just re-run those filters myself to calculate the prices to show. Yours will need to be at a deeper level, when pagination is happening. I think that means the search app needs to do it for you - which probably means getting a different search app.
I am sorry, I doubt this solution is helpful to you. But I did find my solution. I seek to leave a breadcrumb here for someone, anyone. Maybe it will give you some deeper insight into your problem. I didn’t need to process the filters, access the URL bar, or build an array of matching variants for each product. I found it as I was drafting up the pseudocode to do that.
It’s basically a one-word change. I noticed that as I was filtering, it would display the variant image for a variant that matches. I don’t know if that insight is at all helpful for you.
This actually has a bug in it. In some conditions, it will show a different price and say that is the lowest price. The big one I remember finding was “if the first variant isn’t the cheapest variant, it will use the first variant price anyway”. It also had some interactions with filters from Search & Discovery.
This makes the fix a bit messier. I had to split out if it’s the selected variant, or not. Then if the price is the max AND the price varies, or not.
