Background Color Change for Pages

Store Design
, , ,

Topic summary

A user needs to change the background color of individual pages (contact, FAQ, terms of service, etc.) in the Trade theme from white to dark (#151515). The default color scheme options don’t provide this capability.

Initial Problem:

  • Attempted CSS targeting specific section IDs failed to work
  • Issue affects all pages except the homepage

Working Solution:
Multiple developers provided similar CSS-based fixes, with the accepted solution being:

  • Add custom CSS to theme.liquid file (before </body> tag)
  • Target main#MainContent with background color styling
  • Use !important flag to override default styles

Alternative Approaches Suggested:

  • Modify base.css or theme.css files directly
  • Various CSS selectors targeting MainContent or body elements

Open Question:
A follow-up inquiry asks whether this can be accomplished through the theme editor interface instead of editing code files directly—currently unanswered.

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

Hi!
I’ve been having some trouble changing the background color for individual pages. They’re white on default and there’s no color scheme option.

Theme - Trade

Website: https://wxccqp-af.myshopify.com/

Password: bowgla

I’ve tried this code with no success:

section#shopify-section-template--15858378670151__main {
     background: #151515;
}
section#shopify-section-template--15858378670151__main * {
    color: #151515;
}

Example of my problem:

Screenshot_38.png
Screenshot_38.png1180×857 48.2 KB

This is a problem for every page I have on my website (contact, faq, terms of service, etc;) excluding the home page. Any assistance would be greatly appreciated!

1 Like
2

Edit code → base.css → .focus-none{background:black;}

3

@ShopElle If this works have a like and accept the solution

4

Hey @Sivadarshan !

Unfortunately this doesn’t work.

5

Hey @ShopElle

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1736503576751.png
Moeed_0-1736503576751.png1876×899 41.9 KB

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

Best Regards,
Moeed

1 Like
6

Hi @Moeed

This worked, thank you very much!

1 Like
7

Hello @ShopElle

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

main#MainContent { background: #151515 !important; }

RESULT:

Tech_Coding_0-1736503871894.png
Tech_Coding_0-1736503871894.png1322×534 19.1 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

9

Hi @ShopElle

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
main#MainContent {
    background: #151515;
    color: #151515 !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

10

Hello @ShopElle ,

Here are the steps to apply the necessary changes in your Shopify store:
In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
Locate Asset > base.css and paste the following code at the bottom of the file:

body main#MainContent {
    background: #151515 !important;
}
11

Hi, can we do it inside the theme editor, instead of the code section.

I navigate to the Pages → default page → put CSS, but it does not seem working.