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.
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 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.
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 a 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. 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.
Update the query to determine whether there's a
nextPage. You'll also obtain the
endCursorand use the
afterargument to return elements that come after a specified cursor.
If there's another page, display a Load more products button.
Move the products into state and wire up the button to fetch the next page of products.
- Learn how to build a product page.