Change position and size of sale badge on product cards

Store Design
,
1

hello, i would like to change the position and size of my sale badge for my product cards:

Screenshot 2025-08-13 at 08.53.50
Screenshot 2025-08-13 at 08.53.50473×221 28.4 KB

this is my store. I would like it to look something like this:

Screenshot 2025-08-13 at 08.53.56
Screenshot 2025-08-13 at 08.53.56337×182 1.52 KB

where the box is in the top left. Also, I would like my box to be slightly wider (only ever so slightly)

My store is www.antico-abito.com , theme is dawn

2

Hi @ads18922

You can try this line of code:

.card__inner .card__badge{left: 1rem;top: 0.1rem;}

And here is my example:

image
image1920×1000 162 KB

Hope this helps!

3

hello, where do i put this code? thanks

4

Hi @ads18922 ,

Go to Online Store → Themes → Dawn → Edit Code → Assets → base.css
Add this code at the bottom

.card--product .badge--sale {
  position: absolute;
  top: 8px;          /* distance from top */
  left: 8px;         /* distance from left */
  width: auto;       /* allow custom width */
  min-width: 60px;   /* slightly wider badge */
  padding: 0.2rem 0.5rem; /* adjust padding */
  font-size: 0.85rem;     /* optional: adjust text size */
  border-radius: 4px;     /* smooth corners */
  z-index: 10;       /* make sure it stays on top */
}

/* Make sure product card container allows absolute positioning */
.card--product {
  position: relative;
}

save and refresh preview

Thanks
Manoj

5

Hi,

Hope this will help

Find main CSS file and Paste CSS code at the very bottom

CSS example

/* === Move SALE badge to top-left and make it slightly wider (product cards only) === */

/* Make sure the card can hold an absolute badge */
.card, .card-wrapper, .card--product { position: relative; }

/* Position: top-left */
.card--product .card__badge,
.card .card__badge,
.product-card__badge,
.grid-view-item__badge {
  position: absolute;
  top: 8px !important;     /* distance from the top edge */
  left: 8px !important;    /* distance from the left edge */
  right: auto !important;  /* cancel right positioning if theme had it */
  bottom: auto !important; /* cancel bottom positioning if theme had it */
  z-index: 2;
}

/* Size/shape: just a tiny bit wider with comfy padding */
.card__badge .badge,
.product-card__badge .badge,
.grid-view-item__badge .badge,
.price__badge--sale,
.price__badge-sale {
  display: inline-block;
  padding: 6px 10px;       /* <-- widen by increasing left/right padding */
  min-width: 52px;         /* <-- gentle width floor (change to taste) */
  line-height: 1.1;
  font-size: 12px;         /* keep it tidy; adjust if you want */
  border-radius: 6px;      /* optional: small rounded corners */
}

/* (Optional) If your theme shows multiple badges, keep them tidy */
.card__badge .badge + .badge {
  margin-left: 6px;
}

Tweak it exactly how you like