Build product pages with Hydrogen
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 learnAnchor 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
RequirementsAnchor 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.
Step 1: Create a product listAnchor 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 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
Add the following code to the file:
Add the product list to the homepageAnchor 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.
src/routes/index.server.jsx, replace the code with the following:
The homepage renders a list of products:
Step 2: Add a Anchor link to section titled "Step 2: Add a Load more button"
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
LoadMorecomponent is a client component because it contains client-side interactivity.
src/routes/index.server.jsx, import the
LoadMorecomponent, 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 pageAnchor 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/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 stylingAnchor 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.
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 componentsAnchor 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.
src/components/ProductDetails.client.jsx, find the
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.