How to change background color for navigation pages from white to black not the bar but the pages

Store Design
, , , ,
1

Theunawakened_0-1707884011245.png
Theunawakened_0-1707884011245.png1730×522 35.4 KB

Hi! So I don’t know where and what code to put to change the background color of navigation pages not the navigation bar but the pages, like Contact Us for example when I click on it, I don’t see Schemes color and the color I want is Black but it’s all white and I can’t do it, I tried to put a custom css code but didn’t work, I’m thinking that I have to change the code but I dont know how to do that!

1 Like
2

@Theunawakened Will you share your store url?

3

To change the background color of specific navigation pages on a Shopify store, you can follow these steps:

  1. Identify the Page Class or ID:
  • Inspect the Contact Us page or any other page whose background color you want to change using your browser’s developer tools.
  • Look for a class or ID specific to the page’s body element. It might look something like <body class="page-contact"> or <body id="contact-us-page">.
  1. Add Custom CSS:
  • Once you have identified the class or ID, you can add custom CSS to your theme.
  • In your Shopify admin, go to Online Store > Themes > Customize.
  • In the left sidebar, click on Theme settings or Additional CSS (this may vary depending on your theme).
  1. Write Custom CSS:
  • Write custom CSS to target the specific page and change its background color. For example:
/* Replace '.page-contact' with the actual class or ID you identified */
.page-contact {
background-color: black !important;
}

The !important is used to ensure that this style takes precedence over other styles that might be applied.

  1. Save Changes:
  • Save your changes, and then check the Contact Us page to see if the background color has been updated.

Please note that the actual class or ID might vary based on your theme, so make sure to inspect the HTML structure of the specific page you want to modify.

If you encounter issues, it’s possible that your theme might have a more complex structure, and additional customization might be needed. If that’s the case, you may want to consult the theme documentation or seek help from the theme developer or Shopify support.

4

Actually, to fix it there’s no need to edit code simply click on the page I want to have the black background, click on settings then find which Scheme is for that page, to know that you will have to play with them a little bit for example: It could be Scheme 1, Scheme 2 or 3 to know which, click on them and try switching the colors on exactly where it says background on all of them, eventually you will find which is for which and then once u do you just set it to the color that you want! Thats it!!