← Web Components

Web Components · PDP

<mmm-pdp-offer-badge>

A small inline offer badge — "BESTSELLER", "NEW", "10% OFF" — placed inline next to the title or over the gallery. Supports two visual modes: outlined and solid.

Overview

Set badge-text to any string and badge-type to one of two styles — outlined (border + transparent fill) or solid (filled background). Each mode has its own border, background, and colour for design flexibility.

When to use

  • Next to the PDP title for editorial labels (BESTSELLER, JUST IN).
  • Over the gallery for promotional badges (LIMITED, EXCLUSIVE).

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-offer-badge badge-text="BESTSELLER" badge-type="solid"></mmm-pdp-offer-badge>

Attributes

AttributeTypeDefaultDescription
badge-textstringBuy 1 get 1 freeBadge label text.
badge-typestringoutlineVisual mode — outline or solid.
badge-borderstring1px solid #000Outline-mode border.
badge-paddingstring0.375rem 0.75remPadding.
badge-font-sizestring0.75remFont size.
badge-font-weightstring600Font weight.
badge-displaystringinline-blockCSS display.
badge-backgroundstringtransparentOutline-mode background.
badge-colorstringtheme primary text / #111Outline-mode text colour.
solid-backgroundstringtheme button fill / #000Solid-mode background.
solid-colorstring#fffSolid-mode text colour.
solid-borderstringnoneSolid-mode border (typically none).
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

store sample-store tag <mmm-pdp-offer-badge>

Examples

1. Outlined "NEW" badge

<mmm-pdp-offer-badge badge-text="NEW" badge-type="outlined"></mmm-pdp-offer-badge>

2. Solid pill bestseller badge

<mmm-pdp-offer-badge
  badge-text="BESTSELLER"
  badge-type="solid"
  solid-background="#0e1011"
  solid-color="#c8a8ff"
  custom-css="border-radius:999px;letter-spacing:0.1em;">
</mmm-pdp-offer-badge>

3. Sale percentage outline badge

<mmm-pdp-offer-badge
  badge-text="-25%"
  badge-type="outlined"
  badge-border="1px solid #ff3366"
  badge-color="#ff3366"
  badge-font-size="0.75rem">
</mmm-pdp-offer-badge>