Product Image on Mobile

Hi,

When I’m in shop page and I mouseover the product image I have the option to appear a bottom bar with “buy now”, “quick view” and “add to wishlist” but in the mobile version this bar is sticky.
Can I change the appearance of this in mobile maintaining the mouseover bar on desktop version?
How can I achieve this?

Thanks
SR

Here it is what im talking about, attached image.
How to remove this bar only on mobile and choose other option?

Thanks
SR

Attachments:

You must be logged in to view attached files.

Hello,

Do you mean you want to have this bar sticky on the desktop?

Best Regards

No, on the desktop I want to maintain what I have.
In the mobile I would prefer other option that the user can see all the product Image.

Hello,

I can make this bar transparent and contrast icons. Unfortunately, there is no other way. Please advise if it would work for you?

Best Regards

OK, we can try that solution.

Hello,

Please find this code:

body .basel-hover-base .hover-mask {
background-color: #05326B;
}

And replace it with:

body .basel-hover-base .hover-mask {
    background-color:transparent:
}

And add this one:

body .basel-hover-base .hover-mask div a{
   color:#05326B;
}

Best Regards

Hi Elise,

The transparent bar on the product image was only for mobile, the code you send me puts the bar transparent in both, desktop and mobile…
Any chance to make this happened?

Thanks,
Sandro

Hello,

Please add this code to the Theme Settings > Custom CSS > Device you want to changes to be applied.

Best Regards

[Author]

Posts