Shopify themes, liquid, logos, and UX
Hello,
I have been searching for a way to make a "Sold Out" badge overlay appear on my product photo when a listing's inventory is set to 0. Currently, buyers scrolling through the collection page do not know if a product is out of stock until they click into the listing. The closest result that I have found is this link https://community.shopify.com/c/technical-q-a/simple-theme-quot-sold-out-quot-badge/td-p/1243176
I have followed all the steps on the link I have provided above although the only outcome was the opacity. There is no "Sold Out" text over the photo, only a change in opacity. I have been looking for an answer to this for a while and would appreciate any help!
Thank you
Solved! Go to the solution
This is an accepted solution.
hello @Hojo
please 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;
}
This is an accepted solution.
hello @Hojo
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-collection .sold-out-text {
color: #ffffff;
background: #000000;
padding: 12px 5px;
border: 1px solid #ffffff;
width: 50%;
}
This is a link to one of my collection pages on my store.
do you need look like this?
Thank you for your reply,
Yes, this is what i am looking for exactly. I would like a sold out badge displaying over the product photo in the centre. If there is a way to customize the "Sold Out" badge, I would appreciate the help as well.
This is an accepted solution.
hello @Hojo
please 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;
}
Thank you @Kinjaldavra for the help. This code did seem to work although I found some small issues. Some of the "Sold Out" text are not properly centred in the middle of the photos and there is a " - " line under the listing. I took a screenshot of the issue and attached it to this message. Also, if there is a way to change the "Sold out" text to a custom image such as the photo I have attached to this message, I would greatly appreciate it.
Thank you
This is an accepted solution.
hello @Hojo
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-collection .sold-out-text {
color: #ffffff;
background: #000000;
padding: 12px 5px;
border: 1px solid #ffffff;
width: 50%;
}
Thank you for your reply. I really appreciate the addition of adding a text box around the "Sold out" text. However, when I paste the following code into the correct file, I am still getting the same issues with the centring and the "-" at the bottom of the listing. I have attached a photo of the outcome as well as my theme.css.
Thank you
thanks for update yes i can see
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024