How to change text color on different pages?

Hi,

I would like to make the colors of the text and background of my product page different from my home page but when I change it, both pages change. Currently, the home page has white text on a blue background and on the product page the product information section also has a white background but all the text is also white, so you can’t see it. How can I change it so that the product information text is blue, while keeping the text on the home page white so that it can still be seen on the blue background?

Here is the link to the site product page: https://belit.co.za/products/solar-lighting-kit-system

Password: Iohwha

Note that the product description still needs to be modified. I would appreciate any assistance highly!

Hi @JHV

It seems that your store password is wrong. Please check it and let us know, then we will take a look and suggest you something.

Hi, I removed the password protection, it should work now…

Hi @JHV

If you want to change the product information text color without affecting the homepage text color, you need to follow these steps:

  1. Please access to your Shopify admin > Theme > Edit code

  1. Find any CSS file that should be base.css or global.css
![view - 2023-01-18T101609.648.png|1740x869](upload://ro8jJSUzhAKHBCMX6McUt2BgQbd.png)
  1. Insert the following code at the bottom of the page and save. If it does not work, please try inserting it into another CSS file.
.product__description.rte.quick-add-hidden p {
    color: $color !important;
}

Then you will replace $color with the color you want to display eg: red, yellow, orange, etc. If you want to change the title to the same color as the product description, you can add more

.product__description.rte.quick-add-hidden h2 {
    color: $color !important;
}

Then you will replace $color with the color you want to display, e.g., red, yellow, orange, etc.

  1. Finally, click Save and check the result.

I hope that this can help you solve the issue.

Hey,

Thanks so much for the information, it did help, however there are more parts of the product page that are still in white on a white background that’s not visible. I’d like to change these to the same blue as the rest of the site. I’ll add screenshots showing the parts that need to change color.

Much appreciation!!

1 Like

Here I’ve added what the home page and the product page should look like, but I’m still not sure how to do that without changing the text colour of both… Is there a different code that I need to paste for each page? I’d appreciate the help!

Hi @JHV

We saw your store and have advice for you:

  • If you want to change the text color of the homepage and still keep the text color of the rest of the pages, you should not customize the global color variable and should only customize the font color of homepage.

Regards,

Hi,

Thank you for getting back to me! How would I go about doing this?