Choose a version:

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.

VariantOption

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

{
  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}>

{
  value: string;
  isAvailable: boolean;
  to: string;
  search: string;
  isActive: boolean;
  variant?: PartialDeep<ProductVariant, {recurseIntoArrays: true}>;
  optionValue: PartialProductOptionValues;
}

PartialProductOptionValues

PartialDeep<ProductOptionValue>

PartialProductOption

PartialDeep<
  Omit<ProductOption, 'optionValues'> & {
    optionValues: Array<PartialProductOptionValues>;
  }
>

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>

);

};

Examples

Example code

Description

I am the default example

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

VariantSelectorcomponent

Anchor to propsProps

VariantOption

VariantOptionValue

PartialProductOptionValues

PartialProductOption

Examples

Example code

Description

JavaScript

TypeScript

Anchor to relatedRelated

VariantSelector
component