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 Conference 2022, check out the latest edition of this React Conference.

FAQ

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.

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.

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 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.

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