Choose a version:

VariantSelector

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.

VariantOption

name
```
string
```
value
```
string
```
values
```
Array<VariantOptionValue>
```

VariantOptionValue

isActive
```
boolean
```
isAvailable
```
boolean
```
optionValue
```
PartialProductOptionValues
```
search
```
string
```
to
```
string
```
value
```
string
```

variant

PartialDeep<ProductVariant, {recurseIntoArrays: true}>

PartialProductOptionValues

__typename
```
'ProductOptionValue'
```
firstSelectableVariant
The product variant that combines this option value with the lowest-position option values for all other options. This field will always return a variant, provided a variant including this option value exists.
```
Maybe<ProductVariant>
```
id
A globally-unique ID.
```
string
```
name
The name of the product option value.
```
string
```
swatch
The swatch of the product option value.
```
Maybe<ProductOptionValueSwatch>
```

PartialProductOption

__typename
```
'ProductOption'
```
id
A globally-unique ID.
```
string
```
name
The product option’s name.
```
string
```
optionValues
```
Array<PartialProductOptionValues>
```
values
The corresponding value to the product option name.
```
Array<Scalars['String']['output']>
```

Examples

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>

);

};

Examples

Example code

JavaScript

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>
  );
};

TypeScript

import {VariantSelector} from '@shopify/hydrogen';
import type {Product} from '@shopify/hydrogen/storefront-api-types';
import {Link} from 'react-router';

const ProductForm = ({product}: {product: 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

Was this page helpful?