Theme Playground

Commerce

PurchaseActions

Public family root for quantity, primary CTA, stock messaging, and purchase-adjacent extensions on a PDP.

Best for

custom quantity and CTA groupingsfamily-level action compositionnotify-me and purchase helper extensions

Import

import { PurchaseActions } from "@enadhq/enad-react-sdk/client/storefront"

When to use it

Use PurchaseActions when the app wants the supported quantity-and-CTA family, but not the higher-level ProductHeroSection wrapper.

That usually means:

  • the storefront wants to own the exact action grouping
  • the quantity control and CTA layout need lower-level composition control
  • the page needs stock-state copy, size-guide links, notify-me buttons, or similar purchase-adjacent extensions without baking vendor-specific behavior into the SDK contract

Public anatomy

PurchaseActions is the action root of the PDP family.

Public parts:

  • PurchaseActions.Helper
  • PurchaseActions.Row
  • PurchaseActions.Quantity
  • PurchaseActions.Primary
  • PurchaseActions.Extensions
  • PurchaseActions.Secondary
  • PurchaseActions.Footer

Extension guidance

Treat size guides, back-in-stock prompts, find-in-store links, and similar flows as passed-in content.

That means:

  • the SDK owns the purchase layout surface
  • the app owns vendor-specific logic and integrations
  • the page can swap or remove extensions without changing the family contract

If the app needs a fully bespoke purchase area, drop down to the compound parts or provide custom actions.content through ProductHeroSection.

How it differs from ProductHeroSection

  • ProductHeroSection = section-first fast path
  • PurchaseActions = family root for lower-level purchase-action composition

Examples

Live examples you can edit directly in the sandbox.

1 example

Family-level purchase actions

Use PurchaseActions when the page wants the supported quantity and CTA family 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.