Product detail

When to use it

User clicks a product from the list or arrives via SEO.

• Add-to-cart in <10s
• Variant selection clear
• Reviews scannable

Layout regions

• header
• breadcrumb
• main
• gallery
• detail
• reviews
• related

States

• default
• partial
• unauthorized
• loading
• success

Example

Next.js — server component with structured data + variant URL state

// app/(shop)/products/[slug]/page.tsx — Server Component
import { fetchProduct } from '@/lib/api.server'
import Script from 'next/script'

export async function generateMetadata({ params }) {
  const p = await fetchProduct((await params).slug)
  return { title: p.name, description: p.description, openGraph: { images: [p.heroImage] } }
}

export default async function ProductPage({ params, searchParams }) {
  const p = await fetchProduct((await params).slug)
  const variant = (await searchParams).variant ?? p.variants[0].id
  const ld = { '@context': 'https://schema.org', '@type': 'Product', name: p.name, image: p.images, offers: { '@type': 'Offer', price: p.price, priceCurrency: p.currency, availability: p.stock > 0 ? 'InStock' : 'OutOfStock' } }
  return (
    <Container>
      <Script id="ld" type="application/ld+json">{JSON.stringify(ld)}</Script>
      <Breadcrumb segments={p.breadcrumb} />
      <Grid cols={2}>
        <Gallery images={p.images} />
        <ProductDetail product={p} selectedVariant={variant} />
      </Grid>
      <ReviewsSection productId={p.id} />
      <RelatedProducts categoryId={p.categoryId} />
    </Container>
  )
}

The full Product detail pattern specifies 3 exact microcopy strings, 2 motion specs, 5 composition rules, 2 more code examples — all gated behind the full recipe. Get the full recipe.

Related