Commmerce Docs
← Web Components

Web Components · Product

<mmm-product-media>

The product image block for <mmm-product-card>. Reads images from the per-product store and renders them in single, dual-image, or carousel mode depending on view-mode.

Overview

Three layouts:

  • single — one image, no swap, no carousel.
  • dual-image — first image by default, second image on hover (covers).
  • carousel — swiper-based slider with dots / nav arrows.

Dimensions default to the theme's product-media settings; inline attributes win.

When to use

  • Inside every <mmm-product-card> — the primary visual element.
  • For dual-image hover swap (hero / lifestyle image alternation).
  • For carousel-style cards on landing pages.

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"}'>
  <mmm-product-media view-mode="dual-image" object-fit="cover"></mmm-product-media>
</mmm-product-card>

Attributes

AttributeTypeDefaultDescription
view-modestringsingleOne of single, dual-image, carousel.
object-fitstringcoverCSS object-fit — cover, contain, fill, none, scale-down.
media-heightstringtheme product heightImage area height. Plain numbers get px appended.
media-widthstringtheme product width / 100%Image area width.
show-dotsbooleantrueCarousel mode — show pagination dots.
show-navbooleantrueCarousel mode — show prev/next arrows.
custom-cssstring—Extra CSS appended inside the shadow DOM.
classstring—Standard HTML class list.

Live preview

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

Rendered inside a <mmm-product-card> so the store is available.

Examples

1. Single image with theme dimensions

<mmm-product-media view-mode="single"></mmm-product-media>

2. Dual image hover swap

<mmm-product-media
  view-mode="dual-image"
  object-fit="cover"
  media-height="26rem">
</mmm-product-media>
<mmm-product-media
  view-mode="carousel"
  show-dots="true"
  show-nav="false"
  media-height="32rem">
</mmm-product-media>