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!
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
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;
}
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
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.
That is exactly what I’m looking for! It worked perfectly, thanks so much!!
@squadkin hello! I tried what you mentionned for the dawn 2.0 and it didn’t work. Can you help out please?