How to customize the sold out badge to a red dot in Spotlight theme?
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!
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>
Community Blog Articles
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025