Why can't I change the product text color on my website?

Store Design
,
1

I am just getting started and running into a simple problem! All my backgrounds are black and text is white but on my product page all the text for the product is dark grey and can barely see it!! I have changed the theme text color and everything changes but that! Why is it not as simple as selectign the text and changing the color?

Screenshot 2023-06-14 144338.png
Screenshot 2023-06-14 144338.png1526×807 85.9 KB

2

Hi @jamescripps07 ,

Would you mind to share your URL website with password if its protected?

Thanks!

3

It can done by applying background: white and color: black property to the classes in product page in css file

4

crappie

5

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.product-form__buttons {
color: #fff;
}
.product-form__submit {
color: #fff;
background: #5a31f4 !important;
border-color: #5a31f4 !important;
}
.shopify-payment-button__more-options {
color: #fff;
}
.share-button__button {
color: #fff;
}
.price__regular .price-item--regular {
color: #fff;
}

ZestardTech_0-1686807768913.png
ZestardTech_0-1686807768913.png1374×847 136 KB

6

Thanks! that fixed almost all of it. What do i need to add to get the actual product name white? The words “Hair Jig” are still grey.

7

Hi @jamescripps07 ,

Try this one the white the remaining text.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.product__title h1 {
    color: white;
}
button.shopify-payment-button__more-options.BUz42FHpSPncCPJ4Pr_f {
    color: white;
}
8

worked! Thanks!

9

Welcome, Happy to help. :blush:

10

I have grey text in other places..is there a way to fix it across the board with code?

Grey Text.jpg
Grey Text.jpg1605×587 23.8 KB

11

Hi there,

Try this codes.

cart-items.page-width.section-template--19414752035107__cart-items-padding h1 {
    color: white;
}
tr#CartItem-1 a {
    color: white;
}
quantity-input.quantity.cart-quantity {
    background: white;
}
.cart-item__price-wrapper span {
    color: white;
}
.totals h2 {
    color: white;
}
button#checkout {
    background: red;
}
.cart-count-bubble {
    border: 0.5px solid red;
    background: white;
}

Result:

Ribe_Dagandara_0-1686933897342.png
Ribe_Dagandara_0-1686933897342.png1260×548 38.8 KB

Ribe_Dagandara_1-1686933908645.png
Ribe_Dagandara_1-1686933908645.png1102×387 11.1 KB

You can change the color of button and the notification buble border.

12

That fixed those areas. I am guessing there is no easy fix across the board? Maybe start with another theme that has white text everywhere and go from there? I was really hoping shopify had it all worked out where it was all click and drag style but it doesnt seem that way. Not sure I can keep up haveing to deal with code all the time to fix little issues like text color. Are there other options for the design phase that i can import into shopify? I guess once i get all these little kinks worked out that will never have to be touched again.

13

Yeah, I try to change all the remaining font color but I think it over ride. It really depends how you construct the store.