How to change font size and making it bold for the price

Hi Carolina,

Katrine here from Plak Theme support in order to assist you with the styling of the product price in product page.

We didn't add too many options to change each feature individually to keep the theme light and fast by consequence.

However, in order to change the font size and the weight of the product price in product page, I invite you to follow these steps :

• From your Shopify dashboard, click Online store > Actions > Edit code
• Open the file theme.css (available from the version 2.4 and beyond, otherwise open the file theme.scss.liquid)
• At the very bottom of the file, add this code

/* this is to style the regular product price */
.product-template__container .price-item--sale {
font-size : 30px;
font-weight : bold;

/* this is to style the crossedout product price */
}
.product-template__container .price-item--regular {
font-size : 32px;
font-weight : bold;
}

• Click Save

Note : The first part of the code will change the style of the regular product price, while the second one will change the style of the crossed out price (if you have a promo)

Let me know Carolina if this worked for you and if you need any further assistance 🙂

Best regards,
Katrine

Hello @plaktheme,

I've tried the code but it didn't work. Is there another way?

 Thank you,

Carolina

Hi @nashimbi

I have tried the code on my side on Plak 2.4 and it worked great for me, may be your site code has been altered somehow.

Could you please go to your forum profile and add your website link in the box mentioned in the screenshot below ?

This way I can check what's going wrong 

Thanks in advance

Hello Jasmine,

I have added my website link as in screenshot you've provided.

ps. I've put the password for the website in about me box.

Kind regards,

Carolina

Posted by: @nashimbi

Hello Jasmine,

I have added my website link as in screenshot you've provided.

ps. I've put the password for the website in about me box.

Kind regards,

Carolina

Thank you Carolina for providing me with the site link + the password.

I checked your site, try to use these codes instead :

/* when there a regular + sale price
/* regular product price */
.product-template__container .price-item--sale {
font-size : 25px !important;
font-weight : bold !important;
/* crossedout product price */
}
.product-template__container .price-item--regular {
font-size : 28px !important;
font-weight : bold !important;
}

/* when there is a regular price only */
.product-template__container .price-item--sale-only {
font-size : 28px !important;
font-weight : bold !important;
}

Let me know if it worked

Best regards,

Hello @plaktheme,

I've tried the code you've given but unfortunately it didn't work 😣.. will there be another way?

Best Regards,

Carolina

Posted by: @nashimbi

Hello @plaktheme,

I've tried the code you've given but unfortunately it didn't work 😣.. will there be another way?

Best Regards,

Carolina

This is weird, it should normally work, anyway, I have sent an access request to your store, once the access is granted, I will check the issue and fix it

Katrine

Hello Katrine,

I've just accepted the request

Carolina

Posted by: @nashimbi

Hello Katrine,

I've just accepted the request

Carolina

Thanks for granting me the access Carolina,

I checked your store and the code is working fine on product page, were you referring to collection pages too ?

Oh wow it did became big! yes I was wondering how to change price in collection page as well.

Posted by: @nashimbi

Oh wow it did became big! yes I was wondering how to change price in collection page as well.

In order to change the product prices separately on the collection pages and on the featured product on homepage, add the below codes on homepage.css and on theme.css

/* when there a regular + sale price
/* regular product price */
.product-card .price-item--sale {
font-size : 25px !important;
font-weight : bold !important;
/* crossedout product price */
}
.product-card .price-item--regular {
font-size : 28px !important;
font-weight : bold !important;
}

/* when there is a regular price only */
.product-card .price-item--sale-only {
font-size : 28px !important;
font-weight : bold !important;
}

Kind regards,
Katrine

It works great! Thank you for the great service! 😀