Building with Hydrogen for Beginners

Join Shopify’s Senior Trainer, Rowena Foo, for an immersive training experience focused on Shopify’s opinionated headless stack.

Not currently available

rate limit

Code not recognized.

Shopify Academy Live

April 8-10 2025, 11am-1pm CT

Limited to 8 spots

Register by April 7

About the training

Designed for front-end developers, this three-day virtual training program will equip you with the skills to create high-performing custom Shopify storefronts.

The training will introduce you to Shopify's headless framework, Hydrogen, through hands-on learning that focuses on Remix/React Router as the underlying foundation. You'll gain practical experience using Hydrogen’s components, utilities, and design patterns, as well as deploying to Shopify's hosting solution, Oxygen.

This introductory course addresses common challenges in building a headless storefront, including inefficiencies in data retrieval, enhancing user experience, and selecting the best tech stack for various business needs.

By registering for and participating in this training program, you acknowledge and agree that this training session may be recorded for educational, evaluative, and promotional purposes. If you do not wish to be recorded, you acknowledge that it is your responsibility to communicate this before the start of the session.

What you'll learn

  • An introduction to headless and Hydrogen: Gain a deep understanding of Shopify's storefront tech stack and discover the power of Hydrogen for creating custom storefronts.
  • Remix and React Router: Streamline your routing and data flow with a full-stack framework.
  • Optimistic UI and progressive enhancements: Learn to build for perceived speed and applications that perform under limited network and JavaScript support.
  • Oxygen: Deploy seamlessly using Oxygen, while integrating smoothly with GitHub for efficient workflows.
  • Liquid vs. Hydrogen: Dive into a comparative analysis of Shopify's store-building solutions and understand the nuances that make Hydrogen the right choice.

Agenda

April 8

11:00am – 1:00pm CST

What's included

  • Intro to Headless & Hydrogen: Storefronts tech stack overview
  • Intro to Remix / React Router: Routing and full-stack data flow

April 9

11:00am – 1:00pm CST

What's included

  • Optimistic UI: Building for perceived speed 
  • Progressive Enhancements: Building functional applications regardless of network quality and JavaScript support

April 10

11:00am – 1:00pm CST

What's included

  • Deploy with Oxygen: Integrate with GitHub and setup deployment workflow 
  • Liquid vs. Hydrogen: Explore the nuances of Shopify’s storefronts tech stack

About the instructor

Rowena Foo is a passionate and experienced technical instructor dedicated to creating safe spaces for developers to practice new skills. Rowena's approach to training is informed by her key strengths, including humor, creativity in translating complex technical concepts into digestible content, and presenting herself in a genuine way.

Prior to Shopify, Rowena delivered developer training to Enterprise organizations and later led the internal technical enablement content strategy at GitHub.

Prerequisites

  • Intermediate proficiency with front-end languages (HTML, CSS, JavaScript / TypeScript) and APIs.
  • Intermediate proficiency in React framework, e.g. .jsx / .tsx, hooks, state management, component lifecycle, context API & error boundaries.
  • Basic git concepts (e.g. clone, commit, push), understanding of branching, and using GitHub features (e.g. opening PRs)

Note: This training will use the .jsx syntax for React development. However, if you are more familiar with .tsx (TypeScript), we will provide code samples and clear explanations so you can follow along.

Technology requirements

  • Stable internet and ability to join video calls
  • A GitHub account
  • (Optional) A store that could install the Hydrogen sales channel, which includes Plus sandbox store OR Development store in a Plus org OR Store with at least a basic plan
Join the waitlist
Be the first to know when this training becomes available.
Use a valid email
Thank you for joining the waitlist! We'll notify you when this training becomes available.

Frequently asked questions

Where is the training held?

This is a virtual event. Meeting links will be provided after purchase, and the instructor will also add you to the event invite.

Is this training for Partners or merchants?

Both! This training is suitable for any developers that work within the Shopify ecosystem.

Will I receive a badge after completing this training?

Yes, you will receive a completion badge if you attended the entire training and submitted a feedback form at the end of the training.

Can the training be counted towards Partner Program tiers?

No, the completion badge does not count towards any program tiers though you may share the accomplishment on various channels.

