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

Solved

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

Elias10
Excursionist
25 0 3

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.

Accepted Solution (1)
sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


View solution in original post

Replies 7 (7)

sahilsharma9515
Shopify Partner
1076 132 203

Hi @Elias10 

 

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

 

Best Regards,

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Elias10
Excursionist
25 0 3

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

 

Sorry, is there another way?

sahilsharma9515
Shopify Partner
1076 132 203

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Elias10
Excursionist
25 0 3
sahilsharma9515
Shopify Partner
1076 132 203

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

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Elias10
Excursionist
25 0 3

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

sahilsharma9515
Shopify Partner
1076 132 203

This is an accepted solution.

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️