Put SALE/SOLD OUT badge on the product card in the corner (BULLET THEME)

[taliad998]

can someone help me put my sale/sold out notification on the top of my product image card:

The theme is BULLET version 5.5.1.

This is the site: https://heartzstudios.com/

I’d also love to be able to edit the padding, size and background color of the badge.

Any help would be greatly appreciated!!

Kevin.

[Moeed]

Hey @taliad998

Have you checked your theme customization settings? Because usually there’s an option to show the badge on the image as well.

I tried to get it done professionally by adjusting your website’s CSS but the way your theme product grid is coded, it won’t be possible to do it professionally without having the collaborator access of your store.

Once I have collaborator access then it will allow me to render the badge on the product image so feel free to share your collaborator request code in my private messages and I’ll sort that out for you.

Cheers,
Moeed

[devcoders]

Hi @taliad998

Please check in the theme customizer—there should be an options section there. If it’s not available, send me the Collaborate code and I’ll check it and give you a proper update.

[tim_tairli]

You can try code like this in Theme settings=> Custom CSS:

.product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  
  background: var(--bgColorOpacity, rgba(255, 255, 255, 0.75));
  mix-blend-mode: exclusion;
}

---

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it

[Dan-From-Ryviu]

You can add this code to Custom CSS in theme settings to do that.

.card-meta .card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 16px;
  background: #121212;
  color: #fff;
}

The result:

Best regards,
Dan from Ryviu: Product Reviews App

[topnewyork]

Hi @taliad998

. 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-badge.soldout {
    position: absolute;
    top: 20px;
    left: 20px;
}

span.product-badge.sale {
    position: absolute;
    top: 20px;
    left: 20px;
}