Image overlay slots
The image overlay placement uses two independent slots — Left and Right — on every product image. Each slot has its own offsets, direction, spacing and styling defaults. A badge picks one slot per page context.
This page covers the fields available on each slot in the global configuration (Settings → Plugins → Product Badges → Product Page → Image Overlay, and the mirror in Product Listing).
Why two slots?
Section titled “Why two slots?”Splitting the overlay into Left and Right lets you run two visually distinct families of badges on the same product image — e.g. corner ribbons on the right, horizontal sticker badges on the left — without one family interfering with the other.
A badge that picks the Left slot will only ever be considered for left-side rendering, and vice versa. The Max-badges limit is enforced per slot, so each side has its own queue.
Slot fields
Section titled “Slot fields”Each slot exposes the same set of configuration fields. They apply only inside that slot.
Positioning
Section titled “Positioning”- Top offset — distance from the top edge of the product image.
- Left offset — distance from the left edge (used by the Left slot).
- Right offset — distance from the right edge (used by the Right slot).
- Z-index — render order against other overlay layers.
- Clip path — optional CSS
clip-pathvalue, useful when the image has rounded corners.
Direction
Section titled “Direction”How badges stack inside the slot:
- Horizontal (row) — badges sit next to each other, left-to-right.
- Vertical (column) — badges stack top-to-bottom.
- Angled (45°) — badges render as corner ribbons. See Angled ribbons.
Spacing
Section titled “Spacing”- Gap — distance between badges inside the slot.
- Padding — inner padding of the slot container.
- Margin — outer margin between the slot and the image edge.
Styling defaults
Section titled “Styling defaults”Every styling field that exists on a badge can be set as a slot default:
- Text and background colors
- Font size, line height, padding
- Border radius, backdrop filter
- Default icon size
Slot defaults sit between placement defaults and global defaults in the inheritance order. A badge that does not override the field uses the slot default first.
Detail vs. listing slots are separate
Section titled “Detail vs. listing slots are separate”The Left/Right slot configuration on the Product Page tab applies to detail pages only. The Product Listing tab has its own mirror with independent values. This means you can have, for example, a tighter listing slot and a more generous detail-page slot.
Picking the slot on a badge
Section titled “Picking the slot on a badge”On the badge form, when you set Detail page placement = Image overlay (or Listing placement = Image overlay), an Image overlay slot dropdown appears with Left / Right. Pick one — the slot decides which side of the image the badge renders on and which defaults it inherits from.
Max badges per slot
Section titled “Max badges per slot”The Max badges value in the global configuration caps the total number of badges rendered on a page. Slots respect that cap together — if a product has 10 matching badges but Max badges = 3, the top 3 by priority render across both slots combined.