Variant
The 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 component provides a render prop that renders for each product option.
Anchor to propsProps
- Anchor to handlehandlestringrequired
The product handle for all of the variants
- Anchor to optionsoptionsPartialObjectDeep<ProductOption, {}>[]required
Product options from the Storefront API. Make sure both
nameandvaluesare apart of your query.- Anchor to childrenchildren({ option }: { option: ; }) => ReactNoderequired
- Anchor to variantsvariantsPartialObjectDeep<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 includeandand.- Anchor to productPathproductPathstring
By default all products are under /products. Use this prop to provide a custom path.
VariantSelectorProps
- handle
The product handle for all of the variants
string - options
Product options from the [Storefront API](/docs/api/storefront/2023-10/objects/ProductOption). Make sure both `name` and `values` are apart of your query.
PartialObjectDeep<ProductOption, {}>[] - variants
Product variants from the [Storefront API](/docs/api/storefront/2023-10/objects/ProductVariant). 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`.
PartialObjectDeep<ProductVariantConnection, {}> | PartialObjectDeep<ProductVariant, {}>[] - productPath
By default all products are under /products. Use this prop to provide a custom path.
string - children
({ option }: { option: VariantOption; }) => ReactNode
{
/** The product handle for all of the variants */
handle: string;
/** Product options from the [Storefront API](/docs/api/storefront/2023-10/objects/ProductOption). Make sure both `name` and `values` are apart of your query. */
options: Array<PartialDeep<ProductOption>> | undefined;
/** Product variants from the [Storefront API](/docs/api/storefront/2023-10/objects/ProductVariant). 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`. */
variants?:
| PartialDeep<ProductVariantConnection>
| Array<PartialDeep<ProductVariant>>;
/** By default all products are under /products. Use this prop to provide a custom path. */
productPath?: string;
children: ({option}: {option: VariantOption}) => ReactNode;
}VariantOption
- name
string - value
string - values
Array<VariantOptionValue>
{
name: string;
value?: string;
values: Array<VariantOptionValue>;
}VariantOptionValue
- value
string - isAvailable
boolean - to
string - search
string - isActive
boolean
{
value: string;
isAvailable: boolean;
to: string;
search: string;
isActive: boolean;
}Example code
examples
Example code
description
I am the default example
JavaScript
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> ); };TypeScript
import {VariantSelector} from '@shopify/hydrogen'; import type {Product} from '@shopify/hydrogen/storefront-api-types'; import {Link} from '@remix-run/react'; 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}) => ( <Link to={to} prefetch="intent" className={ isActive ? 'active' : isAvailable ? '' : 'opacity-80' } > {value} </Link> ))} </div> </> )} </VariantSelector> ); };
