how to change the sold out badge - Dawn 2.0 theme

[petitlaurierco]

Hello.

I want something similar for my sold out badge : 

The item should have a lesser opacity, and the sold out badge should be in the middle.

Anybody can help with the code please? Thank you

[valiermedia]

Hi there!

Can you post your website URL and if the site is password protected, provide a password so that I can inspect your current site build.

[petitlaurierco]

@valiermedia website is : www.petitlaurier.co

collection for example: https://petitlaurier.co/collections/chouchous 

thank you

[valiermedia · Accepted solution]

Thanks!

So unfortunately, in your theme, there isn't a way to modify the sold out badge without also modifying all other grid items. However, you can modify the liquid code in the main-collection-product-grid.liquid file as follows (highlighted code added to add a "product-sold-out" class to sold out product grid items):

This is assuming you are suing the Dawn theme, which it looks like you are. If you aren't using Dawn, the above process may change slightly in terms of the filename but the code should be the same. 

Here is the liquid code to copy/paste:

{% if product.available == false %} product-sold-out{% endif %}

Here is the css you will want to add to the bottom of base.css:

.collection .product-sold-out .card__badge {
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	display: block;
}

.collection .product-sold-out .card__inner > div:first-of-type {
	opacity: 0.5;
}

This should produce the following result on your website:

If it doesn't work as expected, shoot me a direct message and I can go in and inspect the code in your theme for you 🙂

Best,
Merritt

[petitlaurierco]

@valiermedia YES!! it did work! Yay! Thank you so much!

While I have you. Can you please also help to move the « sale » badge in the left corner and change its background to another color that I could pick later? That would be really appreciated! thank you

[AvadaCommerce]

Hi @petitlaurierco ,

Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .product__price {
display: none !important;
}

.template-collection .product__prices.text-center {
display: block;
}

.template-collection .sold-out-text {
position: absolute;
top: 30%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);
color: #f50505;
}

And this code if you want to change color on that 

.template-collection .sold-out-text {
color: #ffffff;
background: #000000;
padding: 12px 5px;
border: 1px solid #ffffff;
width: 50%;
}

I hope this helps.

Or you can try this App ,it would help you to add.

https://apps.shopify.com/product-labels-badges-modemagic

[petitlaurierco]

@AvadaCommerce Hello. Thank you for your answers. I looked into my code and I don't have an asset called Theme.css. I do have an asset called base.css

should i try it there?