Solved

Custom CSS - Disabling hover effect on color picker

Ronla1
Excursionist
24 1 1

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:

Ronlanir_0-1695198878300.png


With hover:

Ronlanir_1-1695198908431.png


Any suggestions would be very helpful.
Thank you 🙂

Accepted Solution (1)

Ronla1
Excursionist
24 1 1

This is an accepted solution.

I found the solution:

 

.product-card .product-card-swatches--title {
  opacity: 0 !important;
}
.product-card .product-card-swatches {
  overflow: show !important;
  transform: none !important;
}

 

View solution in original post

Replies 21 (21)

David_SHT
Globetrotter
605 125 124

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.

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

Ronla1
Excursionist
24 1 1
Ronla1
Excursionist
24 1 1

suyash1
Shopify Partner
9266 1152 1495

@Ronla1 - can you please share this page link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Ronla1
Excursionist
24 1 1
Ronla1
Excursionist
24 1 1
suyash1
Shopify Partner
9266 1152 1495

@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;}

 

suyash1_0-1695279714568.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Ronla1
Excursionist
24 1 1

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?

suyash1
Shopify Partner
9266 1152 1495

@Ronla1 - add my given css above and then check

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Ronla1
Excursionist
24 1 1

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. 

suyash1
Shopify Partner
9266 1152 1495

@Ronla1 - can you please add again? I will check it

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Ronla1
Excursionist
24 1 1

@suyash1 you can check out the first collection strip on the homepage -
https://sassysusa.com/

Ronla1_0-1695285363443.png

 

suyash1
Shopify Partner
9266 1152 1495

@Ronla1 - add this too

 

.product-card:hover .product-card-swatches {transform: translateY(100%) !important;    position: initial !important;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Ronla1
Excursionist
24 1 1

Now something else is happening, the title disappears and comes back again in a different position.
You can see it live.

Ronla1_0-1695286517440.png

 

suyash1
Shopify Partner
9266 1152 1495

@Ronla1 - then please try the solution given by @oscprofessional and check

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

oscprofessional
Shopify Partner
15897 2378 3084

Hello @Ronla1 

Please provide your store URL.So I can review it and provide a solution.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Ronla1
Excursionist
24 1 1

https://sassysusa.com/
Thank you 🙂

Ronla1
Excursionist
24 1 1

oscprofessional
Shopify Partner
15897 2378 3084

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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Ronla1
Excursionist
24 1 1

Hi @oscprofessional 
First of all, thank you so much.

I tried it and look what happened:

Ronla1_0-1695286854543.png

 

Ronla1
Excursionist
24 1 1

This is an accepted solution.

I found the solution:

 

.product-card .product-card-swatches--title {
  opacity: 0 !important;
}
.product-card .product-card-swatches {
  overflow: show !important;
  transform: none !important;
}