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

Store Design
, ,
1

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!

2

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 on theme.liquid

.product .price__regular dd span.price-item.price-item--regular{ color: red !important; font-weight: 900 !important; font-size: 30px !important; }

RESULT:

Tech_Coding_0-1736480565419.png
Tech_Coding_0-1736480565419.png1260×339 101 KB

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

1 Like
3

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 */
}
1 Like
4

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

1 Like
5

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 :blush: :+1: