Solved

Change colour of header background on specific collection page

itshighlyfresh
New Member
5 0 0

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!

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2057 594 466

This is an accepted solution.

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.

ThePrimeWeb_0-1714667440935.jpeg

 

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

Replies 7 (7)
itshighlyfresh
New Member
5 0 0

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
Shopify Partner
2057 594 466

This is an accepted solution.

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.

ThePrimeWeb_0-1714667440935.jpeg

 

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
New Member
5 0 0

Thank you so much!

itshighlyfresh
New Member
5 0 0

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
Shopify Partner
2057 594 466

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
New Member
5 0 0

Screenshot 2024-05-03 10.06.40.png

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
Shopify Partner
2057 594 466

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!