A user wants to modify product pricing display in the Dawn theme to make discounts more prominent. Currently, prices appear in a standard format, but they want:
Desired changes:
One responder notes that while CSS can handle text alignment changes, adding the discount percentage box requires Liquid code modifications to the product cards.
Another contributor provides a specific CSS solution:
component-price.cssflex-direction: row-reverse and applies blue color stylingStatus: Partial solution offered for price reordering via CSS; discount percentage feature would require additional Liquid code implementation not yet provided.
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
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
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.