Product and variant components

This guide provides a list of the product and variant components offered in Hydrogen.

Product and variant

Products are the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options.

Each combination of option values for a product can be a variant for that product. For example, a t-shirt might be available for purchase in blue and green. The blue t-shirt and the green t-shirt are variants.

Reference

Hydrogen includes the following product and variant components:

Component name Component type Description
ProductDescription
Alias: Product.Description
Client Renders a RawHtml component with the product's descriptionHtml.
ProductMetafield Client Renders a Metafield component with a product metafield.
ProductPrice
Alias: Product.Price
Client Renders a Money component with the product priceRange's maxVariantPrice or minVariantPrice, or the product compareAtPriceRange's maxVariantPrice or minVariantPrice.
ProductProvider
Alias: Product
Client Sets up a context with product details.
ProductTitle
Alias: Product.Title
Client Renders a span element with the product's title.
SelectedVariantAddToCartButton
Alias: Product.SelectedVariant.AddToCartButton
Client Renders an AddToCartButton component for the product's selected variant.
SelectedVariantBuyNowButton
Alias: Product.SelectedVariant.BuyNowButton
Client Renders a BuyNowButton component for the product's selected variant.
SelectedVariantImage
Alias: Product.SelectedVariant.Image
Client Renders an Image component for the product's selected variant's image.
SelectedVariantMetafield Client Renders a Metafield component for the product's selected variant's metafield.
SelectedVariantPrice
Alias: Product.SelectedVariant.Price
Client Renders a Money component for the product's selected variant regular or compare at price.
SelectedVariantShopPayButton
Alias: Product.SelectedVariant.ShopPayButton
Client Renders a ShopPayButton component for the product's selected variant.
SelectedVariantUnitPrice
Alias: Product.SelectedVariant.UnitPrice
Client Renders a UnitPrice component for the product's selected variant's unit price.