Web Components · Global
<mmm-hotspot>
Pinpoint products on imagery — for lookbooks and shop-the-look.
What it is
Wraps an image and places clickable pins over it. Each pin opens a popover with a product card.
When to use
- Editorial lookbooks
- Shop-the-room interior pages
- Holiday gift guides
Attributes
AttributeTypeDefaultDescription
idstring—Unique element identifier.classstring—Custom CSS class list.hiddenbooleanfalseHide the element without removing it from the DOM.Examples
Basic lookbook image
Pins are positioned via inline data-pin.
<mmm-hotspot>
<img src="/lookbook/spring.jpg" alt="Spring look" />
<span data-pin="top:30%;left:40%" data-product-id="classic-tee"></span>
<span data-pin="top:65%;left:55%" data-product-id="cargo-pant"></span>
</mmm-hotspot>