← Web Components

Web Components · PDP

<mmm-pdp-short-description>

The short, above-the-fold product blurb. Reads from PDP_STORE.productInfo.shortDescription. Defaults inherit the theme's product.shortDescription typography settings.

Overview

Pairs naturally between <mmm-pdp-title> and <mmm-pdp-price> to anchor the buying decision above the fold. Renders rich-text content; desc-p-margin controls spacing between paragraphs.

When to use

  • Below the PDP title for a one-paragraph hook.
  • For products where the full description is too long for the buying area.

Quick start

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

<mmm-pdp-short-description desc-font-size="0.875rem" desc-line-height="1.6"></mmm-pdp-short-description>

Attributes

AttributeTypeDefaultDescription
desc-font-familystringtheme description fontFont family for the description text.
desc-font-weightstring400Font weight.
desc-font-sizestring0.9375remFont size.
desc-letter-spacingstringnormalLetter spacing.
desc-line-heightstring1.6Line height.
desc-text-transformstringnoneCSS text-transform.
desc-colorstringtheme short-description colorText colour.
desc-margin-bottomstring1.5625remSpacing below the block.
desc-p-marginstring0 0 0.625rem 0Margin applied to <p> elements inside the description.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Live preview

store sample-store tag <mmm-pdp-short-description>

Examples

1. Default

<mmm-pdp-short-description></mmm-pdp-short-description>

2. Larger lead text

<mmm-pdp-short-description
  desc-font-size="1rem"
  desc-line-height="1.7"
  desc-margin-bottom="1.5rem">
</mmm-pdp-short-description>

3. Subtle muted style

<mmm-pdp-short-description
  desc-color="#6d7175"
  desc-font-size="0.8125rem"
  desc-letter-spacing="0.005em">
</mmm-pdp-short-description>