Build a Product Page with Shopify’s Hydrogen Framework

Rate this content
Bookmark

Get hands on with Hydrogen, a React-based framework for building headless storefronts. Hydrogen is built for Shopify commerce with all the features you need for a production-ready storefront. It provides a quick start, build-fast environment so you can focus on the fun stuff - building unique commerce experiences. In this workshop we’ll scaffold a new storefront and rapidly build a product page. We’ll cover how to get started, file-based routing, fetching data from the Storefront API, Hydrogen’s built-in components and how to apply styling with Tailwind.

You will know:

- Get started with the hello-world template on StackBlitz

- File-based routing to create a /products/example route

- Dynamic routing /products/:handle

- Hit the Storefront API with GraphQL

- Move the query into the Hydrogen app

- Update the query to fetch a product by handle

- Display title, price, image & description.

- Tailwind styling

- Variant picker and buy now button

- Bonus if there’s time: Collections page


Prerequisites: 

- A Chromium-based browser (StackBlitz)

- Ideally experience with React. A general web development background would be fine.

David Witt
David Witt
81 min
19 Oct, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hydrogen is Shopify's opinionated way of building a custom storefront, providing a great developer experience and fast site performance. It uses React server components for rendering and comes with built-in components and tools. The workshop covered file-based routing, querying with GraphQL, building a product display page, adding cart functionality, and rendering cart data. Hydrogen allows for quick app setup, easy customization, and no development maintenance, making it an efficient tool for building custom storefronts.

1. Introduction to Hydrogen Workshop

Short description:

David Witte, a Developer Advocate at Shopify, will guide us through building a product page using Hydrogen. The workshop will include 60 minutes of interactive learning and a Q&A session with the Hydrogen team. Hydrogen is a tool within the Shopify ecosystem that allows us to build custom websites and interact with Shopify's data using APIs. Follow along at shopify.github.io/workshops.

A good global representation here. So, without much further ado, I will hand it over to David. David Witte is a Developer Advocate here at Shopify. He's going to walk us through getting started with Hydrogen, how to build our product page, and then the last 30 minutes of this 90-minute session will be for questions and answers, and he's going to do this with his fellow teammates from Shopify.

So, David, over to you. And all the best. All right. Thank you, Mercy. So, welcome everyone. Welcome to this workshop. Thank you for joining me today. My name is David Witte, and I'm joining you from sunny Seattle, Washington. If you're not aware, my state is currently on fire, so the air quality is really bad and it's affected my voice a little bit. So, I apologize if my voice goes in and out of it. I'm going to try and talk at a little bit of a lower register, but hopefully I can make it through this hour. With me today, we have Brett, we have Daniel, and we have Matt, who are part of the Hydrogen team. And they'll be fielding the Q&A at the end of this workshop. But we're going to start with 60 minutes of an interactive workshop where we together build a product display page. So, let's get started.

So, a little bit about me. My name's David Witt, and I'm a developer advocate with Shopify. I've been with Shopify since the end of July, so I'm relatively new. But I've been working on learning Hydrogen, and I'm really excited to teach Hydrogen to developers like yourselves today. Pictured here is me with my dog, Lucy. She's sitting on the couch, and I'm sitting on the floor, and to her, that is the rightful place of where things should be. So, if you can relate to that, send me a pet pic over to my Twitter handle. I'd love to see and share pet pics with you.

So, let's talk about the workshop. Today, we're going to be building a product display page in Hydrogen, and we'll talk about what Hydrogen is and how it fits into the Shopify ecosystem. But this is just a preview of where we're going to end up today. All of this data is stored within Shopify, and we're going to use an API to query that data and build a custom website where we can interact with it and buy a product, which will take us to Shopify's checkout. So, let's dive in. If you want to follow along, head on over to this URL, shopify.github.io, slash workshops. These workshops will be available after the event, too, so if you'd just like to listen and follow along as I do this, that's fine. You can try doing it in your own time, or if you do want to follow along, you can go at your own pace and catch up at any point. I'll try and pace this out so you should be able to follow along. But I understand that there's a lot of information coming to you all at once. So it is OK to take a step back and do this in your own time. So I'm gonna exit out of this and switch on over to my workshop page. And in the workshop page, we'll see that we have a bunch of different workshops that are available. I encourage you to explore those within your own time. There's a lot of interesting stuff that we're trying to teach, and this is a new method that we're going about teaching, so please let us know what you think of this. But the workshop we'll be starting with is the Create a Product page with Hydrogen workshop. So I'll click Start and we're gonna start at step one. So we'll take a step back and just talk about custom storefronts for a moment. So when you think of Shopify, most people think of the headed solution where a user signs up for an account, they're able to select a theme and select some apps and, you know, configure some styles and markup, and then Shopify serves them that storefront. That's one way to use Shopify. And it's great because it provides a lot of structure, and you get a lot of really nice things out of the box. But we wanted to provide an option for something that might break outside that box. Or maybe you just want to bring your own head to an API-based storefront.

