how can i make my prices bold + smaller font sizes prices (Trade theme)

[TOC-MR]

Hi all,

How do I make the font sizes of the prices smaller and bold? I have tried some CSS codes (which I found in several Shopify threads), and the bold part was working. However, making the font size of the prices smaller did not work. Ideally, I would also like the flexibility to give my promo/sale prices a different color. Can someone help me with a complete, correct CSS code and a walkthrough to get this implemented?

Thank you in advanced!

[niraj_patel · Accepted solution]

@TOC-MR 

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 {
font-weight: 600;
font-size: 14px !important;
}
s.price-item.price-item--regular {
color: blue !important;
}
span.price-item.price-item--sale.price-item--last {
color: chocolate !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TOC-MR · Accepted solution]

red price is not bold yet. What am i doing wrong in the code 🙂

[niraj_patel]

Hello @TOC-MR 

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.

[niraj_patel · Accepted solution]

@TOC-MR 

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 {
font-weight: 600;
font-size: 14px !important;
}
s.price-item.price-item--regular {
color: blue !important;
}
span.price-item.price-item--sale.price-item--last {
color: chocolate !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TOC-MR]

almost there, i want the sales price also to be bold and ajustubale in size

[niraj_patel]

@TOC-MR 

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--on-sale .price-item--regular {
color: blue !important;
font-size: 13px !important; /*adjust according to you*/
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TOC-MR · Accepted solution]

red price is not bold yet. What am i doing wrong in the code 🙂

[niraj_patel · Accepted solution]

@TOC-MR 

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>
span.price-item.price-item--sale.price-item--last {
font-weight: 700 !important;
font-size: 14px !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[TOC-MR]

perfect 🙂 Thanks!

[Moeed]

Hey @TOC-MR 

Can you share your Store URL and Password if enabled?

Best Regards,

Moeed

[TOC-MR]

Sure no problem

https://theonlinecollective.nl/

SHOPIFY2024!

[Moeed]

Hey @TOC-MR 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.price__regular .price-item--regular {
    font-weight: bold !important;
    font-size: 14px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[TOC-MR]

will try. Do you also have a part of the code to give promotion/sales price another color?

[Made4uo-Ribe]

Hi @TOC-MR 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.price-item.price-item--regular {
    font-weight: 900;
    font-size: 1.5rem;
}

.price-item--sale.price-item--last {
    color: red;
    font-weight: 900;
    font-size: 1.5rem;
}

• And Save. 
• Result:
•