How to change the header color in other pages Dawn theme

Store Design

Topic summary

Goal: keep a transparent header on the homepage while using a colored header on other pages in the Shopify Dawn theme.

  • Current setup: the header-wrapper background color was removed to make the index (homepage) header transparent. A duplicate (header-wrapper2) with the desired color was created, but it’s unclear which file needs changes.
  • Attempted fix: code added to header.liquid successfully changes the header color, but it also affects the homepage, which should remain transparent.
  • Requirement: apply the header color only on non-homepage templates (product, collection, search, contact, FAQ), implying conditional logic or template-specific styling.
  • Status: unresolved; seeking guidance on where to implement conditional checks (e.g., in header.liquid or template files) to differentiate the homepage from other pages.
  • Note: A code snippet was referenced but not included, which is central to understanding the exact approach and needed conditions.
Summarized with AI on February 1. AI used: gpt-5.
1

Hello,

i have modified slightly my theme. I have deleted the background colour for my header-wrapper as i needed it to be transparent for my index page but i would like my others pages (collection, search, contact, FAQ etc..) to add colour to my header. I have created another a copy of header-wrapper2 with the desire colour but not sure which document i have to modify.

Note: i would like to keep my index page header transparent.

Thank you in advance for your help

1 Like
2

Hi Steph,

Thank you for your respond.

When i paste the code to header.liquid it does work but it changes also the header in the index page and i dont want that.

I would like the code to work only for the other pages (product, collection, search, contact, FAQ etc..)

Kind regards