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.

This workshop has been presented at React Advanced 2022, check out the latest edition of this React Conference.

FAQ

During the Hydrogen workshop, participants are guided through building a product display page using Hydrogen. This involves setting up a project, configuring API connections, and creating dynamic and static routes to display product data.

Hydrogen comes equipped with numerous built-in components and tools like the MediaFile component for handling images and videos, and Shopify provider components that abstract API interactions, simplifying the process of building ecommerce features.

Yes, the Hydrogen workshop provides a starter project that participants can customize. This project can be accessed and modified in StackBlitz, an online code editor, allowing developers to experiment and extend the project as needed.

In Hydrogen, server components (files ending in .server.jsx) render on the server, while client components (files ending in .client.jsx) run on the client side. Files ending in .jsx can run on both the server and client, depending on where they are included.

Hydrogen uses GraphQL for API queries. Developers can utilize GraphiQL, a graphical interactive in-browser GraphQL IDE, to test and build their queries. This helps in fetching data like product details from Shopify's Storefront API efficiently.

Hydrogen is Shopify's opinionated framework for building custom storefronts. It utilizes React server components for a seamless developer experience and enhanced performance, focusing on delivering fast and efficient websites.

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)
Mastering React Server Components and Server Actions in React 19
React Summit US 2024React Summit US 2024
150 min
Mastering React Server Components and Server Actions in React 19
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient applications.

Explore the world of React Server Components, seamlessly blending server-side rendering with client-side interactivity for unmatched performance and user experience. Dive into React Server Actions to see how they combine client-side interactivity with server-side logic, making it easier to develop interactive applications without traditional API constraints.

Get hands-on experience with practical exercises, real-world examples, and expert guidance on implementing these technologies into your projects. Learn essential topics such as the differences between Server and Client Components, optimizing data fetching, passing data effectively, and maximizing performance with new React hooks like useActionState, useFormStatus and useOptimistic.

Whether you're new to React or a seasoned pro, this workshop will equip you with the knowledge and tools to elevate your web development skills. Stay ahead of the curve and master the cutting-edge technology of React 19. Don't miss out - sign up now and unleash the full power of React!
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
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
React Summit US 2023React Summit US 2023
160 min
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.
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.

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 2023React Advanced 2023
27 min
Simplifying Server Components
Top Content
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
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 web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
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
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.