Solved

How to change Featured Collection Sold Out Badge Color

eComony
Shopify Partner
13 2 4

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 Solutions (2)
eComony
Shopify Partner
13 2 4

This is an accepted solution.

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

View solution in original post

Made4uo-Ribe
Shopify Partner
5486 1321 1625

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9135 1137 1485

@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
Join me for beginner level training session
eComony
Shopify Partner
13 2 4

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
13 2 4

Unfortunately this did not work for me...

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

Made4uo-Ribe
Shopify Partner
5486 1321 1625

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


eComony
Shopify Partner
13 2 4

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
5486 1321 1625

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


eComony
Shopify Partner
13 2 4

This is an accepted solution.

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
5486 1321 1625

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


eComony
Shopify Partner
13 2 4

Worked now. Many thanks! 🙏

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