Sold Out Badge Larger & Changing Color

Solved
gabby1989
Tourist
7 0 1

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!

0 Likes
dmwwebartisan
Shopify Partner
4445 999 1273

@gabby1989 

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

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Natztech
Excursionist
98 14 14

 

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

 

screencapture-pf8w8apc1fnzrg8f-52847182000-shopifypreview-collections-february-3rd-ready-to-ship-sale-2021-01-23-10_59_12.png

 

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;
  
    
}
Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
0 Likes
squadkin
Excursionist
11 4 3

This is an 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:

Screenshot_1.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 support@squadkin.com regarding any help
Shopify Partner | Whatsapp : +91 6356 882 809

gabby1989
Tourist
7 0 1

@squadkin 

 

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