Build a Collection Page with Hydrogen

You want to present a grouping of products on your storefront. For example, you might have a collection for a specific type of product that you sell, such as snowboards. Collections help you organize your products and make it easier for customers to browse your store.

In this tutorial, you’ll learn how to do the following tasks:

• Fetch data from the Storefront API
• Display collections on the home page
• Create a collections route
• Query collections by their handle
• Generate SEO tags for collection pages
• Render products that belong to a collection
• Implement pagination

You’ve completed Begin developing a Hydrogen storefront.

When you're running the Hydrogen local development server, you can load an interactive GraphQL Playground where you can explore the Storefront API and run test queries.

1. With your development server running, visit the following URL: http://localhost:3000/graphiql

2. Run the preset query (press the play button) to fetch the Shop name.

3. Update the query to fetch the first three collections and run the query again.

To load data into your Hydrogen app, use a Remix loader and copy over your GraphQL query. Loaders are functions that get the data that's required to render the page. They always run on the server and pass their returned data to your JSX component using the useLoaderData() hook. Hydrogen also provides a special storefront param to easily make queries against your Shopify storefront.

Log the data to make sure everything’s working. You should see the first three collections in the console when you visit the home page.

Update the component to display collection titles and use the Link component to link to each collection.

Remix loads a full page when you navigate to it. By using the Link component (instead of a traditional <a href="...">, React Router will handle page updates and unlock the performance benefits of client-side routing.

Update the GraphQL query to fetch collection images and render them using the Storefront Kit’s Image component.

You’re listing collections on the home page but the links are broken! In this step, we’ll create a collections route.

1. Create a route to catch requests to /collections/[some-collection-handle]. To do this, create a app/routes/collections/$handle.jsx file. Learn more about routing in Remix.

2. Click a collection from the home page and you’ll be taken to your new collection page:

   

3. To look up collection details, you'll use a loader to destructure the collection handle from the URL parameters and pass it to the Storefront API:

   

Traditionally, Remix looks for a meta export to set tags like title and description. Hydrogen offers a convenient Seo component to automatically generate additional tags and allow for more granular metadata. This component will use the handle > seo export instead and infer the correct meta tags for you.

1. Import and render the Seo component in the root component:

2. Export a handle with an seo function from the collections page:

Using developer tools, you can see examples of the metadata that Hydrogen's generated. Learn more about the Seo component.

1. Create a ProductCard component that displays a product's title, image, and price:

2. Create a ProductGrid component to render a ProductCard for each product:

3. Add the ProductGrid to the collection page and pass the collection's products and URL as props.

   You'll require the props in a subsequent step.

   

In this step, you'll add a Load more products button to the bottom of the collection page.

You're currently fetching the first four products. You can retrieve the next four products by storing the endCursor, to keep track of the last product retrieved. Learn more about cursor-based pagination.

1. Update the query to determine whether there's a nextPage. You'll also obtain the endCursor and use the after argument to return elements that come after a specified cursor.

2. If there's another page, display a Load more products button.

3. Move the products into state and wire up the button to fetch the next page of products.

• Learn how to build a product page.