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?
User | RANK |
---|---|
187 | |
151 | |
81 | |
77 | |
65 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023