Does someone know how to change the design of price when a product is on sale?

[KimGottwald]

I would like to make the "new price" in the color red. Is this possible?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test?sort_by=price-descen...

Im using the Trade theme.

Picture: 

 

[WalkYourStyle]

Could you please navigate to your theme's code and within the 'Sections' folder, locate the file named 'main-collection-product-grid.liquid' or a similarly named file. In that file, find the

<div class="card-information"></div>

element. Once you have located it, please provide an image of the code for that element so that we can assist you further.

[KimGottwald]

Sadly I can't find that part of the code:

    

[WalkYourStyle]

Click Ctrl + F and then search for "card__information"(double underscore)

[WalkYourStyle]

Try searching for it in the file 'card-product.liquid' which is located in the snippets folder

[KimGottwald]

Like this?

 

[WalkYourStyle]

In your theme's code locate inside the Assets folder the file 'component-card.css'. At the bottom of the file paste this code

.price__sale .price-item .price-item--sale .price-item--last{
    .color: red;
}

Hope this helps!

[KimGottwald]

This is not working sadly, but thank you!

[WalkYourStyle]

Corrected Version

.price-item--sale{
   color: red;
}

[Made4uo-Ribe · Accepted solution]

Hi @KimGottwald 

check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

span.price-item.price-item--sale.price-item--last {
    color: red;
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!