How Edit Sold Out Label/Badge on Product Grid

[fairbear95]

Hi,

I've been trying to fix how "Sold Out" appears on our product listing grids. I'd ideally like it to appear like our "SALE" badge does - as wrapped text on the top left corner of the product image, but only on the grid pages and not on the product page. We're happy with how the product pages look, its just the collection grids!

Any ideas on what I need to do? 

I am using the Luxe Theme. Website is https://www.clkequestrian.com.au/

[Moeed]

Hey @fairbear95 

Yes that is for sure possible but since the way your product card is coded, doing that with CSS only won't be possible and you'll have to drag the code of the sold out badge in your product media and then add some custom coding and CSS to display it properly. This will require good coding knowledge so if you're not familiar with coding then I would highly recommend you to hire a Shopify developer can help out with that.

Feel free to connect with me and I would be more than happy to give you a helping hand.

Best,

Moeed

[fairbear95]

Thanks @Moeed ! You may be right there 😅 

I will take another look overnight and if I can't fix it I will definitely reach out.

[topnewyork · Accepted solution]

Hi @fairbear95,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.card-product--text-section {
    position: static !important;
}

.card-product-badge.badge-sold-out {
    position: absolute !important;
    top: 3px;
    left: 12px;
    text-align: left;
    width: 24%;
    z-index: 2;
    display: inline-block;
    margin-bottom: 18px;
    text-align: center;
    background-color: var(--badge-bg-color);
    color: var(--badge-txt-color);
    border-radius: var(--badge-corner-radius);
    border: var(--badge-border-width) solid rgba(var(--badge-border));
    box-sizing: border-box;
    padding: 8px 7px;
    font-size: 1.2rem !important;
    font-weight: 400;
    text-transform: var(--badge-text-case);
    line-height: 1;
    margin-right: 3px;
}

Thanks!

[fairbear95]

Thank you so much for providing a solution @topnewyork ! Really appreciate it.

I've added it and noticed only a couple things:

1) There's a variance between desktop and mobile positioning

2) The "Sold Out" font and look remains the same - not mimicking the "SALES" badge look and positioning - but that's ok. I sense this may require further aid. 

[topnewyork]

Hi @fairbear95,

Please add this code in theme.css/base.css

.card-product-badge.badge-sold-out {
    position: absolute !important;
    top: 3px;
    left: 12px;
    display: inline-block;
    margin-bottom: 18px;
    text-align: center;
    background-color: var(--badge-bg-color);
    color: #454545;
    border-radius: var(--badge-corner-radius);
    border: var(--badge-border-width) solid rgba(var(--badge-border));
    box-sizing: border-box;
    padding: 8px 7px !important;
    font-size: 1rem !important;
    font-weight: 400;
    text-transform: var(--badge-text-case);
    line-height: 1;
    margin-right: 3px;
}

.card-product--text-section {
    position: static !important;
}

Thanks!

[fairbear95]

Oh my gosh. You're a legend! It worked perfectly thank you so much! 😃