BOLD Price - Brooklyn Theme

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
Shopify Partner
1838 173 597

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!

I turn coffee in to code - since 1998
2 Likes
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
Shopify Partner
1838 173 597

Sure is.

 

Do the same as above but add this code instead

 

.grid-product__price {
  font-size: 2em;
}
I turn coffee in to code - since 1998
0 Likes
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
Shopify Partner
1838 173 597

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

I turn coffee in to code - since 1998
0 Likes
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
Astronaut
1081 147 272

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 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
New Member
2 0 0

Hi Ninthony,

 

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

 

- Francis

0 Likes