← Web Components

Web Components · PDP

<mmm-pdp-title>

The H1-style product title on the product-detail page. Reads the product name from window.PDP_STORE.productInfo.name; defaults match the theme's heading typography.

Overview

PDP-level companion to <mmm-product-title>. Subscribes to the shared PDP_STORE and re-renders whenever the active product or variant changes (so a variant-specific name updates live).

When to use

  • On every PDP layout — the canonical product headline.
  • Anywhere on the PDP that needs to mirror the active product's name.

Quick start

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

<mmm-pdp-title title-font-size="2rem" title-font-weight="600"></mmm-pdp-title>

Attributes

AttributeTypeDefaultDescription
title-font-sizestring2remTitle font size.
title-font-weightstringtheme heading weight / 600Title font weight.
title-line-heightstring1.3Title line-height.
title-marginstring0 0 0.9375rem 0CSS margin around the title.
title-colorstringtheme primary text / #111Title text colour.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

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

Examples

1. Default — theme-driven

<mmm-pdp-title></mmm-pdp-title>

2. Editorial display heading

<mmm-pdp-title
  title-font-size="3rem"
  title-font-weight="800"
  title-line-height="1.05"
  title-margin="0 0 1.5rem 0">
</mmm-pdp-title>

3. Dark-mode tight headline

<mmm-pdp-title
  title-color="#fff"
  title-font-size="1.75rem"
  title-font-weight="600"
  custom-css="letter-spacing:-0.015em;">
</mmm-pdp-title>