Filter adjustment after showing variants on collection page

Shopify Partner
3 0 0

Hi there, 


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

- Code used to show variants:

-  Using Ride theme (Shopify free theme) 

Replies 5 (5)

Shopify Expert
3477 461 518

Hi @cty467 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Shopify Partner
3 0 0

Hi @BSS-Commerce

Thanks for replying! Here's an example on my test store:


Password: 123


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. 




Appreciate any assistance and guidance! Thanks again! 

Shopify Partner
9 0 2

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.


Good luck!

Shopify Partner
9 0 2

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.


File: snippets/product-grid-item.liquid



{%- assign price = product.price_min | money -%}


{%- assign price = product.selected_or_first_available_variant.price | money -%}


Shopify Partner
84 1 19