← Web Components

Web Components · PDP

<mmm-pdp-offer>

Bullet-list panel of active offers — "10% off first order", "Free shipping over X", "Buy 2 get 1 free". Each offer comes from productInfo.offers with optional icon + text; styling is fully independent of theme.

Overview

A boxed panel — bordered, padded, with a heading and a list of icon + text rows. Offers data is editor-driven per product (or per category) and rendered here in whatever order the merchant set.

When to use

  • Inside the PDP buying area to surface active promotions.
  • For loyalty / membership stores — list the perks alongside 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-offer offers-title-font-size="0.875rem"></mmm-pdp-offer>

Attributes

AttributeTypeDefaultDescription
section-backgroundstring#f9f9f9Panel background.
section-paddingstring1.25remPanel padding.
section-border-radiusstring0.5remPanel border-radius.
section-margin-bottomstring1.5625remSpacing below the panel.
offers-title-font-sizestring0.875rem"Offers" heading font size.
offers-title-font-weightstring700Heading font weight.
offers-title-text-transformstringuppercaseHeading text-transform.
offers-title-margin-bottomstring0.9375remSpacing below the heading.
item-displaystringflexDisplay for each offer row.
item-gapstring0.625remGap between icon and text inside a row.
item-margin-bottomstring0.625remSpacing between rows.
item-font-sizestring0.875remRow font size.
item-line-heightstring1.5Row line-height.
icon-widthstring0.5remIcon (bullet dot) width.
icon-heightstring0.5remIcon (bullet dot) height.
icon-border-radiusstring50%Icon border-radius.
icon-backgroundstringtheme button fill / #000Background behind the icon dot.
icon-margin-topstring0.375remVertical alignment nudge.
icon-flex-shrinkstring0Flex-shrink — keeps the icon from squishing on narrow viewports.
text-flexstring1Flex factor on the text — it takes remaining width.
text-colorstringtheme primary textRow text colour.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

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

Examples

1. Default panel

<mmm-pdp-offer></mmm-pdp-offer>

2. Borderless inline list

<mmm-pdp-offer
  section-background="transparent"
  section-padding="0"
  section-border-radius="0">
</mmm-pdp-offer>

3. Accent panel with bigger icons

<mmm-pdp-offer
  section-background="rgba(200,168,255,0.1)"
  icon-width="1.5rem"
  icon-height="1.5rem"
  text-color="#c8a8ff">
</mmm-pdp-offer>