Build product pages with Hydrogen
Previously, you created a custom storefront and started customizing your storefront with Hydrogen. You're now ready to build product pages in your app.
In this tutorial, you'll accomplish a series of tasks to add some specific functionality to your custom storefront. Your custom storefront will be simple, but you'll learn where to find resources to build more complex features on your own.
What you'll learn
Anchor link to section titled "What you'll learn"After you've finished this tutorial, you'll have accomplished the following:
- Displayed a list of products in a grid on your app's homepage
- Added a Load more button to the product list page
- Customized the product details page

Requirements
Anchor link to section titled "Requirements"You're using the most recent version of Hydrogen. The latest release gives you the benefits of performance enhancements, new components, and other best practices.
You've completed the create a custom storefront with Hydrogen and customize a storefront with Hydrogen tutorials to begin coding off of the Demo Store template.
Step 1: Create a product list
Anchor link to section titled "Step 1: Create a product list"A product list includes information about all of the products that the storefront offers.
Add a ProductList
component
Anchor link to section titled "Add a ProductList component"You can create a ProductList
component so that buyers can look for and view products on a storefront. The ProductList
is a shared component, which means that it can render on both the client and the server.
Create a new file under
src/components
calledProductList.jsx
.Add the following code to the file:
Add the product list to the homepage
Anchor link to section titled "Add the product list to the homepage"After you've edited your ProductList
component, you can use it on different pages in your app. For example, you might want to add your product list to your app's homepage.
In src/routes/index.server.jsx
, replace the code with the following:
The homepage renders a list of products:

Step 2: Add a Load more
button
Anchor link to section titled "Step 2: Add a Load more button"The following steps show you how to display only a subset of products on your product list page and provide a button to load more products.
Create a new file under
src/components
calledLoadMore.client.jsx
.The
LoadMore
component is a client component because it contains client-side interactivity.In
src/routes/index.server.jsx
, import theLoadMore
component, update your GraphQL query to fetch the first three products on product list page, and return the Load more button on the page.Your code should look like the following:
You can now click the Load more button to display additional products on the product list page:
Load more functionality
Step 3: Customize the product details page
Anchor link to section titled "Step 3: Customize the product details page"When you create a Hydrogen app, a ProductDetails
client component is automatically scaffolded in src/components
. A src/routes/products/[handle].server.jsx
file is also available, which contains the routing logic for product pages.
You can navigate from the product list page to the product details page:

Change text styling
Anchor link to section titled "Change text styling"You might want to update the color and size of the product title text that displays on your product details page.
In src/components/ProductDetails.client.jsx
, find all instances ProductTitle
and replace them with the following code:
The text color and size for the product title (The Hydrogen
) is updated:

Update and remove components
Anchor link to section titled "Update and remove components"You might want to update the Add to bag button to read Add to cart, and remove the Buy it now button.
In
src/components/ProductDetails.client.jsx
, find theAddToCartMarkup
component function:Replace the code with the following:
The product details page now shows the updated Add to cart button, and no longer displays the Buy it now button.

- Explore the source code of the example Hydrogen demo store in GitHub.
- Get familiar with React Server Components.
- Learn more about the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.