CHANGE HEADER COLOR ON SPECIFIC PAGES (DAWN THEME)

Store Design
, ,

Topic summary

A user wants to customize the Dawn theme header color on specific pages rather than globally. Initially seeking a black header on the homepage and white on certain collection pages.

Initial Solution Provided:

  • Add conditional code to theme.liquid using template tags to target different page types
  • Code snippet provided using {% if template contains 'index' %} and {% if template contains 'collection' %} logic

Refinement Needed:

  • User clarified they need header changes on ONE specific collection page (light-collection), not all collections
  • Requested header styling: content color #171717, background #c4c4c4

Two Solutions Offered:

  1. CSS approach targeting base.css file with .gradient, .header__icon, and .header__menu-item classes
  2. Liquid template approach using {% if handle contains 'light-collection' %} to target the specific collection URL

Status: Discussion remains open with a new request for mobile/desktop-specific header color changes on the homepage only (black header with 1px white border) while keeping other pages at default white with black border.

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

Hello, I want to change my header on certain pages to make my collection pages look professional.

For example, on the homepage, I want it black, but on certain collection pages I want it white.

THANK YOU!

2

Hi @JIZO

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the 

{% if template contains 'index' %}

{%endif%

{% if template contains 'collection' %}

{%endif%

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

Hello Noah!

I really appreciate your answer, but I want to change the header color on a specific collection page, but not on all collections.

Is there a way I can do it?

Thank you again!

4

Please share with me the url of the collection page you want to change, then i will change the code to make it work for that url only.

It is required to make an condition and needed that url

5

Hello Noah!

https://4e3bd8.myshopify.com/collections/light-collection

As you can see, it is a provisional url, but I’ll change it later.

I want the header to match the page, making the content #171717 and the background #c4c4c4

Thanks a lot!!!

6

Hello @JIZO

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.gradient {
    background: #c4c4c4 !important;
}
.header__icon {
    color: #171717 !important;
}
.header__menu-item {
    color: #171717 !important;
}
.header__menu-item:hover span {
  color: #171717 !important;
}
7

Hi @JIZO

{% if  handle contains 'light-collection' %}

{%endif%}

Please help me to add this code with the same instructions above, here’s the result

PageFlyNoah_0-1695343242731.png
PageFlyNoah_0-1695343242731.png1920×963 189 KB

8

Hi there,

I want to change the header color for mobile and desktop view to ‘Black’ for *homepage only and the other pages to remain as the default color of dawn theme which is ‘White’ and showing a 1px white border line under the header for homepage and 1px black grid line on other pages.