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
7892 1532 1561

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7892 1532 1561

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

- Helpful? Like and Accept solution or ❤Donate❤
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

sggallery
New Member
8 0 0

Thanks so much - worked perfectly!