How to edit sold out and on sale badge?

Store Design
, , ,

Topic summary

A Shopify store owner using the Trade theme seeks to customize product badges: making the “Sold Out” badge more angular with black background and white text, and removing the “Sale” badge entirely.

Initial Solution Provided:

  • CSS code to modify badge styling via the theme’s main CSS file
  • Adjusts border-radius, background color, and text color for sold-out badges
  • Hides sale badges using display: none

Additional Customizations Requested:

  • Moving sold-out badge to top-left position
  • Applying same styling to product page badges
  • Creating percentage discount badges (e.g., “25%”)
  • Removing badge backgrounds while keeping text
  • Positioning multiple badges simultaneously (sold-out top-left, custom badges center-bottom)

Final Implementation:

  • CSS solutions using absolute positioning and transform properties
  • Customizable styling parameters: background transparency, text color, font size, font weight
  • Code targets specific badge classes (.color-accent-2, .color-inverse) for different badge types

Status: Resolved through multiple CSS code snippets. Custom percentage badges require additional custom coding beyond basic CSS modifications. Solutions tested and confirmed working across desktop and mobile views.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
2

Hi @KimGottwald

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
/* sold-out badge */
.badge--bottom-left.color-scheme-3 {
    border-radius: 10px !important;
    background: black;
    color: white;
}
/* sale badge */
.badge--bottom-left.color-scheme-5 {
    display: none;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like