How can I change the appearance of sale prices on my website?

Store Design
, , , , , , , ,
1

I want to change the way my sale prices look. I need current price to be red, then crossed compare-at price, then straight slash and percentage discount in CAPS. I added references below:

I want prices with sales to look like that:

Screenshot 2023-09-24 at 9.13.34 PM.png
Screenshot 2023-09-24 at 9.13.34 PM.png676×198 11.2 KB

When I have this:

Screenshot 2023-09-24 at 9.11.00 PM.png
Screenshot 2023-09-24 at 9.11.00 PM.png644×132 10.4 KB

WEBSITE LINK: hillenic.com

2

Hello @AceStore ,

To change the color of current price and compared price:

  1. Go to Online Store → Theme → Edit code

  2. Open your style.css file and paste the following code below:

.product-price__item.product-price__amount.product-price__amount--on-sale.theme-money {
    color: #e61616; 
}
.product-price__item.product-price__compare.theme-money {
    color: #4c4949; 
}

To add percentage in place of sale you need to find and copy the code from the template because it’s already there. However, if you need someone to do it for you, you can drop me an email.

Thanks

3

Hi @AceStore

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the styles.css file:

.product-price .product-price__amount {color: red;}

.product-price .product-price__compare {border-right: 1px solid #000; padding-right: 8px; line-height: 16px;}

.product-price.price-label {text-transform: uppercase;}

Regards,

San