How can I place the product price above the compare price in Dawn?

[rielrielx]

Hi all,

Could yall help me with the 2 type price placement please?

I would like to have my price above compare price : link

and price before compare price in the product page : link

Thank you for your help!

[Dan-From-Ryviu]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code after and save file

[webwondersco]

@rielrielx hope you are doing well. add the below line of CSS code at the end of your base.css file.

body .price--on-sale .price__sale{
display:inline-flex;
flex-direction: row-reverse;
}
body .price--on-sale .price-item--regular{
margin:0 0 0 1rem;
}

the output of the above code will look like the attachment.

[Jun_Kuan]

For price above compare price, line 77 of component-price.css

.price--on-sale .price__sale {
display: inline-block
}

to:

.price--on-sale .price__sale {

display: flex;

flex-direction: column-reverse;

}

you seem to have fixed the product page already but let me know if you still need help

[niraj_patel]

hello @Rielrielx

You can add code by following these steps to change ATC background color

1. Go to Online Store → Theme → Edit code.

2. Open your component-price.css file

3. For 1st issue paste this CSS below in component-price.css file

4. For 2nd issue firstly find the class name (.price–on-sale .price__sale) and paste this CSS below in same file —> component-price.css file