Filter adjustment after showing variants on collection page

cty467
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: https://originateweb.com/show-color-variants-as-separate-products-on-collection-page/

-  Using Ride theme (Shopify free theme) 

Replies 6 (6)

BSS-Commerce
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

cty467
Shopify Partner
3 0 0

Hi @BSS-Commerce

Thanks for replying! Here's an example on my test store: https://cantoty-devtest.myshopify.com/collections/hydrogen?filter.v.price.gte=&filter.v.price.lte=&f...

 

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. 

 

cty467_0-1708356451512.png

 

Appreciate any assistance and guidance! Thanks again! 

TacoLlama
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!

TacoLlama
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

 

Old:

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

New:

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

 

DariusWS
Shopify Partner
84 1 19

Dhruv_Sagpariya
Shopify Partner
1 0 0

Hi @cty467 ,

I am facing same problem in my store as well.
Did you get any solution ?