How can I change the background color of my policy pages?

Store Design

Topic summary

A user needed to change the background color of their policy pages, which were matching their header and footer colors and creating a visual issue.

Attempted Solutions:
The user tried multiple CSS approaches in the base.css file, including:

  • Targeting .policy-page class
  • Modifying main#MainContent styling
  • Using .shopify-policy__container selectors
  • Adding !important flags to override existing styles

None of these CSS snippets successfully resolved the issue.

Resolution:
The user ultimately found an alternative solution and managed to change the styling independently. The specific working method was not shared in the thread.

Status: Resolved - though the exact solution remains undocumented for future reference.

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

I need help please, to amend the background color on my policy pages as they are all currently stuck the same as my header & footer which looks a mess :confused:

I’ve tried all the following suggestions in Assets->base.css> and they don’t work for me:

.policy-page {
  background-color: #F0F0F0;
}

main#MainContent {
background-color: #fff;
color: #000;
}
.shopify-policy__container .shopify-policy__title h1 {
color: #000;
}

.focus-none {
    background: #fff !important;
    color: #000 !important;
}
.shopify-policy__title {
    color: #000 !important;
}

.template-policy {
  background-color: #FFFFFF;
  color: #000000;
}

and this suggestion using theme.liquid:

{% if the template contains “policies” %}

main#MainContent { background-color: #fff; color: #000; } .shopify-policy__container .shopify-policy__title h1 { color: #000; }

{% endif %}

Now save the changes to your theme.

2

Hi @KateWych

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

I managed to change the coding another way. Thanks though!