Debut theme - how to remove grey overlay from the images on the collection list page.

New Member
15 0 0

Hello, 

i whould like to know how can i remove the grey overlay that is placed on top of the collection list images? 

thanks, 

Coco 

0 Likes

Hi,

Here is a step-by-step instruction that can help you to change/remove grey overlay from the images on the collection list page and the same collection listing on your site.

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

Follow these steps:

1.From your Shopify admin, go to Online Store > Themes (In this example I have managed Debut theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
4. You should find the following lines in the file (the code is about 1663 line):

/*================ #Links and Buttons ================*/
a {
  color: $color-text;
  text-decoration: none;

  &:hover,
  &:focus {
    opacity: $opacity-link-hover;
  }

  &.classic-link {
    text-decoration: underline;
  }
}

5. Add a new line of the code (Use "opacity: 1;" - if you do not want to see grey overlay). A new CSS code should looks like this:

/*================ #Links and Buttons ================*/
a {
  color: $color-text;
  text-decoration: none;

  &:hover,
  &:focus {
    opacity: $opacity-link-hover;
    
    &.grid-view-item__link {opacity: 0.85;} /* new line*/
  }

  &.classic-link {
    text-decoration: underline;
  }
}


Hope this helps you!

Best,
Arthur

 

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
15 0 0

Hi Arthur,

I have tried what you said but it does not work, this is how my code looks now:

 

0 Likes
New Member
15 0 0

But there is still a grey overlay 

0 Likes
New Member
15 0 0

This is what I need to change (I dont like the dark overlay)

0 Likes
New Member
15 0 0

And at the home page as well:

 

0 Likes
Excursionist
22 0 3

Anyone still looking to change the "dark overlay" in the Debut theme needs to go into the customization section, then select the theme settings tab, go to the colors tab, scroll down to the image overlays, there you can change the percentage of the opacity to 0% or change the background color to give a different hue. This changes it for the main screen, collections and title images. 

3 Likes
New Member
1 0 0

This doesn't work for me - my images appear like this in product page:

 Screen Shot 2019-03-25 at 10.00.47 AM.png

And like this on the page, even with the opacity set to 0 (also pictured). 

Screen Shot 2019-03-25 at 10.01.17 AM.png

 

Any help would be greatly appreciated! 

0 Likes
Excursionist
22 0 3

Hey Chromapress

Your issue is simply because your product stock is 0. When my items are sold out they turn gray like yours which, too, says sold out. 

a1.PNG

0 Likes
New Member
1 0 0

Thank you so much for your help mate! @ChelsChels 

0 Likes