Web Components · Product Detail (PDP)
<mmm-pdp-variants>
Variant selectors aware of stock availability.
What it is
Renders each option axis (size, color, etc.) with availability-aware swatches and selects.
When to use
- Inside the buy box on every PDP
Attributes
AttributeTypeDefaultDescription
data-product-idstringcontextInherited from the surroundingdata-stylestringautoauto, swatch, chip, or select.idstring—Unique element identifier.classstring—Custom CSS class list.hiddenbooleanfalseHide the element without removing it from the DOM.Examples
Auto-style
Chooses the best UI per option type.
<mmm-pdp-variants></mmm-pdp-variants>Forced selects
Native selects for every axis.
<mmm-pdp-variants data-style="select"></mmm-pdp-variants>