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.
13

Hello again @Made4uo-Ribe sorry for bothering you.

I learnt how to create quick badges and i would like to know if you can help me fix the positioning.

The badges i am creating are made for the bottom left, but i already have a “sold out” badge on the bottom left. I would like to know if it’s possible to put the sold out badge on the top left and to put these new badges i am creating on the middle and also have the possibility to change the style (e.g. colour, size, remove background) like the one you helped me a few hours ago.

How it is:

Screenshot 2024-11-23 at 12.14.55 AM.png
Screenshot 2024-11-23 at 12.14.55 AM.png1538×1120 82.1 KB

You can see here: https://diversusoficial.com/collections/mens-ready-to-wear

Please and thank you for your help.