← Web Components

Web Components · Global

<mmm-hotspot>

Shoppable image — drop interactive pins anywhere on a background image (or video frame). Each pin opens a hover / click popover with image, title, price, description, optional meta rows, and click-through URL. Per-pin content can be inline (static), SDK-driven (hotspot-api-N="category.method"), or fetched from a custom URL (hotspot-fetch-url-N). Up to 50 pins per instance.

Overview

Use this for lookbooks, editorial homepage banners, and "Shop the look" sections. Each pin is a dot positioned at x%,y% over the image; the popover renders an inline mini-card. Every per-pin attribute is indexed (hotspot-cordinate-1, hotspot-text-1, …) up to N = 50.

Quick start

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

<mmm-hotspot
  media-src="https://example.com/lookbook.jpg"
  data-trigger-type="hover"
  hotspot-cordinate-1="20,30"
  hotspot-text-1="Sofa"
  hotspot-price-1="₹ 45,000"
  hotspot-img-1="https://placehold.co/100"
  hotspot-description-1="Modern lounge sofa"
  hotspot-url-1="/sofa"></mmm-hotspot>

Attributes

Image & sizing

AttributeTypeDefaultDescription
media-srcstring—Background image URL.
data-object-fitstringcovercover, contain, or fill.
hotspot-xl-width / -desktop-width / -tablet-width / -mobile-widthstring100%Container width per breakpoint. Each falls back to the next larger.
hotspot-xl-height / -desktop-height / -tablet-height / -mobile-heightstringautoContainer height per breakpoint. data-height-{bp} aliases are also accepted.
hotspot-trigger-type / data-trigger-type / trigger-typestringhoverhover or click — how popups open.

Pin styling

AttributeTypeDefaultDescription
hotspot-outer-heightnumber43Outer dot diameter in px.
hotspot-inner-heightnumber28Inner dot diameter in px.
hotspot-outer-colorstring#ffffff50Outer dot colour.
hotspot-inner-colorstring#fffInner dot colour.
hotspot-outer-opacitynumber1Outer dot opacity.
hotspot-inner-opacitynumber1Inner dot opacity.
popup-border-colorstringtheme border / #e5e7ebPopup card border colour.
popup-title-font-weightstringtheme sub-heading weight / 600Popup title font weight.

Per-pin attributes (N = 1..50)

AttributeTypeDefaultDescription
hotspot-cordinate-Nstring—"x,y" percent position (0–100). Required to render a pin (unless using hotspot-api-N / hotspot-fetch-url-N).
hotspot-text-Nstring—Popup title.
hotspot-price-Nstring—Popup price.
hotspot-img-Nstring—Popup image URL.
hotspot-description-Nstring—Popup description.
hotspot-url-Nstring—Click-through URL.
hotspot-api-Nstring—SDK method as "category.method" — e.g. product.getProductDetails.
hotspot-payload-N-*string—Payload for the SDK call. Suffix is kebab-cased and converted to camelCase before sending (e.g. hotspot-payload-2-product-handle → { productHandle }).
hotspot-fetch-url-Nstring—Raw URL to fetch JSON from. Response fields (image/title/price/description/url) auto-map to the popup.
hotspot-fields-Nstring—Comma-separated response keys to surface as labelled meta rows in the popup.
hotspot-meta-N-*string—Inline meta rows (e.g. hotspot-meta-1-stock="In stock"). Inline rows win on key collision with response data.

Live preview

store sample-store tag <mmm-hotspot>

Examples

1. Static pin (inline values)

<mmm-hotspot
  media-src="/img/hero.jpg"
  hotspot-desktop-height="600"
  hotspot-cordinate-1="20,30"
  hotspot-text-1="Sofa"
  hotspot-price-1="₹ 45,000"
  hotspot-img-1="/img/sofa.jpg"
  hotspot-description-1="Modern lounge sofa"
  hotspot-url-1="/products/sofa"></mmm-hotspot>

2. SDK-driven pin (product detail by handle)

<mmm-hotspot
  media-src="/img/hero.jpg"
  hotspot-cordinate-1="40,50"
  hotspot-api-1="product.getProductDetails"
  hotspot-payload-1-product-handle="blue-chair"></mmm-hotspot>

3. Custom-fetch pin with meta rows

<mmm-hotspot
  media-src="/img/hero.jpg"
  hotspot-cordinate-1="70,60"
  hotspot-fetch-url-1="https://api.example.com/products/123"
  hotspot-fields-1="brand,stock,rating"
  hotspot-meta-1-warranty="1 year"></mmm-hotspot>