Curriculum

  • Curriculum
  • Events
  • Post-training survey

Shopify Academy Live

April 8-10 2025, 11am-1pm CT

Limited to 8 spots

Register by April 7

About the training

Designed for front-end developers, this three-day virtual training program will equip you with the skills to create high-performing custom Shopify storefronts.

The training will introduce you to Shopify's headless framework, Hydrogen, through hands-on learning that focuses on Remix/React Router as the underlying foundation. You'll gain practical experience using Hydrogen’s components, utilities, and design patterns, as well as deploying to Shopify's hosting solution, Oxygen.

This introductory course addresses common challenges in building a headless storefront, including inefficiencies in data retrieval, enhancing user experience, and selecting the best tech stack for various business needs.

By registering for and participating in this training program, you acknowledge and agree that this training session may be recorded for educational, evaluative, and promotional purposes. If you do not wish to be recorded, you acknowledge that it is your responsibility to communicate this before the start of the session.

What you'll learn

  • An introduction to headless and Hydrogen: Gain a deep understanding of Shopify's storefront tech stack and discover the power of Hydrogen for creating custom storefronts.
  • Remix and React Router: Streamline your routing and data flow with a full-stack framework.
  • Optimistic UI and progressive enhancements: Learn to build for perceived speed and applications that perform under limited network and JavaScript support.
  • Oxygen: Deploy seamlessly using Oxygen, while integrating smoothly with GitHub for efficient workflows.
  • Liquid vs. Hydrogen: Dive into a comparative analysis of Shopify's store-building solutions and understand the nuances that make Hydrogen the right choice.

Agenda

April 8

11:00am – 1:00pm CST

What's included

  • Intro to Headless & Hydrogen: Storefronts tech stack overview
  • Intro to Remix / React Router: Routing and full-stack data flow

April 9

11:00am – 1:00pm CST

What's included

  • Optimistic UI: Building for perceived speed 
  • Progressive Enhancements: Building functional applications regardless of network quality and JavaScript support

April 10

11:00am – 1:00pm CST

What's included

  • Deploy with Oxygen: Integrate with GitHub and setup deployment workflow 
  • Liquid vs. Hydrogen: Explore the nuances of Shopify’s storefronts tech stack

About the instructor

Rowena Foo is a passionate and experienced technical instructor dedicated to creating safe spaces for developers to practice new skills. Rowena's approach to training is informed by her key strengths, including humor, creativity in translating complex technical concepts into digestible content, and presenting herself in a genuine way.

Prior to Shopify, Rowena delivered developer training to Enterprise organizations and later led the internal technical enablement content strategy at GitHub.

Prerequisites

  • Intermediate proficiency with front-end languages (HTML, CSS, JavaScript / TypeScript) and APIs.
  • Intermediate proficiency in React framework, e.g. .jsx / .tsx, hooks, state management, component lifecycle, context API & error boundaries.
  • Basic git concepts (e.g. clone, commit, push), understanding of branching, and using GitHub features (e.g. opening PRs)

Note: This training will use the .jsx syntax for React development. However, if you are more familiar with .tsx (TypeScript), we will provide code samples and clear explanations so you can follow along.

Technology requirements

  • Stable internet and ability to join video calls
  • A GitHub account
  • (Optional) A store that could install the Hydrogen sales channel, which includes Plus sandbox store OR Development store in a Plus org OR Store with at least a basic plan
Join the waitlist
Be the first to know when this training becomes available.
Use a valid email
Thank you for joining the waitlist! We'll notify you when this training becomes available.

Frequently asked questions

Where is the training held?

This is a virtual event. Meeting links will be provided after purchase, and the instructor will also add you to the event invite.

Is this training for Partners or merchants?

Both! This training is suitable for any developers that work within the Shopify ecosystem.

Will I receive a badge after completing this training?

Yes, you will receive a completion badge if you attended the entire training and submitted a feedback form at the end of the training.

Can the training be counted towards Partner Program tiers?

No, the completion badge does not count towards any program tiers though you may share the accomplishment on various channels.

Curriculum

  • Curriculum
  • Events
  • Post-training survey