How can I adjust product page price colors and sizes?

Store Design
1

Hi there, I need a little help with my product page.

I want to increase the size of the strikethrough, compared priced, to 24

Increase the size of the product name header to 32 PX.

Increase the size of the new price to 20PX
Aswell as get rid of the discount tag icon, increasing the size of the text the to 18, with green backround around it: #00b67b, padding 4px horizontally x 10px vertically .

Finally rearranging so that the strike price come before the sale price.

here is a picture to reference, thank you so much.

2

@RosalynnSkin

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@RosalynnSkin

Please share your store URL!

Thanks!

4

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

5

@KetanKumar

store url: https://rosalynnskin.com/

6

@dmwwebartisan

store url: https://rosalynnskin.com/

7

@Denishamakwana

store url: https://rosalynnskin.com/

8

@Denishamakwana @dmwwebartisan @KetanKumar

Could you guys help me with this please

9

Please add below code in bottom of theme.scss.css file

#ProductPrice span.money.conversion-bear-money {
font-size: 20px;
}
.product-single__meta h1.product-single__title {
font-size: 32px;
}
#ComparePrice span.money.conversion-bear-money {
font-size: 24px;
margin-left:20px;
}
span.material-icons-sharp {
display: none;
}
.dbtfy-discount_saved .number-discount_saved.badge {
padding: 6px 10px;
font-size: 18px;
font-weight: 400;
background-color: #00b67b;

border-radius: 0;

text-transform: lowercase;
}

Thank you.

10

@RosalynnSkin

Please Add this

span#ProductPrice {
    font-size: 20px;
}
.grid__item.flex-fill h1 {
font-size:32px;
}
span#ComparePrice {
    font-size: 24px;
    margin-right:10px;
    order: -1;
}
#DiscountSaved span.badge.number-discount_saved {
    font-size: 18px;
    background: #00b67b;
    border-radius:0;
    padding: 10px 4px;
}

Thanks!

CSS to your css file

11

@infoatcodelab7 @Denishamakwana

They both seem to look good however is there any way I can have it formatted on the product page then on the checkout page it shows up like this

RosalynnSkin_0-1644272236164.png
RosalynnSkin_0-1644272236164.png468×887 58.8 KB

where it the ‘original price’ then the discounted price with a coupon code?

Possibly hardcoding the ‘original price’ on the product page then applying an automatic discount code. If you want I can send their site if that makes it easier to understand.