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

Highlighted
Tourist
15 0 2

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
Highlighted

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
Highlighted
Tourist
15 0 2

Hi Arthur,

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

 

0 Likes
Highlighted
Tourist
15 0 2

But there is still a grey overlay 

0 Likes
Highlighted
Tourist
15 0 2

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

0 Likes
Highlighted
Tourist
15 0 2

And at the home page as well:

 

0 Likes
Highlighted
Excursionist
22 0 15

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. 

Highlighted
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
Highlighted
Excursionist
22 0 15

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

Highlighted
New Member
1 0 0

Thank you so much for your help mate! @ChelsChels 

0 Likes