How to change Price font size, weight, or color on Product Page?

[MyCsPiTTa]

Hi all,

Would love if someone could suggest how to do this on my site www.gardenhearth.co.uk 

I've tried a few solutions to other people's same question, but none worked for me. This included pasting various snippets into either theme.liquid or base.css.

Thanks in advance!

[Tech_Coding · Accepted solution]

Hello @MyCsPiTTa 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .product .price__regular dd span.price-item.price-item--regular{
      color: red !important;
      font-weight: 900 !important;
      font-size: 30px !important;
   }
</style>
RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[MyCsPiTTa]

Thanks so much! That worked perfectly, though I added my custom color.

[Dan-From-Ryviu]

Hi @MyCsPiTTa 

You can do that by adding this code to Custom CSS in Sales Channels > Online Store > Themes > Customize > Theme settings. 

.product .price--large {
    color: red; /* color of price */
    font-size: 2rem; /* font size of price */
    font-weight: 700;  /* font weight of price */
}

[MyCsPiTTa]

Thanks Dan! 

Yours worked too, but I had to add it under base.css, not theme.liquid.

The difference between yours and Tech's solution is yours changes the price value and the word "Price", while Tech's only changes the price value.

Both great solutions, depending on the need 😊👍