Sold Out Badge Larger & Changing Color

[gabby1989]

Hi!

I'm building my website using the Brooklyn template. I would like the make the Sold Out badge circle larger. I also don't want the circle to be transparent, I would like to fill the background with a color. Also, can the Sold Out badge go in the center of the photo rather on the top left? I tried some codes I found in the forums but they didn't work for me.

Thanks for your help!

[dmwwebartisan]

@gabby1989 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

[gabby1989]

@dmwwebartisan 

Here is the preview link

https://pf8w8apc1fnzrg8f-52847182000.shopifypreview.com

[Natztech]

it's my pleasure to help us.  do you want to shown like this 

Please place this code at the end of theme.scss

.grid-product__sold-out {
    border: 1px solid #3a5f82;
    position: absolute;
    left: 40%;
    border-radius: 37px;
    background-color: #ffffff;
}


.grid-uniform .grid-product__image-link {
    position: relative;
}


.grid-product__sold-out p, .grid-product__on-sale p {
    padding: 18px 21px 16px 21px;
    font-size: 15px;
  
    
}

[squadkin · Accepted solution]

Hello @gabby1989 

checked your issue and preview link.

You can change the sold out badge is placed with CSS absolute property. Here is the solution code.

.grid-product__sold-out {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* it will place the badge to center the sold out badge in product cart */
    background-color: #FFF; /* to change the background color */
   color: #000; /* to change the text color */
   border-color: #3a5f82; /* to change the border color */
   font-size: 16px; /* to change the font size*/
   width: 140px; /* add width if you want to increse the width of badge or remove this for default */
}
/* there is <br /> tag between sold oud tag so you can get ride of line break with this CSS*/
.grid-product__sold-out br {
    display: none;
}

output:

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on support@squadkin.com regarding any help
Shopify Partner | Whatsapp : +91 6356 882 809

[gabby1989]

@squadkin 

That is exactly what I'm looking for! It worked perfectly, thanks so much!!