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-recommendations.

When to use it

Use ProductRecommendations when the page needs a product-led recommendation section, rather than a bare horizontal rail.

It is the right family for:

• related products after a PDP body
• complete-the-look modules with supporting copy
• recently viewed sections that still need heading and CTA structure
• cross-sell moments with a supporting editorial or service aside

When the recommendation area starts needing real section structure, stay in ProductRecommendations rather than inventing a separate recommendation-section export.

Family boundary

ProductRecommendations complements the other storefront families:

• ProductHeroSection owns the PDP hero entry
• ProductDetails owns the post-hero product information body
• ProductRecommendations owns the merchandising section that follows

That separation matters. Recommendation content should still revolve around products and cross-sell intent, not become a generic editorial block.

Composition notes

Lead with the compound path when the recommendation area needs explicit structure.

Available compounds:

• ProductRecommendations.Header
• ProductRecommendations.Heading
• ProductRecommendations.Body
• ProductRecommendations.Products
• ProductRecommendations.Aside
• ProductRecommendations.Footer

Use the convenience props when the recommendation shell fits the common pattern:

• title for the section heading
• body for supporting copy
• products for the recommendation cards
• viewAllHref and viewAllLabel for the browse CTA
• aside for supporting service or editorial content
• footer for secondary notes below the main section

Keep recommendations product-led

The aside can support the recommendation story, but the family should still be clearly about products. If the section could work equally well with no products at all, it probably belongs in a different block family.

Behavior and theming guidance

The inner rail still owns the swipe/arrow behavior and keeps nested ProductCard images in single-image mode by default so the recommendation strip remains the main carousel.

Use showArrows for stronger desktop affordance, and keep delight subtle unless the recommendation section is deliberately hero-adjacent.

When the page has both ProductDetails and ProductRecommendations, keep the recommendation family visually downstream so the shopper can understand that the main product information is complete before the page shifts into merchandising.

Connected companion

Use ProductRecommendations when the page already owns the recommendation products or when the merchandising shell needs custom composition around known product cards.

Use SearchProductRecommendations from @enadhq/enad-react-sdk/client/search when the page wants the SDK to resolve the recommendation products from search-backed inputs such as SKUs, category URLs, tag keys, or brand slugs and then feed them into this same recommendation 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=ProductRecommendations.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes