ProductMedia

Lower-level PDP media family for supported shells around the standard product gallery.

Best for

media-first PDP layoutscustom gallery shellslower-level product-media composition

Import

import { ProductMedia } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use ProductMedia when the app wants the supported PDP media owner, but not the higher-level ProductHeroSection wrapper.

That usually means:

the product page wants to own the exact media shell
the gallery needs short framing copy or a supporting footer
the page still wants to stay inside the public PDP family instead of rebuilding the gallery from scratch

Boundary with ProductImage

ProductMedia owns the shell around the gallery:

heading
caption
footer
overall media framing

ProductImage owns the gallery behavior:

thumbnails
active image state
lightbox handoff
variant-aware image switching

If the change is really about gallery mechanics, it belongs in ProductImage, not ProductMedia.

Public anatomy

ProductMedia is the media root of the PDP family.

Public parts:

ProductMedia.Header
ProductMedia.Heading
ProductMedia.Caption
ProductMedia.Gallery
ProductMedia.Footer

Fast path and open path

The fast path is the structured prop API:

heading
caption
gallery
footer

The open path is the compound family surface.

Start with the prop path when the standard shell already fits. Drop to the compounds when the page needs more direct control over how the media framing is arranged around the gallery.

How it differs from ProductHeroSection

ProductHeroSection = section-first fast path for the full top-of-page rhythm
ProductMedia = lower-level PDP media family
ProductImage = gallery behavior owner beneath the media family

Examples

Live examples you can edit directly in the sandbox.

2 examples

Compound-first media shell

Use the richer ProductMedia family path when the gallery needs framing copy or supporting footer content without turning the media area into a generic content section.

Structured prop path

Use the prop path when the default media shell fits and the page just needs a richer supported wrapper around the standard gallery.

Slots

captionfooterheaderheadingrootgallery

Component Sets

Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.

Props

Prop	Type	Default	Description
heading	string	—	Optional short heading rendered above the gallery when the standard media shell fits
caption	string	—	Optional short caption or supporting copy that frames the gallery without turning ProductMedia into a generic content block
gallery	string	—	Structured handoff to the standard ProductImage gallery when the default media shell already fits
footer	string	—	Optional footer content rendered below the gallery
classNames	Partial<Record<import("@enadhq/enad-react-sdk/client/storefront/types").ProductMediaSlot, string>>	—	No description yet. Slot keys captionfooterheaderheadingrootgallery