Changing Font Size & Weight

Solved

Changing Font Size & Weight

blwalsh21
Excursionist
15 1 2

Hi, I am looking to change the font size and weight in a particular part of my store. As a disclaimer, I have already adjusted the typography settings for both headings and the body. I am looking for something more custom. 

 

On the Shop Page I am looking to decrease the size of the price. I would like it to match the item description. Additionally, I would like the price to be in bold. See below.

 

Screenshot 2024-09-09 at 6.37.56 PM.png

 

On the Item Page, I would like the price to be in bold. As you can see below, I figured out how to make the item description bold, however, I cannot figure out how to make the price bold. 

 

Screenshot 2024-09-09 at 7.26.13 PM.png 

Thank you very much for any help you can provide! 

 

Cheers,

Accepted Solution (1)
blwalsh21
Excursionist
15 1 2

This is an accepted solution.

  • Does this change the color of the font to black? I noticed you included " color: #000 !important" for both the price and item description. I would like the keep the current color. 
  • I do not want the item description to be bold. I noticed that your code included "font-weight: bold !important;". Should I just remove this to keep it as it is?
  • Is this where I post the code?
    Screenshot 2024-09-10 at 5.45.59 PM.png

 

View solution in original post

Replies 8 (8)

BSSCommerce-B2B
Shopify Partner
1969 564 566

Hi @blwalsh21 , 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

blwalsh21
Excursionist
15 1 2

Sure thing, thank you very much! 

 

URL: https://wyenewyork.com/ 

Password: N/A

DaveedValencia
Shopify Partner
43 7 7

Add this CSS code to your theme settings. Go to Themes > Customize > Theme Settings > Custom CSS. This way it applies to collection pages and product pages.

.price__regular{
font-size: 23px;
font-weight: bold;
}

 

blwalsh21
Excursionist
15 1 2

Thank you very much! The size is perfect for the "item" page, however, I still think it's a little too big for the "Shop" page. Do you know how to edit each of them individually? 

Tech_Coding
Shopify Partner
386 106 90

Hello @blwalsh21 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
blwalsh21
Excursionist
15 1 2

Sure thing, thank you very much! 

URL: https://wyenewyork.com/ 

Password: N/A

Tech_Coding
Shopify Partner
386 106 90

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>
  .price__regular .price-item--regular {
      font-weight: bold !important;
       color: #000 !important;
      font-size: 21px !important;
  }
  .product__title h1 {
     color: #000 !important;
     font-weight: bold !important;
      font-size: 27px !important;
   }
</style>

Tech_Coding_0-1725978776205.png

Tech_Coding_1-1725978903284.png

 

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

 

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
blwalsh21
Excursionist
15 1 2

This is an accepted solution.

  • Does this change the color of the font to black? I noticed you included " color: #000 !important" for both the price and item description. I would like the keep the current color. 
  • I do not want the item description to be bold. I noticed that your code included "font-weight: bold !important;". Should I just remove this to keep it as it is?
  • Is this where I post the code?
    Screenshot 2024-09-10 at 5.45.59 PM.png