How to make the promo price and the Sale badge red in the product grid?

[Jim3]

I want to make the promo price in the product grid red color and also the sale badge. Also the letter sale should be Bold. How can we do that? Thanks!

[AiTrillion]

Hello @Jim3 ,

I hope you are doing well!

Can you please provide the store URL so that we can change the color to red?

[Jim3]

WOMEN NEW ARRIVALS

thank you

[Dan-From-Ryviu]

You can add this code to Custom CSS and check again

.grid-product__tag--sale {
    background-color: red !important;
}
.grid-product__price > span.money {
    color: red;
}

Best regards,

Dan from Ryviu: Product Reviews App

[namphan]

Hi @Jim3,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.grid-product__price--original + span + .money {
    color: #ff0000;
}
.grid-product__tag--sale {
    background-color: #ff0000;
}

If I helped you, then a Like would be truly appreciated.

[Jim3]

@namphan Unfortunately this didn’t workout

[Jim3]

@Dan-From-Ryviu Unfortunately it didn’t workout to me

[oscprofessional]

Hi @Jim3 ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

.collection-grid__wrapper .grid-product__tag.grid-product__tag--sale {
    background-color: red !important;
}
.collection-grid__wrapper .grid-product__price > span.money {
    color: red !important;
}

[tim_1]

Try this – should be ok in “Custom CSS”, in “Theme settings”

.grid-product__tag--sale {
  --colorSaleTag: red; 
  font-weight:bold;
}
.grid-product__price--original ~ .money {
  color: red;
}

[topnewyork]

Hi @Jim3,

You should watch this video Youtube it will help with your problem.
If this video solves your problem, then please mark my comment as the solution.

Thanks!

[namphan]

Hi @Jim3,

I checked and now the theme.css file is corrupted, so the added code won’t work.

You can add the code at: Customize > Theme settings > Custom CSS or please go to layout > theme.liquid file, find ‘‘ and add code here:

Code:

<style>
      .grid-product__price--original + span + .money {
          color: #ff0000;
      }
      .grid-product__tag--sale {
          background-color: #ff0000;
      }
    </style>