I need help removing the dark overlay on my Collections Page products?

Solved
New Member
10 0 0

Screenshot (2).png

As you can see there is a dark overlay over the photo. I have been trying to read in other conversations for this fix but have not had any luck. I amusing the "Debut" theme if that matters?

0 Likes
Shopify Partner
462 80 94

Can't you please put the url of the site ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Shopify Partner
462 80 94

The site currently is password protected and need a pass to view it.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
10 0 0

Oh sorry, it is vuilia 

0 Likes
New Member
10 0 0

You will see what I am talking about if you check the Products page. I have one photo up so that you can see what I mean by the "dark overlay"/

0 Likes

Success.

Shopify Partner
462 80 94

So, when we hover, mouse over on product grid, it shows black overlay, you're talking about that?

If, yes, go into edit code, then into theme.scss.liquid file and then go to line 6541

here you should remove the code which makes your block transparent so remove the lines I have highlighted in screenshot:

 

USbDBT8

 

6546,  6547,  6548

 

After it, the part of this code should look like the following screenshot:

 

OeYTBhj

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Shopify Partner
462 80 94

If you are talking about the background of the image, which is black, then it is because your site background is black and the image block background doesn't have any background color and as your product image has a transparent background, then we can see the black background of the whole site through it.

If you want to make background of your image white, then again, you should edit the code.

go into edit code, find theme.scss.liquid and find line:

- 2842


and add the following rule to the .grid-view-item__image-wrapper

.grid-view-item__image-wrapper {
  margin: 0 auto $grid-gutter / 2;
  position: relative;
  width: 100%;
}

 

background: #fff;


so after change it should look like this.

.grid-view-item__image-wrapper {
  margin: 0 auto $grid-gutter / 2;
  position: relative;
  width: 100%;
  background: #fff;
}

 

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
New Member
10 0 0

Thank you so much. It took away the overlay. I was really struggling with that for a while!!


0 Likes
Highlighted
Shopify Partner
462 80 94

You're mostly welcome.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes