How do I change the text color of the product page

Topic summary

A user is trying to change text colors on their Shopify product page but is having difficulty with remaining black text elements. Screenshots show the current state and desired purple/lavender color scheme (#C3BEFF).

Solutions Provided:

Multiple community members offered CSS code snippets to add to the theme files (base.css, style.css, or theme.liquid):

  • For product text: Target sections like #MainProduct-template and related products with color: #C3BEFF !important
  • For buttons: Customize radio button labels, borders, and Shopify payment buttons using custom background and border-color properties
  • Implementation: Add code to Assets folder (base.css) or above </body> tag in theme.liquid

Current Status:

The original poster confirmed the initial text color fix didn’t work and requested additional help for button and border styling. Contributors continue providing refined CSS solutions with visual examples showing expected results. The discussion remains active with ongoing troubleshooting.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

I Can’t seem to find a way to change the remaining black text on the store.

1 Like

Hi @Softea

Try this one.

  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, style.css or theme.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.
section#MainProduct-template--20075321262390__main * {
    color: #C3BEFF;
}
section#shopify-section-template--20075321262390__related-products * {
    color: #C3BEFF;
}

Result:

The buttons and border, I didnt change im not sure what color youll like to use.

I hope it help.

Thank you, unfortunately the text color didn’t change :sad_but_relieved_face: https://q06ptcfmftja6a95-77436682550.shopifypreview.com

also, would you mind giving me the code for the button and boarder also? I’ll fix the color for it? thanks! :grinning_face_with_smiling_eyes:

2 Likes

Hello @Softea

please add this css Asset > base.css and paste this at the bottom of the file:-

.related-products__heading {
color: #C3BEFF!important;
}

Hey @Softea

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Try this one.

section#MainProduct-template--20075321262390__main * {
    color: #C3BEFF !important;
}
section#shopify-section-template--20075321262390__related-products * {
    color: #C3BEFF !important;
}

Ill follow the code for button. Thanks!

Check this one for the buttons.

.product-form__input input[type='radio']:checked + label {
    background: deeppink;
}
.product-form__input input[type='radio'] + label {
    border-color: red;
}
.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
    --color-secondary-button-text: 195, 190, 255 !important;
    --border-opacity: 0px;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw {
    background: deeppink;
}

Change the colors you like.

Result: