Changing the colour of the header on the collection pages (from white to another colour)

[WoutervdMeer]

Hi there community,

I want to change the background colour of the header on my collection pages.

The header meaning: the piece on top of the collection page that displays the title and description.

What lines of code can I add to the theme.scss file to achieve this?

See picture to visualize this header of the collection page.

Kind regards,

Wouter vd Meer

[DelightCart]

@WoutervdMeer Send me store url and password.

[KetanKumar]

@WoutervdMeer

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[WoutervdMeer]

Hi KetanKumar,

Thank you for the quick response.

See: https://www.biervaneigenbodem.nl/collections/bierpakketten-brouwerijpakketten

Colour does not have to be particularly applicable to this collection, but to the collection pages in general.

[WoutervdMeer]

https://www.biervaneigenbodem.nl/collections/bierpakketten-brouwerijpakketten

[KetanKumar]

@WoutervdMeer

yes. please confirm

[WoutervdMeer]

Yes, confirmed!

[WoutervdMeer]

And after receiving my confirmation, do you know how to change this color with scss?

[KetanKumar]

@WoutervdMeer

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.collection-header .page-width {max-width: 100%;background: #e8e9eb;padding-top: 55px;}

.filters-toolbar-wrapper .page-width {
    max-width: 1200px;
    background: transparent;
    padding-top: 0;
}

.template-collection main#MainContent {
    padding-top: 00;
}

After Code Result