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

Shopify Discussion

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.
1

i cant find the base.css, i wanna change color of product and compare price.

this is my link https://www.william-project.com/

2

Try going to the online store, then click on the three dots next to the customization button and select the edit code action. Next, find the CSS file. It might be named differently than base.css, depending on the theme. It could be custom.css or something similar. Then paste your styles there.

Screenshot 2024-07-08 at 19.52.54.png
Screenshot 2024-07-08 at 19.52.54.png600×1128 29.5 KB

3

should i try the 3 .css ?

4

i only have those

Captura de Pantalla 2024-07-08 a la(s) 12.40.10 p.m..png
Captura de Pantalla 2024-07-08 a la(s) 12.40.10 p.m..png576×706 20.7 KB

5

in your theme there is a file called styles.css

you can add the following css and change the color to your preferred one

span.was-price.theme-money {
    color: red;
}
6

great! it worked but i wanna put red on the price not the compared price

7

If it’s help please mark my answer as a solution :slightly_smiling_face:

.product-block.cc-product-block.on-sale span.theme-money {
    color: red;
}
8

it worked but the problem is that now both are red

Captura de Pantalla 2024-07-08 a la(s) 12.55.45 p.m..png
Captura de Pantalla 2024-07-08 a la(s) 12.55.45 p.m..png450×124 12.3 KB

9

Change the code of my first message to:

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

Captura de Pantalla 2024-07-08 a la(s) 1.01.24 p.m..png
Captura de Pantalla 2024-07-08 a la(s) 1.01.24 p.m..png1156×526 57.3 KB

is this correct ?

11

exactly

12

it didnt worked, is still red both

13

replace #000; with #000 !important;

14

try with this one:

span.was-price.theme-money {
  color: pink;
}
15

no, it didtn worked, can you help me with the complete code please ? just to put red and black please

16

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

17

@williamproject it’s working on your website, please mark my answers as a solution :slightly_smiling_face: