Build product pages with Hydrogen

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

• 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.

A product list includes information about all of the products that the storefront offers.

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.

1. Create a new file under src/components called ProductList.jsx.

2. Add the following code to the file:

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:

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.

1. Create a new file under src/components called LoadMore.client.jsx.

   The LoadMore component is a client component because it contains client-side interactivity.

2. In src/routes/index.server.jsx, import the LoadMore 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:

   

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:

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:

You might want to update the Add to bag button to read Add to cart, and remove the Buy it now button.

1. In src/components/ProductDetails.client.jsx, find the AddToCartMarkup component function:

2. 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.