Solved

How to change Featured Collection Sold Out Badge Color

eComony
Shopify Partner
18 1 5

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

Screenshot 2024-03-30 at 14.09.30.pngScreenshot 2024-03-30 at 14.10.37.png

shop URL: evmotion.shop  

Birkan Arikan | Founder & Creative Director
www.ecomony.de
Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6365 1527 1896

This is an accepted solution.

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

Made4uoRibe_0-1712078179267.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 17 (17)

suyash1
Shopify Partner
9356 1167 1505

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
eComony
Shopify Partner
18 1 5

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

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

Birkan Arikan | Founder & Creative Director
www.ecomony.de
eComony
Shopify Partner
18 1 5

Unfortunately this did not work for me...

Birkan Arikan | Founder & Creative Director
www.ecomony.de

Made4uo-Ribe
Shopify Partner
6365 1527 1896

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:

Made4uoRibe_0-1712075910349.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

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! 🙏

Birkan Arikan | Founder & Creative Director
www.ecomony.de
Made4uo-Ribe
Shopify Partner
6365 1527 1896

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

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...

Birkan Arikan | Founder & Creative Director
www.ecomony.de
Made4uo-Ribe
Shopify Partner
6365 1527 1896

This is an accepted solution.

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

Made4uoRibe_0-1712078179267.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

Worked now. Many thanks! 🙏

Birkan Arikan | Founder & Creative Director
www.ecomony.de
eComony
Shopify Partner
18 1 5

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:
IMG_0768.PNG

Incorrect Badge:

IMG_0767.PNG

 

Shop URL:
www.evmotion.shop

  

Birkan Arikan | Founder & Creative Director
www.ecomony.de
Made4uo-Ribe
Shopify Partner
6365 1527 1896

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

Made4uoRibe_0-1713722759971.png

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

Collection Page Sold out Badge is Green (wrong)
Screenshot 2024-04-21 at 21.18.23.png
Product Page Sold Out is grey (correct)

Screenshot 2024-04-21 at 21.18.32.png

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...



Birkan Arikan | Founder & Creative Director
www.ecomony.de
Made4uo-Ribe
Shopify Partner
6365 1527 1896

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. 

Made4uoRibe_0-1713731640596.png

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

Made4uoRibe_1-1713731705296.png

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

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? 🙂 

Birkan Arikan | Founder & Creative Director
www.ecomony.de
Made4uo-Ribe
Shopify Partner
6365 1527 1896

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.  

Made4uoRibe_0-1713733028264.png

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
eComony
Shopify Partner
18 1 5

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

Birkan Arikan | Founder & Creative Director
www.ecomony.de
eComony
Shopify Partner
18 1 5

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

Screenshot 2024-04-21 at 22.58.48.pngScreenshot 2024-04-21 at 22.58.55.png


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

Screenshot 2024-04-21 at 22.59.46.pngScreenshot 2024-04-21 at 22.59.57.png


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

Birkan Arikan | Founder & Creative Director
www.ecomony.de