How to change font size on product price only?

[DaveyAlcatraz]

Hi everyone,

I'm not sure if it's because I'm using the Bullet theme in particular, I can't understand how that would be the case but I am completely open to education and help on this. All I'm looking to do is change the product page price to a larger font size, in bold, with a colour on that price, an example of inspiration I've taken is below although I wouldn't want to use baby blue like the example. I'd instead use a brand hex code #BC6C25.

Please note, this company has no affiliation with my brand at all. I helped them with their marketing strategy recently and looking over their website gave me some inspiration for my own business which is in an entirely different field. Once again, just looking to achieve this result with the product price font only.

[Dan-From-Ryviu]

Hi @DaveyAlcatraz 

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings 

.t-product .price { font-size: 28px; color: #4eabe9; }

[niraj_patel · Accepted solution]

Hello @DaveyAlcatraz 

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>
  .t-product .price{
     font-size: 30px !important;
     font-weight: 900 !important;
    color: #BC6C25 !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[DaveyAlcatraz]

Hi Niraj, thanks for responding! Love this solution, only trouble I'm having is I can't find the word "body" by itself. Just to confirm, is this the line of code you're referring to?

[niraj_patel]

Yes, this is the same line, now </body> is closing, paste it.

[BSSCommerce-B2B]

scroll down to the bottom to find close body tag

[niraj_patel]

thanks to guide him @BSSCommerce-B2B 😊

[BSSCommerce-B2B]

😍 It's such my honor to help, bro @niraj_patel @DaveyAlcatraz  😍

Have a nice day! ^^

[BSSCommerce-B2B]

HI @DaveyAlcatraz , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>: 

<style>
  .t-product .price {
    font-size: 28px !important;
    color: #BC6C25 !important;
  }
</style>

Step 3: Save your code and reload this page.

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!