Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-title>

The product name line for <mmm-product-card>. Reads the name from the per-product store, with theme-driven typography defaults and per-card overrides.

Overview

Theme defaults come from CommmerceThemeSettings.typography.heading. Use line-clamp to keep long titles on a fixed row count — the rest is ellipsized.

When to use

  • Inside <mmm-product-card> as the canonical name line.
  • For grids that need a fixed-height title row — set line-clamp="2" or line-clamp="3".

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","name":"Classic Tee"}'>
  <mmm-product-title font-size="1rem" line-clamp="2"></mmm-product-title>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
font-sizestring1remTitle font size.
font-weightstringtheme heading weight / 500Title font weight.
line-heightstring1.4Title line-height.
colorstringtheme primary textTitle text colour.
text-alignstringleftCSS text-align — left, center, right, justify.
line-clampnumber—Max number of visible lines; the remainder ellipsizes. Leave blank for unbounded.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Live preview

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

Examples

1. Theme-driven defaults

<mmm-product-title></mmm-product-title>

2. Two-line clamp for fixed-height grid

<mmm-product-title font-size="0.875rem" line-clamp="2" line-height="1.3"></mmm-product-title>

3. Centred uppercase headline style

<mmm-product-title
  font-size="0.75rem"
  font-weight="700"
  text-align="center"
  color="#0e1011"
  custom-css="text-transform:uppercase;letter-spacing:0.12em;">
</mmm-product-title>