DocsDocsSDKs

ProductMedia

React SDK guidance for ProductMedia.

Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

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

Contract scope

  • Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
  • Public import: @enadhq/enad-react-sdk/client/storefront.
  • Playground route: /sandbox?component=ProductMedia.
  • Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes

ProductMedia

# ProductMedia > Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe. Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior. ## Playground - Import path: `@enadhq/enad-react-sdk/client/storefront`. - Live playground: [/components/commerce/product-media](https://sdk.enad.io/components/commerce/product-media). ## 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 ## Contract scope - Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior. - Public import: `@enadhq/enad-react-sdk/client/storefront`. - Playground route: /sandbox?component=ProductMedia. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes