Build a collection page
Previously, you fetched data from your storefront, including your store’s name and collections. Your home page is rendering a featured collections section. You’re now ready to build a collection page.
In this tutorial, you'll build a page that renders a collection and products that belong to the collection.
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:
- Create a collections route to familiarize yourself with Hydrogen’s file-based routing system.
- Query collections by their handle.
- Generate SEO tags for collection pages.
- Implement Shopify Analytics on collection pages.
- Fetch products that belong to a collection.
Requirements
Anchor link to section titled "Requirements"- You’ve completed Fetch storefront data.
Sample code
Anchor link to section titled "Sample code"If you want to quickly get started, then you can copy and paste the following code from each file into the corresponding files in your Hydrogen app. If the file doesn’t yet exist, then you can create it in your Hydrogen app. This tutorial describes the sample code step by step:
Step 1: Create a collections route
Anchor link to section titled "Step 1: Create a collections route"All components added to the src/routes directory in your Hydrogen app are registered as routes. Any filenames with brackets, like [handle], are converted to a route parameter called :handle.
To begin building your collection page, create a file called /src/routes/collections/[handle].server.jsx to register a new collections route. Then, display the dynamic handle on the page within the layout component.
The collections route is registered. Clicking a featured collection from the home page takes you to a dynamic collection page:
Step 2: Query a collection by handle
Anchor link to section titled "Step 2: Query a collection by handle"You can use a collection’s handle to query a collection. A handle is a unique string that identifies a resource, such as a collection. If a handle isn't specified when a collection is created, then the handle is generated from the collection's original title, replacing any spaces with hyphens. For example, a collection that was created with the title Freestyle collection might have the handle freestyle-collection.
In /src/routes/collections/[handle].server.jsx, add a GraphQL query that retrieves a collection by its handle:
The collection page renders the following dynamic content:
Step 3: Generate SEO tags and implement Shopify Analytics
Anchor link to section titled "Step 3: Generate SEO tags and implement Shopify Analytics"In Step 4 of the previous tutorial, you added an SEO component to your Layout component, which allowed you to generate a series of default SEO tags in the <head> tag. In this step, you'll generate SEO tags that are specific to the collections page.
You'll also implement Shopify Analytics to send commerce-related analytics to Shopify. By adding the ShopifyAnalytics component to your Hydrogen storefront, you can view key sales, orders, and online store visitor data from the Analytics dashboard in your Shopify admin.
If you inspect the dynamic collection page, then you can find the collection SEO tags that have been added into the <head> tag. The collection's title and description display on the page:
Step 4: Query products and variants
Anchor link to section titled "Step 4: Query products and variants"Products are the goods, digital downloads, services, and gift cards that a merchant sells. If a product has options, like size or color, then merchants can add a variant for each combination of options. For example, a snowboard might be available for purchase in blue and green. The blue snowboard and the green snowboard are variants.
Create a
ProductCardcomponent to display the title, price, and image of each product within the collection:Update the collection GraphQL query to include retrieving products and variants that belong to the collection:
The page renders the following products that belong to the collection:
- Learn how to build a product page.