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 learn
Anchor 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
Requirements
Anchor link to section titled "Requirements"You’ve completed Begin developing a Hydrogen storefront.
Step 1: Visit the GraphQL playground
Anchor 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 App
Anchor 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 page
Anchor 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 images
Anchor 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 route
Anchor 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 aapp/routes/collections.$handle.jsx
file. 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: SEO
Anchor link to section titled "Step 6: SEO"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.
Import and render the
Seo
component in the root component:Export a
handle
with anseo
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.
Step 7: Render products
Anchor link to section titled "Step 7: Render products"Create a
ProductCard
component that displays a product's title, image, and price:Create a
ProductGrid
component to render aProductCard
for each product: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.
Step 8: Pagination
Anchor 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 theendCursor
and use theafter
argument 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.