Change colour of header background on specific collection page

itshighlyfresh · ‎05-02-2024

Hello,

I've looked through the posts here but I can't find something that works for my shop. I'd like to change the header colour on this specific collection: https://highlyfresh.net/collections/snaqy

Thanks!

ThePrimeWeb · ‎05-02-2024

Hey @itshighlyfresh,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

I just added a random colour #403ca4. You can change that to your liking. Remember this only works for the snaqy collection page.

<style>
body.template-collection-snaqy main-header,
body.template-collection-snaqy main-header .header-container, 
body.template-collection-snaqy main-header .header-container input[type="search"]{
    background: #403ca4 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

itshighlyfresh · ‎05-02-2024

I appreciate the comment, but there are a few posts of people successfully doing this with their Shopify theme - it just won't work on mine.

ThePrimeWeb · ‎05-02-2024

Hey @itshighlyfresh,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

I just added a random colour #403ca4. You can change that to your liking. Remember this only works for the snaqy collection page.

<style>
body.template-collection-snaqy main-header,
body.template-collection-snaqy main-header .header-container, 
body.template-collection-snaqy main-header .header-container input[type="search"]{
    background: #403ca4 !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

itshighlyfresh · ‎05-02-2024

Thank you so much!

itshighlyfresh · ‎05-03-2024

Any chance you know how to do this with the sticky header too? I tried to use the same code, just replacing "main-header" with "sticky-header" but that didn't seem to work. I have a sticky header on scroll up on the website.

ThePrimeWeb · ‎05-03-2024

You have to enable sticky header, then I can go and test it out.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

itshighlyfresh · ‎05-03-2024

I think I have it, I'm not sure - this is where I go the term from. It only shows on the page when scrolling up.

ThePrimeWeb · ‎05-03-2024

Oh this one!

Yeah you can add this code as well. You can use the same instructions as above and paste it below <head>. Don't remove the previous code.

<style>
body.template-collection-snaqy .sticky-header.show,
body.template-collection-snaqy .sticky-header.show > div {
    background-color: #F7653E !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Change colour of header background on specific collection page