How to create a 'Sold Out' badge overlay on a product photo?

[Hojo]

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

[Hojo]

This is a link to one of my collection pages on my store.

https://hojobuu.com/collections/volume-series

[KetanKumar]

@Hojo

do you need look like this?

[Hojo]

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.

[Kinjaldavra]

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;
}

[Hojo]

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

[KetanKumar]

@Hojo

thanks for update yes i can see

[Kinjaldavra]

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%;
}

[Hojo]

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