Build product pages in Hydrogen

Previously, you created a Hydrogen app. 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 app. Your final app will be simple, but you'll learn where to find resources to build more complex features on your own.

What you'll learn

After you've finished this tutorial, you'll be able to do the following:

• Edit the layout component to define the structure of a page
• Display a list of products in a grid on your app's homepage
• Add a Load more button to the product list page
• Customize the product details page

Requirements

• You've completed the Create a Hydrogen app tutorial to begin coding off of the Hydrogen starter template.
• You have an integrated development environment (IDE) installed on your computer, such as VSCode or Atom.

Step 1: Edit the layout component

You can start building product pages by editing the layout component in your Hydrogen app. The layout component defines a structure and organization of a page. By defining your layout logic in one place, you can use it in different parts of your app.

When you create a Hydrogen app, a Layout.server.jsx server component is automatically scaffolded in src/components. This is a server component because it doesn't include any client-side interactivity and it makes a call to the Storefront API.

In Layout.server.jsx, replace the code with the following:

Step 2: Create a product list

A product list includes information about all of the products that the storefront offers. You can create a product list so that buyers can look for and view products on a storefront.

Edit the ProductCard component

A product card is used to display a single product. It allows buyers to quickly identify a particular item of interest.

When you create a Hydrogen app, a ProductCard shared component is automatically scaffolded and available in src/components. Shared components are more flexible in that they can be used by both client and server components.

In src/components/ProductCard.jsx, replace the code with the following:

Add a ProductList component

After you've updated the ProductCard component, you can use the component as part of a new ProductList component. Similar to the ProductCard component, 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:

Add the product list to the homepage

After you've defined your Layout and ProductList components, you can use the components on different pages in your app. For example, you might want to add your product list to your app's homepage.

In src/pages/index.server.jsx, replace the code with the following:

The homepage renders a list of products:

Add a Load more button

You might want to initially only show 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/pages/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:

   

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/pages/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

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 Product.Title and replace them with the following code:

The text color and size for the product title (The Hydrogen) is updated:

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.

1. In src/components/ProductDetails.client.jsx, find the following code:

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.

   

Next steps

• Learn how to build a cart in your Hydrogen app.
• Explore example Hydrogen implementations in GitHub.
• Get familiar with React Server Components.
• Learn more about the Shopify-specific commerce components, hooks, and utilities included in Hydrogen.