Re: Filter adjustment after showing variants on collection page

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 7 (7)

BSS-Commerce
Shopify Expert
3477 463 527

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
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
10 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
10 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 -%}

 

TacoLlama
Shopify Partner
10 0 2

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.

TacoLlama_0-1716771947887.png

 

DariusWS
Shopify Partner
84 1 20

Dhruv_Sagpariya
Shopify Partner
2 0 0

Hi @cty467 ,

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