Primitive components

This guide provides a list of the primitive components offered in Hydrogen.


Primitive components are the building blocks for different component types, including products, variants, and cart.


Hydrogen includes the following primitive components:

Component name Component type Description
ExternalVideo Shared Renders an embedded video for the Storefront API's ExternalVideo object.
Image Shared Renders an image for the Storefront API's Image object.
MediaFile Shared Renders the media for the Storefront API's Media object. It either renders an Image, a Video, an ExternalVideo, or a Model3D depending on the mediaContentType of the media provided as a prop.
Metafield Client Renders the value of the Storefront API's Metafield object.
Model3D Client Renders a 3D model (with the model-viewer tag) for the Storefront API's Model3d object.
Money Client Renders a string of the Storefront API's MoneyV2 object.
RawHtml Shared Renders an HTML string as HTML DOM elements.
ShopPayButton Client Renders a button that redirects to the Shop Pay checkout.
UnitPrice Client Renders a string of a unit price.
Video Shared Renders a video for the Storefront API's Video object.

On this page