HOW TO CHANGE TEXT COLOR IN OUR SHOPIFY WEBSITE

Store Design
, ,

Topic summary

A Shopify store owner added a video background and now struggles with text visibility on contact information, terms and conditions, and other policy pages. The dark text is unreadable against the video background.

Attempted Solutions:
Multiple users provided CSS code snippets to change text color to white by editing the base.css file:

  • suyash1 suggested targeting specific page elements with color changes
  • websensepro recommended a broader approach targeting all h1, h2, p, and li elements
  • The_ScriptFlow provided the most comprehensive solution with specific selectors for page titles, policy pages, and body text, including a screenshot showing successful results

Current Status:
The original poster reported the first solution didn’t work. Follow-up suggestions included adding !important flags to override existing styles. The discussion remains open as confirmation of a working solution hasn’t been provided by the store owner.

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

I PUT A VIDEO AS BACKGROUND IN MY STORE AND NOW I WANT TO CHANGE THE TEXT COLOR IN MY CONTACT INFORMATION PAGE, TERMS AND CONDITION PAGE, AND IN OTHER POLICY PAGES TOO, I HAVE BEEN STRUGGLEING TO DO THAT IN THOSE SPECIFIC PAGES AND NEED HELP TO CLEAR THE ISSUE

logiclayer_0-1750687368351.png
logiclayer_0-1750687368351.png1919×841 98.9 KB

THIS IS THE ISSUE

MY STORE LINK: https://xqehfi-zu.myshopify.com/

2

Hi @logiclayer ,

kindly provide your store URL please and if it is password protected, please share the password as well.Thanks

3

STORE LINK : https://xqehfi-zu.myshopify.com/

PASS: media

4

@websensepro what is the password to view page?

5

pass: media

6

@logiclayer please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

h1.main-page-title.page-title {color: #fff;}

#shopify-section-template--18534803734703__main .rte{color: #fff;}
7

didnt worked

8

Hi @logiclayer ,

  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.
h1, h2, p, li{
  color: white !important;
}

Thanks!

9

Please paste the following code in the end of base.css file.

.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
  color: white !important;
}
.rte.scroll-trigger.animate--slide-in p {
  color: white !important;
}
.shopify-policy__title h1 {
  color: white !important;
}
.shopify-policy__body .rte {
  color: white !important;
}

Results:

The_ScriptFlow_0-1750688777906.png
The_ScriptFlow_0-1750688777906.png1633×680 63.9 KB

10

@logiclayer you can add !important and check

h1.main-page-title.page-title {color: #fff !important;}

#shopify-section-template--18534803734703__main .rte{color: #fff !important;}