How to change Featured Collection Sold Out Badge Color

[eComony]

How to change Featured Collection Sold Out Badge Color in Dawn 13.0. ?

I want to change it to Grey to avoid confusion, because the Sold Out Badge color, which is usually Grey too.

Looking forward for your support! 🙏

Thanks in advance,
Birkan

 

shop URL: evmotion.shop  

[suyash1]

@eComony - can you please share this page link where you have this badge?

[eComony]

Sure, https://evmotion.shop/collections/the-new-aero-aero

Note: I want to change it for all collections / categories

[eComony]

Unfortunately this did not work for me...

[Made4uo-Ribe]

Hi @eComony 

Which badge you like to change color? 

I just like to confirm which badge you like to change the color? The Featured collection badge is green and the product page color is grey. 

As i notice in your base.css file you've code the badge in green. And Im a bit confuse the badge in your product page it seems like it in the inset html code. But if you like to change the color in the product page badge you can check this code. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.price.price--large.price--sold-out.price--show-badge span.badge.price__badge-sold-out.color-accent-1 {
    background: green !important;
}

And Save. 

Result:

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

[eComony]

qy there, first of, many thanks for the quick respone. 

I want to use grey on the OUT OF STOCK, because SALE Badge is green.

Thanks in advance! 🙏

[Made4uo-Ribe]

oh, okay. The code that you add for the green color is for all the badge available in your store. And that is overide code, would you mind to share the URL for the sale badge? Thanks!

[eComony]

Sure, here is the link to product (sale) page): https://evmotion.shop/products/tesla-cybertruck-script-logo-print-tee-fan-t-shirt-und-baseball-cap-i...

[Made4uo-Ribe · Accepted solution]

Now, would you mind to change the code in the base.css for badge. This one. 

Into this code. 

span.badge.price__badge-sale.color-accent-2 {
    background: green;
    border-color: green;
}
span.badge.price__badge-sold-out.color-accent-1, .card__badge.top.right .badge badge--bottom-left color-accent-1 {
    background: grey;
    border: grey;
}

And Save. 

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

[eComony]

Worked now. Many thanks! 🙏

[eComony]

Hey there, I am facing this issue again:

The Sold out Badge Shows Green on the Category Page, but Grey on the Product Page (as it should)

Can you help me with that please? I already replaced that code you have shown and I think I messed it up...

🙏

Correct Badge:

Incorrect Badge:

Shop URL:
www.evmotion.shop

  

[Made4uo-Ribe]

Yeah, it would be trun out gray cause you change it. 

in your base.css im not sure what are you trying to aim. 

[eComony]

Collection Page Sold out Badge is Green (wrong)

Product Page Sold Out is grey (correct)

This was confused with "IN SALE", which is also green (collection and product pages are correct)

In other words:

I ONLY want that SOLD OUT Bagde to be grey, not green. It used to work before somehow...

 

[Made4uo-Ribe]

Oh, okay so you mean the sales badge is green and sold out is grey? Seems like you need to call one by one the sold out product in the collection so you can add some individual color. 

But the result is not that good. 

If you want you like to call them with proper color. other badge will be affected. 

In this case you need some developer to properly change the liquid code for this badge in order for you to change them in different color. 

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

[eComony]

Weird, it somehow used to work before. However, if there is no solution/correction from your side, I would just open a new thread. What do you think? 🙂 

[Made4uo-Ribe]

If it work before why it change suddenly? You didnt notice everytime you change the offer, sale and sold out they also changing? on the product page it may change the color diffrently but in the collection as i inspected, its not. They have same div but different tag on the words. That is why it only change the word background on the sold out.  

You can ask another developer, for another advice and solution. 

[eComony]

It was my mistake and I was confused about Homepage, Collection page and Product Page...

[eComony]

Where did you get the label names from?

Its originally "Sale" and "Sold Out" 👀

I just want to change the badge color of "Out of stock" from Green to Grey on all pages, to avoid confusion.

Sale:
https://evmotion.shop/en/products/2befair-teppichmatten-set-innenraum-fur-das-tesla-model-y

Sold out:
https://evmotion.shop/en/products/2befair-airpod-halter-fur-das-induktive-laden-im-tesla

 

 

 

 
Edit:
I also have created theme-templates for specific categories, if that matters.