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
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
@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 |
---|---|
62 | |
52 | |
47 | |
39 | |
38 |
Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023Summary of EventsBeginning in January of 2023, some merchants reported seeing a large amo...
By Trevor May 15, 2023With 2-Factor Authentication being required to use Shopify Payments, we’re here to help yo...
By Imogen Apr 26, 2023