How to make my variant selector working in collection page or selectable in collection page.

Hi everyone,
I have a variant selector in my store, it is working in product page, but in collection page it is just displayed you can’t select or interact with it. Is there a way to make it work? Or make it clickable where you can select a variant from collection page. See photo for reference:
Store Preview URL:https://wdrxkg4eqlpainua-13830324282.shopifypreview.com

are you useing dawn theme ??

@HamdiBenBechir , yes

i got this when you click on any variant it redirect you to the product page??

thats because the container of the product card is tage

Yes, when I clicked anything in the card, it goes to the product page, so how di I make the variant selector clickable?

try to give the variant z-index useing css or give the card prevantDefault() javascript function on click into the card

let me now if it work.

I’ve added this code: .collection-product-card__swatch {
position: relative;
z-index: 9999;, but it’s not working

did you try the javascript function?

nope, I have limited knowledge about this. If you can help me with that. I greatly appreciate it.

sure

Hello, Did you add this variation selector with custom code by modify dawn theme or something else. If you inform us then we can check.

@Arif_Shopidevs Hi! Thanks for your response Yes I added the variation seletor with custom code

In this case you need to rewite this solution with any good developer or find any solution in forum exits or not.
The variation click need to find product variation related information and then change theme. This is a time consuming taks.