Skip to main content

VariantSelector
component

The VariantSelector component helps you build a form for selecting available variants of a product. It is important for variant selection state to be maintained in the URL, so that the user can navigate to a product and return back to the same variant selection. It is also important that the variant selection state is shareable via URL. The VariantSelector component provides a render prop that renders for each product option.

Anchor to propsProps

Anchor to handle
handle
string
required

The product handle for all of the variants

Anchor to options
options
PartialObjectDeep<ProductOption, {}>[]
required

Product options from the Storefront API. Make sure both name and values are apart of your query.

Anchor to children
children
({ option }: { option: ; }) => ReactNode
required
Anchor to variants
variants
PartialObjectDeep<ProductVariantConnection, {}> | PartialObjectDeep<ProductVariant, {}>[]

Product variants from the Storefront API. You only need to pass this prop if you want to show product availability. If a product option combination is not found within variants, it is assumed to be available. Make sure to include availableForSale and selectedOptions.name and selectedOptions.value.

Anchor to productPath
productPath
string

By default all products are under /products. Use this prop to provide a custom path.

Was this section helpful?

Example code

import {VariantSelector} from '@shopify/hydrogen';
import {Link} from '@remix-run/react';

const ProductForm = ({product}) => {
return (
<VariantSelector
handle={product.handle}
options={product.options}
variants={product.variants}
>
{({option}) => (
<>
<div>{option.name}</div>
<div>
{option.values.map(({value, isAvailable, path, isActive}) => (
<Link
to={path}
prefetch="intent"
className={
isActive ? 'active' : isAvailable ? '' : 'opacity-80'
}
>
{value}
</Link>
))}
</div>
</>
)}
</VariantSelector>
);
};

Anchor to relatedRelated

getSelectedProductOptions