Angled ribbons
An angled ribbon is a badge rotated 45° and pinned to a corner of the product image. P2Lab Badges lets you turn any image-overlay slot into a ribbon slot, or override the angled behaviour on individual badges.
Two ways to enable
Section titled “Two ways to enable”Slot-wide
Section titled “Slot-wide”Open the slot configuration (Settings → Plugins → Product Badges → Product Page → Image Overlay → Left/Right slot) and set the direction to Angled (45°). Every badge that targets that slot renders as a corner ribbon.
Per-badge
Section titled “Per-badge”On the badge form, the Tilt 45° setting offers three options:
- Yes — always render as a corner ribbon, regardless of the slot direction.
- No — never render as a corner ribbon, regardless of the slot direction.
- Inherit from slot — follow the slot’s direction setting.
This means you can mix flat and angled badges in the same slot — useful for showing a regular “Sale” sticker next to an angled “Limited” ribbon.
Automatic text-length sorting
Section titled “Automatic text-length sorting”When multiple angled badges share the same corner, the plugin sorts them so that the shortest text sits closest to the corner. This produces a clean, layered look without overlapping text.
You do not configure the sort — it is automatic, based on the rendered text length of each badge.
Max corner offset
Section titled “Max corner offset”Long ribbon text can otherwise extend far beyond the image, looking awkward. The Max corner offset value in the slot configuration limits how far the ribbon may extend from the corner. When the text would overflow, it wraps onto a new line instead of pushing the ribbon further out.
Tune this value to fit your image aspect ratios — taller / squarer images can accommodate a larger offset.
Styling angled ribbons
Section titled “Styling angled ribbons”All standard styling fields apply to angled ribbons — background color, text color, font size, padding, backdrop filter, icons, etc. Two style notes:
- Border radius is usually 0 on ribbons — the diagonal cut already makes them look like a folded ribbon.
- Padding controls how thick the ribbon looks. Increase vertical padding for a chunky ribbon, decrease it for a delicate one.
Best practices
Section titled “Best practices”- Keep ribbon text short — 1 to 3 words (“SALE”, “NEW”, “TOP SELLER”). Longer text loses the ribbon feel.
- Reserve one corner for ribbons (e.g. Right slot = angled) and the opposite corner for flat badges (e.g. Left slot = horizontal). Mixing both styles in one slot rarely looks good.
- Use priority carefully — only the highest-priority ribbons survive when several apply, so plan the queue.