Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-discount-badge>

A standalone discount badge — positioned over the product media (or anywhere inside the card). Reads the saved-percent / saved-amount from the per-product store; renders nothing when there is no discount.

Overview

Use this in addition to the inline badge inside <mmm-product-price> when you want an extra emphasis badge anchored on top of the image. Position via position + top / right / left / bottom.

When to use

  • Inside <mmm-product-card> for sale grids that need a hero badge.
  • For category-page filters that want to surface deals.
  • Skip it when the inline discount inside <mmm-product-price> is enough.

Quick start

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

<mmm-product-card data-product='{"slug":"classic-tee","price":29,"original_price":39}'>
  <mmm-product-media></mmm-product-media>
  <mmm-product-discount-badge position="absolute" top="0.75rem" right="0.75rem"></mmm-product-discount-badge>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
backgroundstringtheme add-to-cart fill / #000Badge background colour.
colorstringtheme add-to-cart text / #fffBadge text colour.
font-sizestring0.75remBadge font size.
font-weightstring600Badge font weight.
paddingstring0.25rem 0.5remBadge padding.
border-radiusstring0.25remBadge border-radius.
positionstringabsoluteCSS position — typically absolute (relative to the card).
topstring—CSS top offset.
rightstring—CSS right offset.
leftstring—CSS left offset.
bottomstring—CSS bottom offset.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Live preview

store sample-store tag <mmm-product-discount-badge>

Examples

1. Top-right corner overlay

<mmm-product-discount-badge top="0.75rem" right="0.75rem"></mmm-product-discount-badge>

2. Loud red badge, pill-shape

<mmm-product-discount-badge
  background="#ff3366"
  color="#ffffff"
  font-size="0.6875rem"
  font-weight="700"
  padding="0.25rem 0.625rem"
  border-radius="999px"
  top="1rem"
  left="1rem">
</mmm-product-discount-badge>

3. Bottom-left, inline (non-absolute)

<mmm-product-discount-badge
  position="static"
  background="#0e1011"
  color="#c8a8ff">
</mmm-product-discount-badge>