Build a custom storefront with Hydrogen

Build a custom storefront with Hydrogen

Discover how to build essential ecommerce storefront pages using Hydrogen and the Mock.shop API.

rate limit

Code not recognized.

About this course

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. 

Curriculum

  • Building a collection page
  • Introduction
  • GraphiQL 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

About this course

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. 

Curriculum

  • Building a collection page
  • Introduction
  • GraphiQL 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