Show available variants

• You've completed the quickstart guide.
• You've set up a cart handler.

Many product pages include a form where options are submitted to the server when the user adds to the cart. The most basic product form enables customers to select from available variants. For example, variants might include product size and color.

In Hydrogen we recommend using a Link to select each variant. This automatically updates the URL when customers select a variant, which has the following benefits:

• Search engines can easily index each separate variant.
• Users can share and bookmark each separate variant.
• Variants can be prefetched on hover, which decreases the perceived load time.

First, your product query needs to include product options. Do this by adding options with the name and values properties:

Now that you've queried product options, you can use the VariantSelector component to render links for all product options:

To calculate the selected product options based on URL parameters, update your GraphQL query to use the variantBySelectedOptions and use getSelectedProductOptions:

Sometimes you might want to render the variants differently based on product availability. You can do this by adding product variants to your Storefront API query.

Add variants to the product query and include the availableForSale property. Because variants is a list, you have to decide how many items to query. You can include all items, but for efficiency we recommend doing this if you only have a handful to query. For example, querying all if you have one hundred variants can have a negative impact on performance.

Use the CartForm component to add the selectedVariant to the cart. You can also disable the add to cart button if the selected variant is invalid or unavailable:

You may want to automatically have a variant selected when the page first loads. We recommend selecting a default variant by redirecting to a variant from the loader:

• Learn how to update metafields.