Re: Custom Sold Badge to Red Dot
Solved
Hello,
I'm using the Spotlight theme and would like to customize the sold out badge to just be a small red dot like the image below.
Thanks!
Accepted Solution (1)
Hi @sggallery
I'm Dan from Ryviu: Product Reviews & QA.
Please add this code below to your theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.card:has(.price--sold-out) .card__inner .card__badge {
width: 16px;
height: 16px;
border-radius: 50%;
overflow: hidden;
}
.card:has(.price--sold-out) .card__inner .card__badge .badge {
font-size: 0;
color: transparent;
background: #f96b60;
width: 16px;
height: 16px;
display: block;
box-shadow: unset;
border: unset;
}
</style>
Hi @sggallery
I'm Dan from Ryviu: Product Reviews & QA.
Please add this code below to your theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
.card:has(.price--sold-out) .card__inner .card__badge {
width: 16px;
height: 16px;
border-radius: 50%;
overflow: hidden;
}
.card:has(.price--sold-out) .card__inner .card__badge .badge {
font-size: 0;
color: transparent;
background: #f96b60;
width: 16px;
height: 16px;
display: block;
box-shadow: unset;
border: unset;
}
</style>
