How to Change the Color of Product and Compare Price? shopify 2024

Topic summary

A Shopify store owner is trying to change the color of product prices, specifically wanting the sale price in red and the compare-at (original) price in black.

Initial Problem:

  • User couldn’t locate base.css file to modify price colors
  • Guided to access theme code via Online Store → three dots → Edit Code

Solution Process:

  • Found styles.css file in theme instead of base.css
  • First attempt made both prices red instead of just the sale price
  • Required multiple CSS code iterations to target the correct elements

Final Working Code:

span.was-price.theme-money { color: #000 !important; }

This CSS targets the compare-at price specifically, keeping it black while the sale price remains red. The !important flag was necessary to override existing theme styles. The solution is confirmed working on the live website.

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

i only have those