FROM CACHE - en_header

how to change the sold out badge - Dawn 2.0 theme

Solved
petitlaurierco
Explorer
57 1 11

Hello.

 

I want something similar for my sold out badge : 

 

 

petitlaurierco_0-1663277461602.png

 

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

Accepted Solution (1)

Accepted Solutions
valiermedia
Shopify Partner
94 22 54

This is an 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):

valiermedia_0-1663349621592.png

 

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:

valiermedia_1-1663349945731.png

 

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

 

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂

View solution in original post

Replies 6 (6)
valiermedia
Shopify Partner
94 22 54

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.

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂
AvadaCommerce
Shopify Partner
3879 837 799

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

 

 

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

petitlaurierco
Explorer
57 1 11

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

petitlaurierco
Explorer
57 1 11
valiermedia
Shopify Partner
94 22 54

This is an 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):

valiermedia_0-1663349621592.png

 

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:

valiermedia_1-1663349945731.png

 

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

 

Web Development | UX | Graphics
valiermedia.com

There is enough abundance to go around, so long as we look out for one another 🙂
petitlaurierco
Explorer
57 1 11

@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