Display sale price in another color and move it to the left - Dawn Theme

[Julietteweb]

Hello,

I'd like to change the color of the sale price to red and move it to the left of the crossed-out price.

If anyone knows the right modification to make to the Dawn theme for this, it would be great!

My website is under construction, here is the link : https://ancestraathletes.com

Thank you for your time!

[Moeed]

Hey @Julietteweb 

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>
span.price-item.price-item--sale.price-item--last {
    color: red !important;
}
.price__sale {
    display: flex !important;
    flex-flow: row-reverse !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Julietteweb]

Hello @Moeed,

Thank you for your reply, it worked very well on the discounted prices. However, it also worked on the non-discounted price by displaying the price twice in both colors.

Whereas the “24.95€” price should only be displayed once and in black since there is no discount.

 How can I adjust this?

[Julietteweb]

@Moeed 

Thank you for your reply, it worked very well on the discounted prices. However, it also worked on the non-discounted price by displaying the price twice in both colors.

Whereas the “24.95€” price should only be displayed once and in black since there is no discount.

 How can I adjust this?