How do I change my sold badge to a red dot on my Grid theme

[beckyannenolan]

I want a red dot instead of the stock badge that is supplied for Grid theme. Can anyone help me achieve something like the attached?

[DaveNorman1]

Hey @beckyannenolan
You can absolutely replace the stock “Sold” badge with a simple red dot using custom CSS.
If you go to Online Store → Themes → Edit Code → Assets → base.css, you can add something like this:

.badge--sold-out {
  background: red;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  color: transparent;
}

This will hide the “Sold” text and display a clean red dot instead.

If you’d like, I can take a quick look at your theme and adjust it properly to match your layout shouldn’t take long

[websensepro]

Hello, @beckyannenolan

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-card__badge {
  background-color: #ff0000 !important;
  color: transparent !important;  
  width: 15px !important;  
  height: 15px !important;           
  border-radius: 50% !important;        
  line-height: 15px !important;          
  text-align: center !important;       
  font-size: 0 !important;              
}

.product-card__badge: This is the CSS selector that targets the sale badge on your product cards. If your badge has a different class name, simply replace this class name with yours.

Thank You!

[Dan-From-Ryviu]

Please add this code to Custom CSS in theme settings

  .product-list-item .product-list-item-on-sale {
    width: 20px !important;
    height: 20px !important; 
  }
 .product-list-item .product-list-item-on-sale:after {
    color: transparent !important;
  }