How do I change a specific text color using CSS?

Technical Q&A

Topic summary

A user seeks to change the color of a specific price element (“R$ 19.24”) on their e-commerce product page using CSS.

Initial Solution Attempt:

  • Another user suggests targeting .price-list span with color: white !important;
  • This approach changes all prices together, not just the specific element needed

Official Support Response:
GemPages support team provides a more targeted solution:

  • Navigate to: Online Store → Theme → Edit code → Layout
  • Open the theme.liquid file
  • Add custom CSS code above the </head> tag
  • Use specific markup/selectors to target only the desired price element

The discussion demonstrates a common CSS specificity challenge where broad selectors affect multiple elements unintentionally. The recommended approach involves adding custom code directly to the theme files for precise targeting.

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

How to change the color of “R$ 19.24” by css?
website: https://colorluzes.com.br/collections/mais-vendidos/products/paineis-de-iluminacao-hexagonais

GustavoAlves_0-1671573694369.png
GustavoAlves_0-1671573694369.png562×463 17.5 KB

2

.price-list span {
color: white !important;
}

3

Changed the price of the product together which is in green.

4

Hello @GustavoAlves

It’s GemPages support team and glad to support you today.

Please check out my suggestion below:

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

  2. Open file theme.liquid then add this code to above the tag

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

1 Like