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.
• You're using API version 2023-07 or higher.

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 retrieve the data that's required to render the page. Loaders always run on the server and pass the returned data to your JSX component using the useLoaderData() hook. Hydrogen also provides a special storefront param to 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 Hydrogen React'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 through to the Unisex 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, but your collections are likely to have more than that. You can query up to 250 products, but doing so wouldn't be as performant.

Instead, the Storefront API uses cursors to query just one page at a time. Because cursors can be a bit tricky, we provide the Pagination component. This implementation maintains the pagination state in the URL, so that users can navigate to a product and return back to the same scrolled position in a list.

1. Update the loader to use getPaginationVariables. This generates an object with the keys first, last, startCursor, and endCursor. Pass those values into your Storefront API COLLECTION_QUERY. Make sure to also update the collection query to include pageInfo.

2. Update the ProductGrid component to use the Pagination component.

3. Add both Load more products and Load previous products to the ProductGrid.

• Learn how to build a product page.