How can I change the header color on the product page using the Dawn theme?

Technical Q&A
, ,
1

Hey, the header on the home page looks good, i have a transparent header so theres no edges. But the thing is when im on the product page its white and i cant seem to change it in either code or by themes. I use the theme dawn. Please help me to change the color on it, just in the product page.

2

Hi @Elias10

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,

Sahil

3

It is not launched yet. Unfortunetley im on the test period so i cant.

Sorry, is there another way?

4

Hi @Elias10 You can provide the preview link along with the password, as without that I will be unable to provide you the solution.

Best Regards

Sahil

5

https://da0c39.myshopify.com/

Password: thoffo

6

Hi @Elias10 Thanks for providing the URL, it really helped. Please add this code in base.css file. I am not sure what color do you want but I have just applied a green color, you can change the color according to you.

.header-wrapper.color-scheme-f516710c-3f09-41ee-be33-710cabe0d6de.gradient.header-wrapper--border-bottom {
    background: #11821d !important;
}

If you are not sure where is your base.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in Theme.
  4. Click Edit Code.
  5. Search Base.css in the code in left hand side.
  6. Add the code given above.

Result:

sahilsharma9515_0-1699727712135.png
sahilsharma9515_0-1699727712135.png1900Ă—553 106 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please hit Like and Mark it as solution!

Best Regards

Sahil

7

I pasted it at the bottom of the base.css but it still does not work for me.

8

Hi @Elias10 It should work, but if it not working then please follow the following steps.

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in Theme.
  4. Click Edit Code.
  5. Search Base.css in the code in left hand side.
  6. Then search “.header-wrapper” and remove “background: none;”.

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please hit Like and Mark it as solution!

Best Regards

Sahil

1 Like