How to change the color of the header on only one page

Topic summary

A user is trying to modify header styling (specifically color and logo) on specific pages of their Shopify store—the Contact and FAQ pages. They have existing code that works for collection pages but are unable to adapt it for these additional pages.

Current situation:

  • Existing code uses {%- if template == "collection" -%} to target collection pages
  • Code changes header menu text color to black and swaps the logo image
  • User needs the same styling applied to /pages/contact and /pages/faq

Proposed solution:
A community member suggested using {%- if page.handle == "contact" -%} and {%- if page.handle == "faq" -%} conditional statements instead of the template check. This approach targets specific pages by their handle rather than template type.

The discussion appears to have reached a potential resolution, pending the original poster’s confirmation that the suggested code modification works.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.

Hi :slightly_smiling_face:

I have this code i got from a previous guy and shout out to him, but now i need some help beacuse i want it to change in theese pages too, but everytime i try to do it doesnt work

Here is the pages i want to change:

https://aa1250-cc.myshopify.com/pages/contact

https://aa1250-cc.myshopify.com/pages/faq

Here is the code:

{%- if template == “collection” -%}

.header__inline-menu * { color: black!important; }

{%- endif -%}

Thank you :slightly_smiling_face:

Hey @Charmeclothing

Try this code.

{%- if page.handle == "contact" -%}

{%- endif -%}

{%- if page.handle == "faq" -%}

{%- endif -%}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like