When to use it

Use ProductRecommendations when the page needs a product-led recommendation section, not just 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

If the page only needs the simplest possible rail, the legacy children-based path still works. But 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
• children or 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

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.