Differentiate "Sold Out" and "Sale" badge color DAWN

[Mortskaa]

Hi, I want to have different colors on the "On Sale" badge from what I have on "Sold Out". I have found many working solutions on how to change them both at the same time with CSS but non where it's possible to give them different colors. I have added a screenshot where "På salg" equals "On Sale" and "Utsolgt" equals "Sold Out".

I currently have this on the bottom of the CSS file.

.badge {
background-color: red !important;
border-color: red !important;
color: white !important;
}

Does anyone know how?

[Moeed]

Hey @Mortskaa 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Mortskaa]

https://nydisk.no

[Moeed]

Hey @Mortskaa 

Can you remove the current code so that I can help you out?

Best Reagrds,

Moeed

[EvinceDev]

Hello @Mortskaa , Add class "badge-on-sale" for "on sale" and "badge-sold-out" for "sold out" below added css for badge different colors.

.badge-on-sale {
  background-color: #28a745 !important; /* Bright Green */
  border-color: #28a745 !important;
  color: white !important;
}

/* "Sold Out" Badge - Gray */
.badge-sold-out {
  background-color: #808080 !important; /* Dark Gray */
  border-color: #808080 !important;
  color: white !important;
}

[Mortskaa]

How can I get in touch with you?

We need a Shopify developer we can use for stuff like this, build widgets and so on going forward.

[Amanda_Fordeer · Accepted solution]

Hi @Mortskaa,

During the Black Friday sale season, you should consider finding an optimized solution for this problem. If you're unable to adjust the colors using code, it's advisable to utilize an app.

For instance, with Fordeer: Product Labels & Badges, you can easily create two campaigns (labels), one for items marked as "On Sale" and another for items marked as "Sold Out", and use:

1. Discount range to automatically display the label on "On Sale" products.

2. Inventory status (Out stock) for the "Sold Out" label.