Goal: Change the header background color only on specific product pages in a Shopify store (Urban theme) to match each product’s page background (e.g., orange, pink).
Approach proposed: Use separate product templates and conditionally load CSS via Liquid (Shopify’s templating language).
Key steps:
Create two product templates (e.g., orange and pink) and assign them to the respective products.
In Online Store → … → Edit code → theme.liquid, insert conditional CSS just before .
Use Liquid conditionals like:
if template == ‘product.your_orange_template_name’ { /* add CSS to set header color */ }
if template == ‘product.your_pink_template_name’ { /* add CSS to set header color */ }
Replace placeholder template names with the actual ones. Target the header container (class may differ by theme, example: header-wrapper). You can also style header links, buttons, and icons.
Save and test each template.
Notes:
Requires basic CSS and Liquid familiarity.
The provided code snippet (Liquid + CSS) is central to implementation.
Status: Guidance provided; no confirmation of success yet. Further help offered if store link is shared.
Summarized with AI on December 23.
AI used: gpt-5.
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.
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: )
{% if template == 'product.your_orange_template_name %}
{% endif %}
{% if template == 'product.your_pink_template_name %}
{% 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!