Product Options

Interactive product variant picker that automatically handles color swatches, size buttons, and dropdown selections with real-time price updates from product context.

Interactive Demo

Try the interactive playground below - select different product options and see the price update in real-time:

Loading playground...

ProductOptions Props

classNamestring
CSS classes for styling the options container

Context Data (Automatic)

optionAttributesRecord<string, OptionAttribute>
Product option attributes from Product context defining available choices and UI types
combinationsCombination[]
Valid variant combinations with pricing and availability from Product context
selectionRecord<string, string>
Current selected options from Product context, updated automatically
updateSelection(key: string, value: string) => void
Function from Product context to update selections automatically

UI Types

color-swatchesUI Type
Circular color picker buttons with hex colors or images
buttonsUI Type
Rectangular buttons for sizes, styles, and other text options
dropdownUI Type
Select dropdown for long lists of options or materials
color-pickerUI Type
HTML color input for custom color selection

Installation

npx merchify-cli init

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

Customized Example

Here's the same component after copying it to your project and customizing it. Notice the dotted borders and checkmark indicators - this shows how easy it is to modify the component exactly how you want it!

Source Code

Multiple Products Demo

The ProductList component fetches multiple products and automatically wraps each in its own Product provider. Notice how selecting options in one product doesn't affect the others!

Loading products...

Code Implementation

🔑 Key Point: The ProductList component automatically wraps each product in its own Product provider. Components inside the renderItem function use the nearest parent's context via useProduct().