BOLD Price - Brooklyn Theme

Highlighted
Tourist
4 0 1

Hello :)

I just wanted to know how to make the price font bigger. I cannot find the code where I can put "<font size="5"> </front>" in.
Thanks for your answers :)

0 Likes
Highlighted
Shopify Partner
1866 181 748

Hello Fritz,

 

I would not use the <font /> tag for this purpose because it is not supported in HTML5 and was deprecated (can't remember when). Use CSS instead - much neater way to do so.

 

Step 1

First create a backup of your current theme in case something goes wrong while making changes. Go to Online Store > Themes and then Actions > Duplicate.

 

Step 2

Go to Actions > Edit code and within the editor that loads, open the file Assets / theme.scss.liquid from the left folder pane. Scroll to the very bottom and paste this code on a new line

 

.product-single__price {
  font-size: 2em;
}

You can change the value of 2em for anything you like, even fractions such as 1.45em or 0.5em. 1em means the new size will be 1 relative unit of the base font on the element i.e. font size will not change. 2em means it will be 2x the current element's font size. 0.5em means it will be half the current font size.

 

Hit save and you're good to go.

 

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
4 Likes
Highlighted
Tourist
4 0 1

Hey Karl,

thanks for your reply. It worked on the actual product page, but on the homepage i have slider with the products. Is it possible to edit the code to that the price tag also appers bigger on the homepage slider section ?

Greetings

0 Likes
Highlighted
Shopify Partner
1866 181 748

Sure is.

 

Do the same as above but add this code instead

 

.grid-product__price {
  font-size: 2em;
}
Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
Tourist
4 0 1

it does not work. I'm using the "Multiple Product Slider by Enormapps - Responsive Slide", where you have to put the code in the "theme.liquid".

 

0 Likes
Highlighted
Shopify Partner
1866 181 748

Ah, sorry, can't help you with commercial app related questions.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
New Member
2 0 0

Hello,

 

How about if I wanted to "Bold" the font of the price in the product page, may I know what is the code? 

 

My price in the product page is somehow not bold and been looking around for a solution but to no avail. The theme I am using is Brooklyn.

 

 Thank you

0 Likes
Highlighted
Shopify Partner
1445 195 521

For my default brooklyn you can add this to the bottom of theme.scss.liquid in your assets folder:

 

span#ProductPrice {
    font-weight: bold;
}

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Highlighted
New Member
2 0 0

Hi Ninthony,

 

Thank you for your help. It works like a charm. Have a nice day!

 

- Francis

0 Likes
Highlighted
New Member
1 0 0

Hello 

 

I tried both pieces of code but it hasn't changed anything to the price tag. Is there another way to make the font bigger and bold? 

Also, the typography section didn't change the font of the price tag. Is that normal? 

0 Likes