How do i make the Price bigger on the product page?

[Ago76]

Hey i im using debutify

I want to make the Price bigger than the compare Price, and I would also like to know, how i put the reduced price right or left to the compare price.

I also want to add a field next to the price where"50% off" is written on

I put a picture up from a website, where it is like i want to i have it

would be happy if anybody can help

[Transcy]

Hello @Ago76 ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Assets folder → base.css file or theme.scss.liquid file

Add this following code at the bottom of page

.price-container {
    display: flex;
    align-items: baseline;
}

.compare-price {
    margin-right: 10px;
    text-decoration: line-through;
}

Save and preview

Hope this can help.

Transcy

[Ago76]

Doesnt work, my site looks like that after pasting the code

[debutifysupport]

Hi @Ago76 ,

While you’re in the theme editor, head over to the theme settings > custom style/script > and in the custom style input, paste the following style.

#ProductPrice{
font-size:24px;
order:1;
margin-left: 4px;
}
#ComparePrice{
order:0;
margin-left: 0;

}

.dbtfy-discount_saved{
order:2;

}

This tweak will align the regular price to the right and the compared price to the left.

Additionally, it will enlarge the font size of the regular product price. If you’d like to adjust the font size, just modify the value (currently set at 24px and in bold) to achieve your preferred size.

At the moment the ‘50% off’ badge on Debutify is provided by the Discount Saved add-on.

[rhinestoneart]

I need help…

This is what comes up on mine… im trying to enlarge the size of the prices, please help.

[debutifysupport]

Hi @rhinestoneart

Make sure you are adding the CSS to the right location.
1 - Go to the Theme Settings ( ).
2 - Open the Custom Style/CSS section.
3 - Paste the CSS onto the CSS field.