How can I disable the hover effect on the color picker under the product photos?
I want it to be displayed at all times.
Without hover:
With hover:
Any suggestions would be very helpful.
Thank you ![]()
Hi @Ronla1 ,
This is David at SalesHunterThemes.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL
if your website is password protected then also provide the password.
David | SalesHunterThemes team.
@Ronla1 - can you please share this page link?
Hello @Ronla1
Please provide your store URL.So I can review it and provide a solution.
https://sassysusa.com/
Thanks!
https://sassysusa.com/
Thanks!
https://sassysusa.com/
Thank you ![]()
@Ronla1 - add this css to the very end of your app.css file and check
.product-card .product-card-swatches--container {height: 50px !important; margin-top: 10px;}
.product-card .product-card-swatches{margin-top: 10px;}
Hey @suyash1 thank you so much.
The thing is, now when I hover over it the swatches move up and the title disappears. How can disable the whole hover effect so everything stays in place?
@Ronla1 - add my given css above and then check
I did
@suyash1
And it does exactly what I said…when I hover over it, it moves the colors upwards and fades out the title.
@Ronla1 - can you please add again? I will check it
@suyash1 you can check out the first collection strip on the homepage -
https://sassysusa.com/
Hello @Ronla1
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->product.grid.css>Add this code at the bottom.
.product-card .product-card-swatches--title {
transition: none !important;
transform: none !important;
}
@Ronla1 - add this too
.product-card:hover .product-card-swatches {transform: translateY(100%) !important; position: initial !important;}
@Ronla1 - then please try the solution given by @oscprofessional and check