Build a product page
Previously, you built a collection page. Your Hydrogen storefront sorts products within your collections, using server props and file-based routing. Now that you have a collections page that renders your products, you’re ready to build a product page.
In this tutorial, you'll build a page that shows detailed product information.
You want to display detailed information about products on your custom storefront. The details that you provide for a product will affect the way that the product is displayed to customers, make it easier for you to organize your products, and make it easier for customers find the product.
By creating a product page, you can share information about a product with customers, including the product’s variants, description, and price. You’ll also be able to offer customers a way to purchase the product.
What you’ll learnAnchor link to section titled "What you’ll learn"
In this tutorial, you’ll learn how to do the following tasks:
- Create a products route.
- Query products by their handle.
- Generate SEO tags for product pages.
- Implement Shopify Analytics on product pages.
- Fetch the variants associated with a product.
- Add a product gallery.
- Create a variant selector for a product.
- Add a Buy Now button to the product page.
RequirementsAnchor link to section titled "Requirements"
- You’ve completed the build a collection page tutorial.
Sample codeAnchor link to section titled "Sample code"
If you want to quickly get started, then you can copy and paste the following code from each file into the corresponding files in your Hydrogen app. If the file doesn’t yet exist, then you can create it in your Hydrogen app. This tutorial describes the sample code step by step:
Step 1: Create a products routeAnchor link to section titled "Step 1: Create a products route"
You can create a products route similar to how you previously created a collections route.
To begin building your product page, create a file called
/src/routes/products/[handle].server.jsx that registers a new products route. Then, display the dynamic handle on the page within a layout component.
The products route is registered. Clicking a product takes you to a dynamic product page:
Step 2: Query a product by handleAnchor link to section titled "Step 2: Query a product by handle"
Similar to querying a collection by its handle, you can use a product’s handle to query a product.
If a handle isn't specified when a product is created, then the handle is generated from the product's original title, replacing any spaces with hyphens. For example, a product that was created with the title The Full Stack might have the handle the-full-stack.
At the bottom of your
/src/routes/products/[handle].server.jsx file, add a GraphQL query that retrieves a product by its handle. You'll also set up an
Seo component and implement Shopify Analytics, similar to how you did this for collection pages.
The product page renders the following dynamic content:
Step 3: Query product and variant detailsAnchor link to section titled "Step 3: Query product and variant details"
In this step, you'll create your first client component -
ProductDetails. Client components render on the client, enabling a client-side state. Client components end in
Similar to querying all products and variants that belong to a collection, you can set up a GraphQL query to retrieve detailed information about products and variants.
ProductDetailscomponent to display product information, such as the description, title, and image of the product:
/src/routes/products/[handle].server.jsx, update the GraphQL query to retrieve details about the product and its associated variants and pass the data through to the new ProductDetails component:
The page renders details about the product in a basic layout:
Step 4: Add a product galleryAnchor link to section titled "Step 4: Add a product gallery"
In this step, you'll use a
MediaFile component to render media for your product pages. The
MediaFile component renders an
ExternalVideo, or a
ModelViewer depending on the
mediaContentType of the
media provided as a prop. The
MediaFile component is also compatible with 3D models.
The page now renders an image next to the details about the product:
Step 5: Create a product formAnchor link to section titled "Step 5: Create a product form"
Next, you'll create a product form that includes a variant selector, product price, and buy button:
- The variant selector will use the
useProductOptionshook to retrieve selected options.
ProductPricecomponent will render a
Moneycomponent with the product
minVariantPrice, for either the regular price or compare at price range.
BuyNowButtoncomponent will render a button that adds an item to the cart and redirects the custom to checkout.
The product page now renders all of the details for a product and its variants. It also includes a button to purchase the product. In the next tutorial, you’ll define the context for interacting with a cart and add an Add to cart button, which allows customers to choose products to purchase without completing the payment process.
- Learn how to build a cart.