How to disable second image on hover (dawn theme)

Store Design
1

Hello, I need some help

I already disabled on the featured collection settings, when I move my mouse over the product, it shows me a white background.
I found an answer from GemPages and applied the code but it only worked on the home page/featured collection section. The images on other pages go white.

Thanks in advance

2

Hi @d4n

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

To disable the second image on hover in the Shopify Dawn theme, you will need to modify the CSS code. Here’s how you can do it:

  1. Login to your Shopify store and navigate to Online Store > Customize Theme.

  2. Click on “Actions” and select “Edit code”.

  3. From the list of files, click on “assets” and then click on “theme.scss.liquid” to open the file.

  4. Add the following code at the bottom of the file:

.product-single__photos:hover .product-single__photo--thumb {opacity: 0 !important;}

  1. Save the changes and check your store to see if the second image is disabled on hover.

This code will set the opacity of the second image to 0, effectively disabling it on hover. Note that this code may affect other elements on your store that use the “product-single__photos” and “product-single__photo–thumb” classes. If you want to target only a specific section, you will need to add a more specific CSS selector.

Regards,

San

3

Thanks for your response San,

Theres no “theme.scss.liquid” script at all under assets..

I tried it under the Layout - theme.liquid script and it did not work

Is there another way?

Regards

Dan