Commmerce Docs
← Web Components

Web Components · Product Detail (PDP)

<mmm-pdp-wishlist>

PDP wishlist toggle for the active variant.

What it is

Heart-toggle that adds the current variant to the wishlist.

When to use

  • Beside the title
  • Inside the buy box

Attributes

AttributeTypeDefaultDescription
data-product-idstringcontextInherited from the surroundingor.
idstring—Unique element identifier.
classstring—Custom CSS class list.
hiddenbooleanfalseHide the element without removing it from the DOM.

Examples

Default

Variant-aware heart toggle.

<mmm-pdp-wishlist></mmm-pdp-wishlist>