- Building a collection page
-
Introduction
-
GraphQL explorer and query setup
-
Integrating queries
-
Storefront activity lab: GraphiQL practice
-
Knowledge check
-
Displaying collections and images
-
Storefront activity lab: Collection description display practice
-
Routes and search engine optimization
-
Storefront activity lab: Boost your SEO
-
Rendering products within collections
-
Pagination
-
Collection page recap & job aid
-
Knowledge check
- Building a product page
-
Introduction to building a product page
-
Setup, data fetching, and display
-
Knowledge check
-
Enhancing the user experience
-
Knowledge check
- Building a cart
-
Introduction to building a cart
-
Setting up your cart
-
Explore cart components
-
Storefront activity lab: Integrating your cart
- Wrap up
-
Building the foundation
-
Course Feedback
Build a Custom Storefront with Hydrogen
Discover how to build essential ecommerce storefront pages using Hydrogen and the Mock.shop API.
Discover how to build essential ecommerce storefront pages using Hydrogen and the Mock.shop API, with step-by-step instructions to create a collection page, product page, and a functional cart.
By the end of the course you'll have the tools and knowledge to:
- Create a collection page with Hydrogen.
- Create a product page with Hydrogen.
- Build a cart with Hydrogen.
- Create an account management page with Hydrogen.
- Identify the steps to launch a Hydrogen site.
How to get started
You can go through this course at your own pace and on any device. For information about minimum technology requirements to access courses and assessments, navigate to our Help page.