Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-price>

Card-level price block. Shows the current price plus an optional original (compare-at) price and a discount label. Reads currency-formatted prices straight from the per-product store.

Overview

Renders up to three price elements: current price, original price (struck-through by default), and a discount badge (e.g. -25%). Toggle the optional elements with show-original and show-discount.

Typography is split per role — current vs original — so you can give the original price its own (lighter, smaller) style independently.

When to use

  • Inside <mmm-product-card> for the standard price line.
  • For sale-driven grids that need a visible savings badge.
  • For minimalist designs — hide the badge and original price with the two show-* toggles.

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-price show-original="true" show-discount="true"></mmm-product-price>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
show-originalbooleantrueShow the compare-at price when it exists.
show-discountbooleantrueShow the savings / percent-off badge when applicable.
current-font-familystringinheritFont family of the current price.
current-font-sizestring1remFont size of the current price.
current-font-weightstring600Font weight of the current price.
current-letter-spacingstringnormalLetter-spacing of the current price.
current-colorstringtheme primary textColour of the current price.
original-font-familystringinheritFont family of the original price.
original-font-sizestring0.875remFont size of the original price.
original-font-weightstring400Font weight of the original price.
original-letter-spacingstringnormalLetter-spacing of the original price.
original-text-decorationstringline-throughCSS text-decoration for the original price — line-through, underline, none.
original-colorstringtheme secondary textColour of the original price.
discount-backgroundstringtheme add-to-cart fillBackground colour of the discount badge.
discount-colorstringtheme add-to-cart textText colour of the discount badge.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Live preview

store sample-store tag <mmm-product-price>

Examples

1. Default with compare-at + badge

<mmm-product-price></mmm-product-price>

2. Hide the discount badge but keep compare-at

<mmm-product-price
  show-discount="false"
  current-font-size="1.125rem"
  current-color="#0e1011"></mmm-product-price>

3. Sale colour theme

<mmm-product-price
  current-color="#ff3366"
  discount-background="#ff3366"
  discount-color="#fff"
  original-color="#9ca3af"
  original-text-decoration="line-through">
</mmm-product-price>