Different colors for the header

Store Design
, , , ,

Topic summary

Goal: Use different header background colors per page (e.g., blue on the homepage, white on shop/contact). This is confirmed feasible.

Proposed approach: Add conditional classes to the in theme.liquid (Shopify’s Liquid templating) to detect page type, then target those classes in CSS to style the header.

Key steps: Modify layout/theme.liquid to output dynamic body classes like “homepage”, “shop-page”, and “contact-page” based on the current template/page. Then add CSS in assets (theme.css/style.css) such as .homepage .header { background-color: blue; } and .shop-page/.contact-page .header { background-color: white; }.

Technical notes: Requires basic Liquid edits and CSS. Terms: Liquid = Shopify’s template language; body class = HTML class added to for page-specific styling; CSS selector targets .header within each page class.

Support offered: One participant offered to implement via store collaboration; another asked for the theme name to provide tailored guidance.

Status: No confirmation from the original poster yet. Discussion remains open; next actions are to implement the code or share theme/access for assistance.

Summarized with AI on December 13. AI used: gpt-5.
1

Hey there!
So I want to change the color of my header. BUT! I want it to be blue on the homepage for example, but white in the shop or the contact page, whatever. Is that possible? Can someone help be please?

2

HI @timschaider

You can do this by adding conditions to your body for page detection and adding CSS for header color change these steps require some liquid modification skills if you have that just follow these steps:

Step 1: Add Conditional Classes to the

  1. Go to your Shopify Admin.
  2. Navigate to Online Store > Themes > Actions > Edit Code.
  3. Open the layout/theme.liquid file.
  4. Locate the tag. It will look something like this:
​
  • Modify the tag to include a dynamic class based on the page type. For example:
  • Just add this code in inverted commas of class if there is already a class
​
  • By this now the body has a class according to your page if you in the home page the class in the body tag is “homepage” similar to others
  • Save the changes.

Step 2: Write Conditional CSS

  1. Open the assets folder in the theme editor.
  2. Edit the CSS file (e.g., theme.css or style.css).
  3. Add the following CSS
.homepage .header {
    background-color: blue;
}

.shop-page .header {
    background-color: white;
}

.contact-page .header {
    background-color: white;
}
​

I hope this solution works for you! is not just share you store collaboration access to me I will help you add that conditions for you
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

3

Hi @timschaider ,

Please send me the theme name, I will check and guide it for you