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 :slightly_smiling_face:

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

@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/ Thank you :slightly_smiling_face:

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?

Custom CSS - Disabling hover effect on color picker

Store Design

suyash1 September 21, 2023, 7:02am 11

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

Topic		Replies	Views
How to make color swatches only show on hover? Store Design design , customizations , collection-page , css	4	86	October 17, 2024
How to change from 2nd picture to color on hover in the product page Store Design design , customizations	6	102	January 12, 2023
How to place a gray hover on homepage products Store Design css	11	102	December 3, 2025
How to disable hover effect in Shopify electro theme Store Design design , customizations , landing-page , css , third-party-themes , shopify-themes , troubleshooting , html , product-page	1	30	November 16, 2023
The name of the color that pops Up when I hover to the product color is going to the next line Shopify Discussion troubleshooting	2	35	February 17, 2024

Custom CSS - Disabling hover effect on color picker

Related topics