Need a help- Debut theme- Remove black transparent layer

Solved
Lilas-addas
Excursionist
44 0 8

Hello, I'm trying to launch my website https://presets-market.com and I sell Lightroom presets to edit photos..It's important to me that the photos on the website have clear colors. But a dark black transparent layer appears on top of my main image and also above the collections. 

I don't know how to remove it.

A help would be very appreciated! 

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
9195 1561 1927

This is an accepted solution.

Hello @Lilas-addas,

To remove dark black transparent layer  on top of  main image

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#shopify-section-hero .hero__overlay::before {
	opacity: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

oscprofessional
Shopify Partner
9195 1561 1927

This is an accepted solution.

@Lilas-addas,

For collection please add below css

.collection-grid .collection-grid-item__title-wrapper::before {
	opacity: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 11 (11)
oscprofessional
Shopify Partner
9195 1561 1927

This is an accepted solution.

Hello @Lilas-addas,

To remove dark black transparent layer  on top of  main image

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#shopify-section-hero .hero__overlay::before {
	opacity: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Lilas-addas
Excursionist
44 0 8

Thanks! It removes the black layer from the main image, but it still exists above  the images of the collection list. 

Can I remove it ? 

oscprofessional
Shopify Partner
9195 1561 1927

This is an accepted solution.

@Lilas-addas,

For collection please add below css

.collection-grid .collection-grid-item__title-wrapper::before {
	opacity: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Lilas-addas
Excursionist
44 0 8

Thank you very much! It works.

zeezeetextiles
Tourist
8 2 1

Hi! I am having this same issue, but with my product page images looking dark. Is there a code to help solve here too? Any help appreciated!

oscprofessional
Shopify Partner
9195 1561 1927

Hello zeezeetextiles,
Please share your site url.
So that i can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
zeezeetextiles
Tourist
8 2 1

Hi there! I actually did some further digging and found that when I saved my photos in Photoshop as "save for web", it solved my problem! Appeared to be an image upload issue with Debut not reading my color profiles / image quality correctly. Now the photos display exactly as I edited them!

 

Thank you so much for following up with me, though!

khelfer
New Member
2 0 0

I have copied and pasted the provided code to remove the black transparent layer on top of main page but it didn't work.  The css provided to remove the transparent layer from the collections images worked properly.  Due to the nature of my business I need that transparent layer removed form this main image on the home page.  Can you please provide some clarification as to what could have caused my problem and let me know if there is another suggestion to try.  Thank you!!

TINA_CORREA
Shopify Partner
4 0 1

Did you check the theme settings? I had an overlay color on images added to the image gallery. Setting overlay color to None resolved my issue.

https://i.imgur.com/osQQsHT.png