How can I change the background of my Policies Pages?

[mayaalapai]

I am trying to change the background color of my policies pages (BALANCE THEME), but it won’t change for me.

I want the color to be FFFDF9, but it’s currently white.

URL: kaleaskin.com
Password: happyskin.com

Thank you!

[mayaalapai]

@Veronica_scent12 yes!
wg0cqr-ra.myshopify.com

Does this work?

[fonike939]

Try editing it through the Theme Editor under Online Store > Themes > Customize. Go to the Policies template and check if the background is set under “Page settings” instead of “Theme settings.” Some Balance versions override global colors there.

[devcoders]

@mayaalapai

happyskin.com

[hammad-ali]

@mayaalapai

I am trying to change the background color of my policies pages (BALANCE THEME), but it won’t change for me.

I want the color to be FFFDF9, but it’s currently white.

URL: kaleaskin.com
Password: happyskin.com

Thank you!

Hi mayaalapai,

You can change the background color of your policy pages with a little CSS.
Follow these steps:

1. Go to Online Store → Themes → Edit code

2. Open your base.css (or theme.css) file

3. Add this code at the very bottom:

/* Change background color for policy pages */
.template-policy {
  background-color: #FFFDF9 !important;
}

If it still doesn’t work, try this instead (some themes use “page” templates for policies):

.template-page,
.template-policy {
  background-color: #FFFDF9 !important;
}

Save your changes, refresh your storefront, and it should now show the off-white color #FFFDF9 instead of pure white.

Hope this helps!
If you ever need help with Shopify theme customization or store setup, I provide professional and friendly services at affordable rates. I’m here to help merchants like you while earning a livelihood.
– Hammad | Shopify Developer

[tim_1]

Go to Online store, click Customize, go to “theme settings” (cog icon) and scroll down to “Custom CSS”. Paste this:

body:has(.shopify-policy__container) {
  --color-background: red; /* use color you want */
}

This should work for Horizon family themes.

[websensepro]

Hi @mayaalapai

Paste this inside your theme.liquid file, just before the closing </body> tag:

<script>
document.addEventListener("DOMContentLoaded", function() {
  if (window.location.href.includes("/policies/privacy-policy")) {
    setTimeout(function() {
      var section = document.querySelector(".page-width-narrow");
      if (section) {
        section.style.backgroundColor = "#FFFDF9";
        console.log("✅ Background color changed for Privacy Policy page.");
      } else {
        console.log("⚠️ .page-width-narrow not found yet, retrying...");
      }
    }, 1000);
  }
});
</script>

If that works, please mark my comment as Solution.

Thanks!

[mayaalapai]

@hammad-ali

#FFFDF9

@tim_1 This worked great! Thank you so much!

[mayaalapai]

@hammad-ali Hi! I am not sure why but neither of these worked for me I am not sure if I input them wrong in the base.css, but neither made a difference. The below solution worked out and I appreciate your input!

[hammad-ali]

Thanks for the update mayaalapai!
I’m glad you found a solution that worked for you. Sometimes different themes use slightly different class names or CSS structures, so it’s totally normal that one method works better than another.

If you ever need help customizing or optimizing your Shopify store further, I am active and available, I’d be happy to assist anytime.

– Hammad | Shopify Developer (Theme & CRO Expert)