How can I change the overlay color on collection page headers?

Store Design
1

Hi, I want to change the overlay color of the title area on my collection pages, but not change the overlay on the collection grid on the home page.

I was able to accomplish this for the home page overlay with this

div#shopify-section-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

But can’t figure out the collection listing page.

I have tried these in theme.css -

div#shopify-section-collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

div#Hero-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

div#collection-hero .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

https://fat-beet-farm-kitchen-bakery.myshopify.com/collections/full-meals

password - aurtau

Screen Shot 2021-11-05 at 12.07.24 PM.png
Screen Shot 2021-11-05 at 12.07.24 PM.png2880×1800 851 KB

thank you!

2

@zamandanoel

please confirm this ok?

KetanKumar_0-1636142571617.png
KetanKumar_0-1636142571617.png1920×1080 427 KB

3

Yes, I’ll make it green but that’s the color overlay i want to change.

1 Like
4

@zamandanoel

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.collection-hero__title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #416b52;
    opacity: .9;
}
5

That worked perfectly, thank you!

1 Like
6

@zamandanoel

its my pleasure to help us