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 children
children
({ option }: { option: ; }) => ReactNode
required
Anchor to handle
handle
string
required

The product handle for all of the variants

Anchor to options
options
Array<> | undefined
required

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

Anchor to productPath
productPath
string

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

Anchor to selectedVariant
selectedVariant
Maybe<PartialDeep<ProductVariant>>

An optional selected variant to use for the initial state if no URL parameters are set

Anchor to variants
variants
| PartialDeep<ProductVariantConnection> | Array<PartialDeep<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 waitForNavigation
waitForNavigation
boolean

Should the VariantSelector wait to update until after the browser navigates to a variant.

Was this section helpful?

Example code

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

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, to, isActive, variant}) => (
<Link
to={to}
prefetch="intent"
className={
isActive ? 'active' : isAvailable ? '' : 'opacity-80'
}
>
{value}
<br />
{variant && `SKU: ${variant.sku}`}
</Link>
),
)}
</div>
</>
)}
</VariantSelector>
);
};

Anchor to relatedRelated

getSelectedProductOptions