How to reduce the size of the sold out badge?

Store Design
, , , ,

Topic summary

A user wants to reduce the size of the “sold out” badge on their collection page, which uses the Trade theme.

Solution provided:

  • Navigate to: Online Store > Themes > Select theme
  • Open the CSS file (main.css, base.css, style.css, or theme.css) in the Asset folder
  • Add the following code at the bottom:
.badge {
  padding: 5px 5px;
}
  • Save the file

The solution includes a visual result showing the reduced badge size. The issue appears resolved with this CSS modification.

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

I would like to reduce the size of the sold out badge like done in the picture is this possible?. Is this possible?

Thank you!

URL: https://suq5b8csct01fyzg-61270851797.shopifypreview.com/collections/rappid-test

Im using the Trade theme.

Bildschirmfoto 2024-07-12 um 11.47.50 PM.png
Bildschirmfoto 2024-07-12 um 11.47.50 PM.png292Ă—631 66.8 KB

1 Like
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.
.badge {
padding: 5px 5px;
}

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