← Web Components

Web Components · PDP

<mmm-pdp-price>

The price block on the PDP. Shows current price, optional original (compare-at) with strikethrough, a discount badge, and a per-line bulk-pricing note. Auto-syncs with variant selection — pick a different variant and the price updates.

Overview

Layout controls (price-display, price-align-items, price-gap, price-flex-wrap) let you arrange the three elements (current / original / discount) horizontally or stacked. Three independent typography blocks let you give the original price its own muted look and the discount badge a hero treatment.

When to use

  • On every PDP, next to or below the title.
  • For sale-heavy stores — drive emotion with a loud discount badge.
  • For B2B / wholesale stores — surface a bulk-note next to the price.

Quick start

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

<mmm-pdp-price current-font-size="1.5rem" current-font-weight="700"></mmm-pdp-price>

Attributes

AttributeTypeDefaultDescription
price-displaystringflexCSS display for the row.
price-align-itemsstringcenterCSS align-items.
price-gapstring0.75remGap between price elements.
price-margin-bottomstring0.9375remSpacing below the block.
price-flex-wrapstringwrapCSS flex-wrap.
current-font-familystringtheme sellingPrice font / inheritCurrent-price font family.
current-font-sizestringtheme sellingPrice size / 2remCurrent-price font size.
current-font-weightstringtheme sellingPrice weight / 600Current-price font weight.
current-letter-spacingstringnormalCurrent-price letter-spacing.
current-colorstringtheme primary text / #111Current-price colour.
original-font-familystringtheme originalPrice font / inheritOriginal-price font family.
original-font-sizestringtheme originalPrice size / 1.25remOriginal-price font size.
original-font-weightstringtheme originalPrice weight / normalOriginal-price font weight.
original-letter-spacingstringnormalOriginal-price letter-spacing.
original-colorstringtheme secondary text / #666Original-price colour.
original-text-decorationstringline-throughOriginal-price text-decoration.
discount-backgroundstringtheme button fill / #000Discount badge background.
discount-colorstring#fffDiscount badge text colour.
discount-paddingstring0.25rem 0.625remDiscount badge padding.
discount-font-sizestring0.875remDiscount badge font size.
discount-font-weightstring600Discount badge font weight.
discount-border-radiusstring0.125remDiscount badge border-radius.
bulk-note-widthstring100%Width of the bulk-pricing note.
bulk-note-font-sizestring0.75remBulk-note font size.
bulk-note-colorstring#666Bulk-note colour.
bulk-note-font-stylestringitalicBulk-note font style.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

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

Examples

1. Default

<mmm-pdp-price></mmm-pdp-price>

2. Loud sale-style with pill badge

<mmm-pdp-price
  current-color="#ff3366"
  current-font-size="1.75rem"
  discount-background="#ff3366"
  discount-color="#ffffff"
  discount-border-radius="999px"
  original-color="#9ca3af">
</mmm-pdp-price>

3. Stacked layout for narrow PDPs

<mmm-pdp-price
  price-display="flex"
  price-flex-wrap="wrap"
  price-align-items="flex-start"
  price-gap="0.25rem">
</mmm-pdp-price>