How can I adjust the spacing of my sale badge?

Topic summary

A user seeks help adjusting the spacing of a sale badge that appears too close to product image edges. They’ve provided a screenshot showing the current placement and are looking for CSS code or guidance to add padding/margin.

Proposed Solution:

  • BSS-Commerce recommends their Product Labels & Badges app as an alternative approach
  • The app offers a free forever plan with features including:
    • Custom label/badge positioning controls
    • Conditional display rules (by product, collection, tags, customer type, time)
    • Customizable design options

Status: The original CSS question remains unanswered, with only the third-party app solution provided. No direct code fix has been shared yet.

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

Hello, can you help me with this? The sale badge is too close to the edges of the image. I want to give it a little bit of space. I have shown this in the following picture:

I would appreciate any advice or CSS code to make the change.

Hi @kolimechi

There is a simpler way to do all of this, using our BSS Product Labels & Badges app.

You can try our FREE FOREVER plan with useful features tailored to your need:

  • Add your own labels/badges/popups/banner

  • Customize the position of the label/badge easily

  • Set conditions for the label to display with certain products, collections, and tags, set display time, and display for each type of customer…

  • Many attractive features…

With your requirements, simply select the label you want to display, then select the position where you want it to be displayed.

And you will get the results you want

Try our app and let us know what you think.