Build a Collection Page with Hydrogen
Previously, you began developing a Hydrogen storefront. You have a minimal Hydrogen storefront running locally. You’re now ready to fetch data from your storefront and build a collection page.
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.
What you’ll learnAnchor link to section titled "What you’ll learn"
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
RequirementsAnchor link to section titled "Requirements"
- You’ve completed Begin developing a Hydrogen storefront.
- You're using API version 2023-07 or higher.
Step 1: Visit the GraphQL playgroundAnchor link to section titled "Step 1: Visit the GraphQL playground"
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.
With your development server running, visit the following URL: http://localhost:3000/graphiql
Run the preset query (press the play button) to fetch the Shop name.
Update the query to fetch the first three collections and run the query again.
Step 2: Move the query into your Hydrogen AppAnchor link to section titled "Step 2: Move the query into your Hydrogen App"
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.
Step 3: Display collections on the home pageAnchor link to section titled "Step 3: Display collections on 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.
Step 4: Display collection imagesAnchor link to section titled "Step 4: Display collection images"
Update the GraphQL query to fetch collection images and render them using Hydrogen React's Image component.
Step 5: Create a collections routeAnchor link to section titled "Step 5: Create a collections route"
You’re listing collections on the home page but the links are broken! In this step, we’ll create a collections route.
Create a route to catch requests to /
collections/[some-collection-handle]. To do this, create a
app/routes/collections.$handle.jsxfile. Learn more about routing in Remix.
Click through to the Unisex collection from the home page and you’ll be taken to your new collection page:
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:
Step 6: SEOAnchor link to section titled "Step 6: SEO"
Traditionally, Remix looks for a
meta export to set tags like
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.
Import and render the
Seocomponent in the root component:
seofunction from the collections page:
Using developer tools, you can see examples of the metadata that Hydrogen's generated. Learn more about the
Step 7: Render productsAnchor link to section titled "Step 7: Render products"
ProductCardcomponent that displays a product's title, image, and price:
ProductGridcomponent to render a
ProductCardfor each product:
ProductGridto the collection page and pass the collection's products and URL as props.
You'll require the props in a subsequent step.
Step 8: PaginationAnchor link to section titled "Step 8: Pagination"
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.
Update the loader to use
getPaginationVariables. This generates an object with the keys
endCursor. Pass those values into your Storefront API
COLLECTION_QUERY. Make sure to also update the collection query to include
ProductGridcomponent to use the
Add both Load more products and Load previous products to the
- Learn how to build a product page.