Product Images Greyscale > Colour on Hover

Store Design

Topic summary

A Debut theme user wants product images to display in greyscale and transition to color on hover.

Solution Provided:
Multiple developers offered CSS code snippets to achieve this effect:

  • Add custom CSS to theme.scss.css file via Shopify Admin → Online Store → Themes → Edit code
  • The CSS applies a greyscale filter to product grid images by default, removing it on hover
  • Code targets .grid-view-item__image and related classes

Implementation Steps:

  1. Navigate to theme code editor
  2. Locate the main CSS file (theme.scss.css, base.css, or theme.css)
  3. Paste the provided CSS at the end of the file

Additional Request:
The user also asked about replacing the search field’s magnifying glass icon with a custom image. A developer confirmed this is possible by:

  • Providing an SVG file of the desired icon
  • Replacing the existing icon code with the new SVG
  • Requires theme code access

The original issue was resolved successfully, with the secondary request requiring further collaboration via email.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

I’m would like my product placeholder images to be greyscale, and then turn colour on hover (leading to full colour image in item page).

Could anyone help me with this? I’m using Debut theme!

Many thanks,

Joe

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

@JG123 can you please share your webpage link?

4

Thanks!

5

Thanks!

6

@JG123
please add this css to the very end of your theme.scss.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.scss.css

a:hover, a:focus {opacity: 1;}
.grid-view-item__image-wrapper .grid-view-item__image {opacity: 1; filter: grayscale(1);}
.grid-view-item__image-wrapper .grid-view-item__image:hover{filter: none;}
1 Like
7

@JG123 Hello! Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “theme.scss.css” OR base.css" OR “theme.css”.
  6. Add the following code at the end of the file.
.grid-view-item__image, .grid-view-item--sold-out .grid-view-item__image {
    opacity: 1;
    filter: grayscale(1);       
}

a.grid-view-item__link.grid-view-item__image-container:hover .grid-view-item__image,
a.grid-view-item__link.grid-view-item__image-container:hover {
    opacity: 1;
    filter: grayscale(0);
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

8

Perfect, thanks so much for your help!

While I’ve got you here - may I ask another question? I would like to swap out the magnifying glass icon for the search field with another small image - could that be possible?

Thanks again in any case :slightly_smiling_face:

9

@JG123 - yes it is possible, need to get svg file of the required icon and then we can replace the icon code with this new svg file code

1 Like
10

Thank you! How can I share with you my svg file?

11

@JG123 - you can email me if you want , to make changes needs theme code access… do you know coding?

1 Like
12

I know very little to be honest, but I can give it a shot! I’ll email you now - thanks again!