How to customize the sold out badge to a red dot in Spotlight theme?

Solved

How to customize the sold out badge to a red dot in Spotlight theme?

sggallery
New Member
8 0 0

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!

Screenshot 2024-03-03 at 10.15.09 PM.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10894 2145 2282

This is an accepted solution.

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>

 

Screenshot 2024-03-04 at 10.38.55.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10894 2145 2282

This is an accepted solution.

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>

 

Screenshot 2024-03-04 at 10.38.55.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

sggallery
New Member
8 0 0

Thanks so much - worked perfectly!