Product Price

Display product pricing that automatically updates based on variant selection from Product context.

Interactive Demo

Try the product price component in different configurations using the variant switcher:

Loading playground...

contextPricenumber

Price in cents. Use this for standalone usage outside Product context. If not provided, automatically reads from Product context.

showCentsboolean

Whether to show cents in the price display. Defaults to true.

showCurrencyboolean

Whether to show the currency symbol. Defaults to false.

currencystring

Currency code (e.g., "USD", "EUR"). Defaults to "USD".

localestring

Locale for price formatting (e.g., "en-US", "de-DE"). Defaults to "en-US".

classNamestring

CSS classes to apply to the price element.

npx merchify-cli init

This CLI will guide you through setting up Merchify components in your project