How to change the header group color for only certain pages

[ClubML]

I am looking to change the color of the header for certain pages or products. For example, for most of the website my header group is blue but for specific products I am wanting the header group to match the background of the product pages. I have one product that has an orange background and another with a pink one. This is to create a more fun and seemless user experience to add to the vibe/mood of the website. Essentially I am looking to be able to change the header background color only for specific pages.

I have created theme templates for each product as to be able to change the backgrounds and texts colors for each product i'm looking to do with this (A total of 2 products) 

I have very limited coding experience so if you can explain it to me like I am 10yr that would be amazing. Thank you so much for your help in advanced! Also I have the Urban theme. 

[Sweans]

Hi @ClubML ,

You can change the color of header based on the products, if you’re using different templates for different products (2 products).

We hope you have created two product templates for the 2 products. (Eg: orange and pink)

To change the header color you need to be familiar with CSS and liquid coding. We will provide the step-by-step info for you to customize your header.

Step - 1: In the Online Store Section -> Click the “...” alongside your theme -> Click on the “Edit Code” option from the menu.

Step- 2: Open the “theme.liquid” file in the edit code section.

Step- 3: In theme.liquid, Add following code just before the “head” closes.(a line before: </head>)

{% if template == 'product.your_orange_template_name %}

<style>

                    .header-wrapper{

                              background: orange !important;

                    }

          </style>

{% endif %}



{% if template == 'product.your_pink_template_name %}

          <style>

                    .header-wrapper{

                              background: pink !important;

                    }

          </style>

{% endif %}

NB: Replace the “your_orange_template_name” and “your_pink_template_name”, with the template name you have given for the corresponding products. You can customize other elements in the header like links, buttons, and icons by applying your desired CSS elements. Also, please notice that the class name "header-wrapper" can vary based on your theme used in the store.

Step  4: Save the file and Check the templates if the changes have appeared.

If you need further assistance, feel free to reach out!
Also, you can share your store link, so we can help with styling the elements.

I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans