Wishlist icon on product image

peaknest · May 21

In the product image (without clicking on it), the wishlist icon appears directly over the product image, but as shown in the attached photo, it is not very visible. Is it possible to make it appear filled in white so that it stands out more?

Phil · May 21

Hi,

Try the following CSS code:

.mfn-wish-button .path{
 stroke: rgba(0,0,0,.5)!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

peaknest · May 21

Hi,

thank you now the wishlist icon is ok ... the problem is when I move the mouse on thee image, the other icons is up to wishlist icon and thi is not clickable .... solutions?

Phil · May 21

You can change the position of these icons to the center or bottom in Betheme -> Theme options -> Global -> Image frame:

Best regards

peaknest · May 21

Hi,

I know that ... but you would use modern overlay.

Thnx.

Phil · May 21

Sorry, but I do not understand what you mean by "but you would use modern overlay."

Please explain that in more detail.

Thanks

peaknest · May 21

I would use this option...

Phil · May 22

But with this option, the wishlist icon is covered with other icons.

Can you tell me what you want to achieve, please?

Thanks

peaknest · May 22

I would like the three round icons to be moved further down so that when they appear they don't cover the little heart on the wishlist like in picture...

Phil · May 22

Try the following CSS code:

.if-modern-overlay .image_frame .image_wrapper .image_links{
 top: 60px!important;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

peaknest · May 22

Perfect!!!

Thank you now is quite OK, but there is a small misalignment when I view the page from a smartphone...

Phil · May 23

Hi,

Use also the following CSS code:

@media only screen and (max-width: 767px){
 .if-modern-overlay .image_frame .image_wrapper .image_links{
   right: 16px!important;
 }
}

Best regards

Wishlist icon on product image

Comments