2. Hydrogen Workshop: Introduction and Configuration

Short description:

Hydrogen is Shopify's opinionated way of building a custom storefront. It's designed for a great developer experience and fast site performance. It uses React server components for server-side and client-side rendering, providing a fast time to first byte. Hydrogen comes with built-in components and tools that make development efficient. Configuration is done in hydrogen.config.js, where the storefront domain, token, and API version are specified. The app.server.jsx file wraps the entire app in a Shopify provider component, allowing us to query the storefront API using hooks.

And so custom storefronts allow you to do that. So hydrogen is really just Shopify's opinionated way of building one of those custom storefronts. So we'll talk a little bit more about what hydrogen is in just a moment. But I want to get everyone started with the project that we'll be working on, which is a StackBlitz project. So in Step 1, if you click on this link, that will open up a StackBlitz project for you. And then up in the top left corner, if you click on the fork button, that will give you your own instance of this starter project. So over on the right-hand side, I'll see that my booting web container is stuck. So if I refresh my page, that should get me unstuck, and I should be able to see that the start command runs, and I'll see a preview of my app over here. So if you're not familiar with StackBlitz, it's a code editor that serves everything from within a web browser. So it's a really nice way for you to play around with hydrogen and get started with just the click of a button. So over in the left-hand panel, we have File Explorer. The center panel is going to be our code editor. Down at the bottom, we have a terminal, and on the right-hand side, we have our preview window. So it's everything that we need to get started and build with hydrogen. So I'll pop back over to the workshop and just talk a little bit about hydrogen. So as I mentioned, hydrogen's Shopify's opinionated way of building a custom storefront. It's designed to be a great developer experience, but it's also designed to make your sites really fast. And under the hood, it's using React server components, which allow for using components both on the server and on the client, and it provides streaming server-side rendering. Hydrogen's also really fast in that you can run it at Edge servers, so you get a really fast time to first byte. Hydrogen is great because it comes built with a lot of components and tools that make developing really fast and really efficient, and we'll explore some of those tools in this workshop. So I'm going to head back over to my StackBlitz project and the first thing I'll do is just show a couple of configuration pieces that get our storefront started. So I'm going to open hydrogen.config.js and this is going to be where I configure which storefront my project is referencing. So this is kind of how we set up our API. So I just specify the domain, a storefront token and an API version. For our purposes, today, we just have a demo store workshop where we'll be querying data from. So once this configuration is defined, it is consumed over an app.server.jsx, which is going to be kind of the core root component of our app. And so you'll see that our entire app is wrapped in a Shopify provider component. And that provider component is going to consume the config file and then give us hooks so that we can query the storefront API. So that abstracts some of the some of the pieces away from us and gives us a nice interface using the provider and hook paradigm.

QnA

Watch more workshops on topic

Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
React Summit 2023React Summit 2023
139 min
Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
React Advanced Conference 2023React Advanced Conference 2023
153 min
React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
Workshop
Maurice de Beijer
Maurice de Beijer
Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
Throughout the workshop, we'll cover essential topics, including:
- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
Workshop level: 
No matter your current level of React expertise, this workshop will equip you with the knowledge and tools to take your web development game to new heights. Don't miss this opportunity to stay ahead of the curve and master the cutting-edge technology that's changing the face of web development. Sign up now and unleash the full power of React Server Components!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplifying Server Components
React Advanced Conference 2023React Advanced Conference 2023
27 min
Simplifying Server Components
Top Content
Server Components are arguably the biggest change to React since its initial release but many of us in the community have struggled to get a handle on them. In this talk we'll try to break down the different moving parts so that you have a good understanding of what's going on under the hood, and explore the line between React and the frameworks that are built upon it.
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!