Changing text color on landing page

Shopify Discussion

Topic summary

Issue: New product templates show pink text that can’t be changed to black, while the original product displays the intended pink. The problem affects product description and other text areas.

Root cause: A global CSS rule using a universal selector forces pink on all text:

  • product-info#ProductInfo-template–20310706848042__main * { color: #efc2ef; }
  • The “*” applies to all descendants; #efc2ef is pink. This overrides other styles.

Proposed fixes:

  • Override with more specific CSS or use !important to set the desired color (e.g., black #000) on targeted elements.
  • Add custom CSS in theme.liquid near (exact snippet provided via an image attachment).
  • Alternatively, edit assets/section-main-product.css and set a container rule (example given targets .product__info-container), though one suggestion reinforced pink with !important.

Outcome: The original poster confirmed the solution worked and expressed thanks.

Status: Resolved; no further questions.

Notes: An image attachment contains the exact code inserted in theme.liquid and is central for replicating the fix. Terminology: “!important” forces a CSS rule to override other declarations; the universal selector (*) targets all elements.

Summarized with AI on January 21. AI used: gpt-5.
1

Hey there,

I have been having an issue involving changing the text color on my product land page templates. On my initial product (Which I will include down below) the text is the exact color pink I want it to be. However, in all of my new product templates, I have been unable to change the text in product description and other the other parts of text from pink to black. I will include down below the URL to my store as well as the correct text color (all pink) as well as the template(s) that need alterations. Any potential solutions are much appreciated!

https://spinealignsolutions.shop/products/back-massager-magnetotherapy-multi-level-adjustable-stretcher-waist-neck-fitness-lumbar-cervical-spine-support-pain-relief

2

Hey @JohnKoehn35

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

RESULT:

Moeed_0-1692297438965.png
Moeed_0-1692297438965.png1395Ă—937 178 KB

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

Best Regards,
Moeed

1 Like
3

Hi @JohnKoehn35
it is all because of the CSS

product-info#ProductInfo-template–20310706848042__main * {
color: #efc2ef;

}
which is having * for selecting all text, So for changing the text you have to override it by adding **" !important "**CSS for the text on which you want #000.

Thanks

1 Like
4

Hi @JohnKoehn35 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/section-main-product.css file.

  3. Add the code at the end of the file:

.product__info-container {
    color: #efc2ef !important;
}

Best regards,

Anthony

1 Like
5

Sensational Thank you so very much.

6

Great Thank you for your help!

7

Great thank you very much for your help!

8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.