How to change font size on product price only?

Store Design
, , ,
1

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.

DaveyAlcatraz_0-1722916818799.png
DaveyAlcatraz_0-1722916818799.png1149×802 327 KB

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.

2

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; }
3

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

.t-product .price{ font-size: 30px !important; font-weight: 900 !important; color: #BC6C25 !important; }

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

4

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?

DaveyAlcatraz_0-1722917538008.png
DaveyAlcatraz_0-1722917538008.png1920×1080 244 KB

5

Yes, this is the same line, now is closing, paste it.

6

scroll down to the bottom to find close body tag

BSSCommerceB2B_0-1722917819998.png
BSSCommerceB2B_0-1722917819998.png1455×389 24.3 KB

7

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:

BSSCommerceB2B_0-1722917796048.png
BSSCommerceB2B_0-1722917796048.png400×195 26.3 KB

Step 2: Search for the file theme.liquid. And add this code snippet before tag or :

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!

8

thanks to guide him @BSSCommerce-B2B :blush:

9

:heart_eyes: It’s such my honor to help, bro @niraj_patel @DaveyAlcatraz :heart_eyes:

Have a nice day! ^^