When to use it

Use ProductCard anywhere shoppers need a fast, repeatable scan of product image, name, and price. It is the default building block for catalog grids, recommendation rails, and search surfaces.

Layout selection

Choose the layout based on scan behavior, not only visual taste:

• gallery for standard product grids and editorial merch rows
• horizontal for search, drawers, and tighter list surfaces
• minimal when image and overlay treatment should dominate the presentation
• list or stripped when product density matters more than visual drama

Image behavior

When a gallery card receives multiple images, it can either swipe between them or stay on the first image.

• imageBehavior="auto" keeps the normal card behavior and also lets parent components influence the image treatment.
• Inside ProductRecommendations, auto defaults to a single image so the outer rail stays the only carousel in that section.
• Use imageBehavior="carousel" to force the card-level image swipe back on.
• Use imageBehavior="single" to always lock the card to its first image.

Data guidance

Treat ProductCard as a display primitive, not as your product model. Normalize product data before it reaches the component so the card can stay focused on presentation. That keeps grid templates simpler and makes it easier to reuse the same card across search, PLP, and recommendation contexts.

If a layout needs more metadata than the core card currently shows, keep the main import and switch to the compound slot surface (ProductCard.Root, ProductCard.ImageArea, ProductCard.Content, and friends) before inventing a parallel product-card abstraction.

Composition and customization

The default prop-based layouts stay the fastest path for standard grids and rails. When the surface needs custom action rows, richer badge placement, or a different wishlist control, keep importing ProductCard from @enadhq/enad-react-sdk/client/storefront and compose the slot parts directly from that same export.

That keeps the API discoverable while still leaving analytics, save-state, and add-to-cart behavior in your own callbacks and slots instead of assuming a built-in provider or product model.

Connected companion

Use ProductCard when the page already owns product data.

If the page wants the SDK to resolve a search-backed product by slug, SKU, or an inline search product record, step up to SearchProductCard from @enadhq/enad-react-sdk/client/search. That connected wrapper keeps ProductCard presentational while mapping Search GraphQL product data into the same card contract.