Debut - Disable Collection Overlay Image?

Solved
Highlighted
Excursionist
13 0 2

Hey all, 

 

I am using the Debut theme, does anyone have any idea how I can disable the dark overlay that sits in front of the collection image? I thought I found it in the CSS but my changes still are not showing up. I have attached an image where you can see that there is a dark overlay that sits on top of the background image. Any ideas?

 

Thanks in advance! 

Overlay.png

0 Likes
Highlighted
Shopify Staff
Shopify Staff
572 68 101

Hey, @AMLazzara!

 

Lulu here from the Shopify Support team. Thanks for reaching out here, and I'll be more than happy to help you out.

 

I see what you mean, it would be nicer if the overlay was removed. As this is a free Shopify theme, this is something our theme's team can help with if you are eligible for design time. In order for me to check it out, I will just need to verify your account. I will send you an email to the email address attached to this forums account and confirm some security questions about your store. Once you reply to that email, I will have a closer look for you.

 

Speak soon,

Lulu

Lulu | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes

Success.

Shopify Expert
51 12 7

Hey AMLazzara,

 

You can edit this overlay in the "Theme Settings > Colors > Image Overlays" section. Keep in mind this is a global edit, so images outside of collection banners will be affected.

 

Instead, if you wanted to remove the overlay for collection banners only, open your theme's "theme.scss.liquid" file and find ".collection-hero__title-wrapper::before", then make the following edit:

 

 

// Find this
.collection-hero__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: $opacity-image-overlay;
}

// And replace it with this
/* .collection-hero__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $color-image-overlay;
  opacity: $opacity-image-overlay;
} */

This will essentially hide those styles instead of deleting them, so you could easily re-enable in the future.

 

0 Likes
Highlighted
Excursionist
13 0 2

Awesome, thank you so much! 

1 Like
Highlighted
Excursionist
13 0 2

@Spinturnix Isn't this the same code? 

0 Likes
Highlighted

Success.

Shopify Expert
51 12 7

@AMLazzara, Yes with the minor adjustment of /* and */, to comment out those CSS rules.

0 Likes
Highlighted
Excursionist
13 0 2

Ah, yes, I understand. Thank you! 

0 Likes
Highlighted
Shopify Expert
51 12 7

Happy to help! If you would, please mark the previous post as the accepted solution, thank you!

0 Likes