D. E-commerce

Product Detail Page

Gallery with variants and add to cart, a sticky buy box, description & specs tabs, related products carousel, a size guide modal and the mobile PDP.

6 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add commerce/product-detail

01Gallery, variants & add to cart

Uses: StoreHeader · Breadcrumb · NumberStepper · Button · Badge

components/blocks/commerce/product-detail/01-gallery-variants.tsx

Uses: StoreHeader · Button · Badge · Tabs

components/blocks/commerce/product-detail/02-sticky-buy-box.tsx

Uses: StoreHeader · Tabs · Table · Badge

components/blocks/commerce/product-detail/03-description-specs.tsx

Uses: StoreHeader · Dialog · Segment · Table

components/blocks/commerce/product-detail/05-size-guide.tsx

Uses: NumberStepper · Button · Badge

components/blocks/commerce/product-detail/06-mobile-pdp.tsx