Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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):
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
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.
@valiermedia website is : www.petitlaurier.co
collection for example: https://petitlaurier.co/collections/chouchous
thank you
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):
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
@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
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
@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?
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025