Skip to main content

Building Headless Storefronts on Shopify with Hydrogen

Scott Dixon

Your instructor
Scott Dixon

Workshop includes:

  • 🔖  Examples to take away
  • 🗣  Interactive sessions
  • 📺  Workshop recordings
  • 🎤  Dedicated Q&A time

Workshop, 1×1.5h + Q&A • Thu, March 17 2022
8:00 – 9:30 AM (London)• 9:00 – 10:30 AM (Berlin) • 4:00 – 5:30 PM (Singapore) • 7:00 – 8:30 PM (Sydney) • Check your time zone ⏰

Get hands-on with Hydrogen, a React-based framework powered by Shopify. In this workshop, we’ll explore the framework and get a custom storefront up and running. You’ll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.

Did you miss this free workshop? You can rewatch the workshop below or on our Vimeo page. Enjoy!

In this workshop, you’ll learn how to:

  • Generate a Hydrogen app and connect a Shopify Storefront.
  • Accelerate your development process by using Shopify’s foundational tech stack and commerce expertise.
  • Lean on Shopify-specific components, hooks, utilities and GraphQL fragments to rapidly build a custom storefront.
  • Use Hydrogen’s caching mechanisms to cache full pages and sub-requests.
  • Leverage React Server Components, streaming server-side rendering and Hydrogen’s caching API.

Who is this workshop for?

Anyone who is interested in building custom storefronts, or getting hands-on with React Server Components. To follow along, you should have a basic understanding of HTML, CSS and JS.

What hardware/software do you need?

You’ll need a Chromium-based browser to run StackBlitz. Try it out here: https://hydrogen.new.

About Scott Dixon

Scott’s a Developer Advocate at Shopify, located on the east coast of Australia. Formerly a Shopify app developer, developer bootcamp coach and software engineer. When he's not tinkering with code you'll find him checking the surf or hanging out with his family.

Time & Schedule

Join us on March 17. Our virtual doors open at 17:45, we start at 6 PM CET. Our timings worldwide:

  • 8:00 – 9:30 AM (London)
  • 9:00 – 10:30 AM (Berlin)
  • 4:00 – 5:30 PM (Singapore)
  • 7:00 – 8:30 PM (Sydney)

Program

17:45 PM CET
Virtual doors open, registration, chat, and introductions.

18:00 PM – 19:15 PM
We’ll be creating a Hydrogen app and connect a Shopify Storefront with Shopify-specific components, hooks, utilities and GraphQL fragments, to rapidly build a custom storefront.

We’ll also look into React Server Components, streaming server-side rendering and Hydrogen’s caching API.

19:15 PM – 19:30 PM
Q&A with Scott on the day’s material. Networking!