How to edit the CSS code for the Policy Pages so I can add a black box behind the text?

Store Design
1

Hello. How can I edit the Policy pages to add a black box behind the text to make the text more visible? It seems to be updated on some policy pages and not all. I have attached a photo of what I am seeking to do vs what some of the pages are looking like

Looking to achieve:

Screenshot 2025-09-01 at 7.11.43 PM
Screenshot 2025-09-01 at 7.11.43 PM1920×1534 223 KB

Thanks!

2 Likes
2

Hey @quboolca,
Thanks for posting this Question to Shopify Community.
Could you please share your store URL and password [if applicable] so that I can take a look and provide you solution code.
Looking forward to hearing back from you.
Thanks

3

Hi @quboolca,

Could you please share the store URL so I can take a closer look to this?

Thanks!

4

Hi @quboolca

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

5

@quboolca can you please share this page link? you have policy pages into policies section, you can add css to these files or theme css file

6

HEy @quboolca , Welcome to Shopify Community,

Perfect, thanks for the screenshot I see exactly what you mean on some policy pages the text has a black background box, and on others it’s showing directly on your patterned page background, making it hard to read.

We can fix this by wrapping your policy content in a styled container and/or applying CSS.

Add Black Box Behind Policy Page Text

Add this CSS:

/* Add black box behind all policy page content */
.template-policy .page-width {
   background: rgba(0,0,0,0.85); /* black with slight transparency */
   padding: 30px;
   border-radius: 8px;
   color: #fff; /* ensure text is white */
}

Steps:

  1. Go to Online Store → Themes → Edit Code.

  2. Open Assets → base.css (or theme.css / custom.css).

  3. Paste the above code at the bottom.

  4. Save and refresh your policy pages.

This will make all policy pages (Shipping, Refund, Privacy, etc.) display with a neat black box behind the text, ensuring readability.
If you want it only for specific policies, we can target unique body classes (e.g., .template-policy--shipping or .template-policy--privacy).

Like this thing sometimes happens because Shopify applies different templates or missing wrappers on some of the auto-generated policies. CSS will normalize it across all.

If you’d like me to implement and adjust styling (padding, opacity, font size) for consistency across all your policies, feel free to reach out. You can check my past work + contact here: https://rajatweb.dev/

Best Regards,

Rajat / Shopify Expert