Sold Out Badge Simple Theme

Solved
Hojo
Tourist
10 1 3

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

 

 

Accepted Solutions (2)

Accepted Solutions
Natztech
Shopify Partner
2237 565 1373

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

 

View solution in original post

Natztech
Shopify Partner
2237 565 1373

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

 

View solution in original post

Replies 8 (8)
Hojo
Tourist
10 1 3

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

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

KetanKumar
Shopify Partner
24923 2498 9040

@Hojo 

do you need look like this?

KetanKumar_0-1634285910467.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Hojo
Tourist
10 1 3

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.

Natztech
Shopify Partner
2237 565 1373

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

 

View solution in original post

Hojo
Tourist
10 1 3

Thank you @Natztech 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

Screen Shot 2021-10-16 at 3.14.05 AM.png

Screen Shot 2021-10-16 at 3.16.35 AM.png

KetanKumar
Shopify Partner
24923 2498 9040

@Hojo 

thanks for update yes i can see 

KetanKumar_0-1634369325336.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
2237 565 1373

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

 

View solution in original post

Hojo
Tourist
10 1 3

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

Screen Shot 2021-10-16 at 4.10.19 AM.png

Screen Shot 2021-10-16 at 4.15.05 AM.png