Changing appearance of price / discount for products dawn theme

[JordiP]

Hello, I want to show a discount and make it more evident for people.

(^ This is how the prices appear now)

(^ I would like the discounted price to be placed first, and in a red font. Also if possible I would like a little discount percentage box as seen above aswell)

Any help is appreciated, thanks!

Store: artisimo.es

[Shadab_dev]

Changing alignment of text is doable with css but to add the discount on these product cards you will need to add a bit of liquid code.

Best

Shadab

[WebDeskSolution]

Hello @JordiP

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.

• Click on Online Store > Themes.

• Find the theme you want to edit and then click Actions > Edit code.

• Search component-price.css

• Insert the provided CSS code at the end of the file and save the changes.

.card-information .price--on-sale .price__sale {
    flex-direction: row-reverse;
    display: flex;
    gap: 10px;
}
.card-information .price--on-sale .price__sale span.price-item.price-item--sale.price-item--last {
    color: #ff0000;
}
@media screen and (max-width: 480px){
    .card-information .price--on-sale .price__sale{
        flex-direction:column-reverse;
   }    
}

Output : https://prnt.sc/rKO_t2ibE_AZ

Please hit Like and Mark it as a Solution if you find our reply helpful.