BuyBox
Public family root for the main merchandising and option-selection zone on a PDP. Use it when the app needs lower-level control than ProductHeroSection while still staying inside the supported product-detail family.
Best for
Import
import { BuyBox } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use BuyBox when the app wants the supported PDP merchandising anatomy, but not the higher-level ProductHeroSection wrapper.
That usually means:
- the storefront wants to own the exact order of the title, price, review, and option regions
- the page still wants a stable path back to the public family instead of rebuilding on raw primitives
Public anatomy
BuyBox is the merchandising root of the PDP family.
Public parts:
BuyBox.HeaderBuyBox.BadgesBuyBox.TitleBuyBox.SubtitleBuyBox.ReviewsBuyBox.ReviewSummaryBuyBox.PriceBuyBox.Options
How it differs from ProductHeroSection
ProductHeroSection= section-first fast pathBuyBox= family root for lower-level merchandising composition
If the page mostly fits the standard PDP hero shape, start with ProductHeroSection.
If the merchandising shell itself is where variation lives, use BuyBox directly.
Examples
Live examples you can edit directly in the sandbox.
Family-level buy-box composition
Use BuyBox when the page wants the supported buy-box anatomy directly instead of starting from ProductHeroSection.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.