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 quickly. You'll learn how (and when) to leverage React Server Components and caching mechanisms to build fast, dynamic, custom storefronts.
Building custom storefronts on Shopify with Hydrogen
AI Generated Video Summary
This workshop introduces Shopify's Hydrogen, a React-based framework for building headless storefronts. Hydrogen offers fast client-side rendering, flexible caching, and a simplified development process. It uses file-based routing and allows for dynamic routes. The workshop covers querying the Storefront API with GraphiQL, using GraphQL queries in Hydrogen, and accessing product details. It also demonstrates the use of the product options provider, the cart provider, and the add to cart button. Hydrogen is recommended for larger merchants and provides scalability and flexibility for building e-commerce stores.
1. Introduction to Shopify's Hydrogen
Welcome to the workshop on building headless storefronts using Shopify's Hydrogen. I'm Megan, a dev advocate at Shopify, and I'm excited to share this latest workshop with you. I'm Abe, another developer advocate, here to support Megan and answer any questions you may have. Let's get started!
So, let's dive right in. All right, cool. Well, welcome, everybody. As the title slide says, and I'm sure you know since you signed up for this workshop, we're gonna be going over building headless storefronts using Shopify's new tool called Hydrogen. We'll kind of get some hands-on coding today, but I'm super excited to be sharing with you this workshop because it's kind of the latest from Shopify and React.
I'm Megan. You can find me on Discord, Twitter, YouTube. I'm a dev advocate here at Shopify. So, I'm pretty active in the community. So, feel free to say, hi, if you kind of see me around. So, part of my team work focuses on kind of bringing you guys workshops like this one and highlighting some of the other cool things that Shopify is doing, as well as kind of hearing from you guys and understanding what you're interested in Shopify doing and seeing all the cool stuff that the community is building.
And I'm Abe. I'm also a developer advocate at Shopify. My job is mostly to let Megan do her job and then show up to actually give the talk and act like I did any of the work to prepare for it. Similarly, I flirt around on various socials. I do have a Twitter account and things like that, but I wouldn't recommend following me because I don't tweet anything interesting. But I'm around. You'll see me pop up in all sorts of different Shopify related resources. And, of course, you can always shoot me an email if you have any specific questions or thoughts either about the workshop or anything Shopify developer related in general. Always happy to chat or route your question to someone who has a better answer than I do.
2. Introduction to Hydrogen
Today we'll be using Hydrogen to build a product page. Hydrogen is a framework that Shopify recently released, allowing you to put a head on top of the headless APIs. It's a React-based framework with utilities to simplify building an e-commerce store. Hydrogen powers personalized, dynamic e-commerce sites using React server components, streaming server-side rendering, and flexible cache policies.
Cool. So today we'll be using Hydrogen to build a product page. What you'll learn is some major features that Hydrogen has developed to help you ship and build fast. And by the end of the workshop, we'll get hands on, we'll do some coding. You'll check out some of the tools that Shopify has developed to help you rapidly build a custom storefront. And hopefully by the end, there'll be some time for Q&A. But if you have any questions, feel free to put them in the chat as we go through and we'll try to tag team and get through them there as well.
So let's get into it. Abe, you want to kick us off? Yeah. So, for anyone who's not familiar, Hydrogen is a framework that Shopify recently released. Basically, what it is, is a way for you to put a head on top of the headless APIs that Shopify offers. When a lot of people see Shopify, they think of people who go into our public interface and design a shop using the drag and drop interface and kind of pick a theme from the store, things like that, kind of just customizing off the shelf e-commerce experiences. But Hydrogen is a very different approach. We offer all these APIs that basically let you do everything that we can do with your store, you can do through an API. And then Hydrogen lets you build any UI you want on top of that. So we're going to get into it a bit here, but the important parts are, it's a React based framework. So it'll be familiar to anyone who's worked with React, with a bunch of cool helpers and utilities to help building a Shopify powered store. E-commerce in general is like super hard and you'll see here that, like, we've tried to pull together a bunch of utilities and helpers and things that are kind of like the common use cases for building a store. You know, you need like a cart, you need product pages, you need all these different little components, like different versions or variants that we'll talk about. So, you know, if you have a product that has different colors or things like that, all of this is pretty generic to e-commerce. And this is kind of the problem Hydrogen is hoping to solve. Simplify the problem, make building an e-commerce store easier, but still give you the absolute maximum amount of power you could need to do whatever crazy type of store you want to do.
Yeah, so as I was just saying, Hydrogen is built to power personalized, dynamic e-commerce sites. And to do this, we have three separate strategies that kind of work together. They are React server components, streaming, server-side rendering, which for me is a mouthful. So if I start slurring that, I apologize. That's what I mean. Streaming, server-side rendering and the final one is flexible cache policies. Let's talk details about each of these. So React server components. Maybe you heard about this with React 18. It's prominently featured in Hydrogen and it's like kind of the new up and coming React topic. It's not the same as server-side rendering. I know it's like a little bit confusing. I actually thought they were the same thing for a while until I started digging into Hydrogen and how we make use of it. But server components allow both the server and the client, meaning the browser, to collaborate together when rendering your React application. So if you think about your typical React application, this is like an element tree of React components that are including more React components, and it's all kind of loaded and done on the browser side. React server components make it possible for some of those components in the tree instead to be rendered by the server. And then you can push off some of the work to the server side and still have some client rendered components by the browser. This has a couple of advantages. The first one is, of course, your server has more direct access to your data sources, so things like your database, GraphQL, endpoints, or even your file system, things like that. The server can directly fetch the data that you need and it doesn't have to go through an API endpoint like your client side would normally have to. So this makes your app faster and also more secure because you don't have to go through that API layer. And if you have a lot of heavy code modules, so maybe, for example, you have like an expensive date formatting library or something like that, you can use that on your server component. So that means the library that you're using that might be a little big and bloated stays on your server, doesn't ever need to be transferred to your client. So you reduce your overall bundle size and also help the speediness of the loading. One thing to understand while we're kind of talking about this topic is server components, like we said, can fetch data and access the system or maybe your file system, but you cannot store state or have any context in these components. So if you need access to a state or context or anything like that, that's when you would have to bring in a client component because that work is obviously done on the browser. This next topic that we've included, the streaming server side, rendering server side, rendering is not itself a new component, but in react18. There's a new SSR API powered by suspense, and this really kind of unlocks a lot of cool features for server side rendering, so it eliminates data fetching waterfalls.
3. Hydrogen's Features and Development
Hydrogen provides a fast first bite on the client side by using streaming SSR and suspense architecture. SSR enables progressive hydration, allowing components to be rendered at different times. Hydrogen also offers flexible caching mechanisms, allowing you to cache individual requests or entire pages. The stale while revalidate option ensures a balance of speed and freshness. Hydrogen aims to make development fast with foundational tech stack pieces, quick start guides, and pre-built components for common use cases.
So if you think of the old kind of way, waterfall is where each request you have to wait for the prior one to complete before you can kick off the next one. If you use the streaming SSR and suspense architecture, you can kind of chunk up and tuck away a lot of those data fetches in your server rendered application without having to use the waterfall or without having to wait for the waterfall. So this gives you really fast first bite on your client side, so your shell can render react 18, start streaming your HTML to the browser. While this happens, your data in the background is being fetched. So you can have various load states for each of your different components. Whereas prior to this, you had to either render everything on the server, right? Which is the waterfall way. It's very slow time to first bite. Or before we introduced this architecture, you would have to kind of do everything on the client, which maybe that was fast time to first bite, but it introduced a lot of back and forth between your client and your server. You had to fetch everything in different requests. This strategy helps us kind of eliminate both of those problems.
And finally, with SSR, we have a progressive hydration. So this is a streamed response that comes to the client. This means that you don't have to wait for all of your requests to be resolved, like we mentioned, and each component can be rendered at a different time. So for example, a buy button can be interactive and loaded on the page before maybe your product reviews load if those are taking a little longer. And the last thing that we're going to talk about is flexible cash policies. So hydrogen shifts with some clever caching mechanisms. You can either cache entire pages or even down to individual requests. So if you think about an overall like e-commerce product page, this probably needs multiple requests to get all the information that you need, maybe product details, product reviews, maybe you're pulling in social media or something like that. You can cache each of those requests individually as you see fit. So maybe you want the product details to say super fresh. So you only cache those for one minute, whereas maybe you don't get product reviews that often. So you could stretch out that cache for that specific call a little bit longer. And if you have a page that doesn't change often at all. So think like blog posts about us, contact us, anything, you know, that's a little bit more static, you can cache that entire page if you want to. You can cache that entire page if you want to using some of our hydrogen built in policies. And the last thing on this point is we have also included a stale while revalidate option, which this means you can return the stale data immediately. So the client doesn't have to wait for an API call to finish. And then in the background, you can asynchronously regenerate the fresh data and reload the page once it's done. So that way you kind of get the balance of speed where your page loads right, right away. And then in the background, you get that freshness covered as well.
So not only have we made hydrogen fast for your clients, right? So for the customers who are loading your hydrogen sites, we've also tried to make hydrogen development fast for our developers. We kind of included some foundational tech stack pieces and have provided some quick start guides so that you can get started fast and get building right away. We've also included some specific components like hooks and utilities and things that work really well with React so that you don't have to kind of reinvent the wheel every time. We've covered some of those common use cases for you as well.
All right, let's do some coding. Let me do a very smooth transition here over to our Doc of Steps. I'll go ahead and share this link in the chat, and if we can mirror that over to the Discord that would be great. So this doc is pretty much what we're going to go through. It should have links to everything, all the code snippets you need. You can follow along as well. We'll talk through it and everything. But this is pretty much a standalone tutorial. You could you could just read and do yourself. We'll be going through here and walking through it for the rest of the workshop. But feel free to come back to this later bookmarked or whatever, it's not going anywhere. So like we talked about at the beginning of this workshop, we're basically gonna go and build up a very simple custom storefront. We're going to use Hydrogen, our base framework. We're going to build a head for the headless APIs, that's all things we've already said. The important parts for what you actually need if you want to follow along and not just listen is there's some Chrome based browser, Chromium based browser, which we all probably have. And then this little link down here to the actual StackBlitz project.
4. Working with Hydrogen and File-based Routing
In this part, we'll be working with a specific version of Hydrogen. We'll be using StackBlitz, a browser-based development environment, to run our code. TypeScript support is planned for Hydrogen in the future. You don't need Ruby on your machine for this workshop. The hydrogen config.js file connects to a demo store, and the app server component is the entry point of the application. Hydrogen uses file-based routing to map files to URLs. The routes folder currently contains an index.server.jsx file that displays 'Hello World' on the homepage.
There is also a version, a newer version that has some changed dependencies and stuff. We're just gonna work off of this one right here. You can try the newer version, but you might hit some things as we were talking about right before this call up. Things have been changing very quickly with hydrogen in the last hours and days. So we pinned our versions just to make sure things are exactly as we would hope with minimal room for error. But there is always a chance that something will get updated that we didn't hear was coming down the pipeline. So yeah, if you wanna follow along, this one is the safe one to use.
So we all love TypeScript? Yes, I know, I'm a fan. No, you don't need Ruby on your machine, unlike some other Shopify projects. We're not going to touch Ruby today. Actually stack splits lets you kind of manage all the dependencies and everything in your browser as well. So you don't have to clone anything down locally or have anything set up. And if you do want to go and build off of this in your own time, you'll just need node and that normal tool chain. We'll cover some next steps at the end for how to get things out of stack, list, and actually go and build a real thing. But for now, yeah, you don't need anything besides clicking that link in a compatible browser and you can follow along.
Cool, so as everyone kind of gets that pulled up, let's start with some of the intro, kind of get familiar with what we have here. The first thing to kind of look at is the hydrogen config.js. This is where we hook up to a hydrogen demo store. So there are API key and I believe it's like the domain. This points back to a demo store that Shopify has created for you guys to use and kind of poke around as you're trying out hydrogen for the first time. So that is the file that defines which store is backed by this hydrogen app. And then next is the app server component. So of course in like any react app, this is kind of the entry point into the application. You can see here that we have suspense included and the Shopify provider is wrapped around all of our files. This is just using that config that we just talked about and creating the React context to be able to connect back to the storefront in the background. So a lot of the boilerplate is kind of covered by this template here. It'll be the same thing if you clone on your own, if you're using our yard command or anything like that. We've tried to make it pretty easy to just jump in and get started. So like Megan said, there's this kind of a router in here and you can kind of guess based on the name. What Hydrogen does is it uses a type of routing called file-based routing, which is basically a way where we map the actual files that are in your source code directory to the URLs that people will be accessing. So it's a very simple kind of logical way to map what code we write to how it displays on the page. Right now, if we open up our routes folder, the only thing in here is an index.server.jsx, and that says it's just a function that returns Hello World. And you can see over here we're on the slash or homepage of our website, and it just says Hello World. Now, throughout this, we're going to be seeing a bunch of different files, some of them will be called index. or like something.server.jsx, some will be called something.client.jsx.
5. Hydrogen Project File Structure and Dynamic Routes
In a hydrogen project, there are strict rules about file names and their rendering locations. Client.jsx files can access state, while server.jsx files are always rendered on the server. To create a new page, a new server component needs to be created. Static routes can be easily set up by creating a file with the desired URL. For dynamic routes, parameters can be added to the file name by enclosing them in square brackets. The parameters can then be accessed within the component. The handle parameter can be used to query product-specific information from the Storefront API. To learn more about the API, you can refer to the documentation at hydrogen.shopify.dev.
And in a hydrogen project in general sometimes you'll see something, something, just jsx, no client no server. There are some pretty strict rules here about what those names mean, a server.jsx file is always rendered on the server client.jsx is done on the client. And there's some pretty clear splits about like what those two things can access. The important thing is, for this tutorial, that the client.jsx files can access state. So if you wanted something like selecting a color for a product, that's client-side state, so you would need a client-side component.
And then the server components, the important part for this tutorial is that a new page is a new server component. So if we want to go create a new product page, we need to create a new server component. There's some other fine details about these two types of components and when they can interact. There's a link in the page to more docs about this, but we won't dive too much into it. But the important part here is that if like, if our goal is to make a product page, we need to go make a folder structure that represents what we want our page route to be. So we can go over into routes, and we can create a new folder and we can call it products and that's just hard coding a product just to get going with. So make a new file called example.server.jsx and if we hop back over to our doc, you'll see we have a little snippet in there that we can copy and paste, and all this is is a bit of, it looks exactly like the index page which is a Hello World, except this one says example product. Do you notice when I saved that everything kind of refreshed, there's a little message down here that said we forked the project, so that might, if you're following along, that might have crashed your server down here, so if you get like I can't connect kind of command over here what you can do is rerun npm install nm yarn and then you can have your server again. So I just killed it, so you will get unable to connect. So if you get that just rerun this command, I'll serve it in the doc, you'll see it. But anyway, so at this point we have a route that we just set up, that's products slash example, and we can go over here and we can change this URL, products slash example, and we get our example product exactly as we would expect. And that's all it takes to do a static route. If we wanted to do an about page or something like that, this would be a great way to do it. You can just create the file and go ahead and put whatever you want. But that doesn't really work if we have thousands of products, so let's talk about dynamic routes.
6. Using GraphiQL to Test Queries
We can use GraphiQL, an interactive tool for GraphQL APIs, to test queries against the Storefront API. The simplest query retrieves the shop name, which in our case is Snowdevil. GraphiQL also allows us to explore other API fields and run queries for products. By querying the products, we obtain a list of 10 items, including different snowboards. We'll focus on the most generic snowboard handle for the rest of the tutorial.
Or, since it's a GraphQL-based API, we can go and use that interactive tool that comes with most GraphQL APIs, and we can go to GraphiQL. So if you want, you can just kind of expand this or do it in a new window. I'm expanding it because if I do it in a new window, I have to flip back and forth. But we can go to slash Graph IQL.
And, you know, once you actually build your site, this will be disabled, but since we're in developer mode, it shows up. And if you're not familiar with GraphQL, that's okay. I'm no GraphQL expert, either. So don't stress too much. The important part is that this is a really cool interface that lets us test the query against that Storefront API and see what we get back.
So the simplest query we can get going is this one that's in the doc, which is just a query for the shop name. So we'll paste that in. Again, you don't have to be an expert at this syntax. We'll explain what you need, so don't stress. But basically, we're going, we're looking at the shop object and we're grabbing the name off of it so we can hit run. And we realize that our shop name is Snowdevil. And that's configured in the Shopify admin panel back on, like, the dashboard for the person who's actually maintaining the site.
This is cool. But the really valuable part about graphical is that we can figure out more about the API and we can learn about it. So if you hit new line and then you go and do, like, a control space, it brings up the auto-completion. So we get a whole bunch of other fields here that we might want to pull down. So if we wanted to, for example, grab, like, the, I don't know, grab the store description, that's a good one. We can now run that and we get back the description of our store, which is the custom storefront powered by Hydrogen. And that's super duper easy. Obviously there's a ton of other information here. This is just like one category, the shop info, but we can also query for products. So let's go ahead and pull out a product. And this query, there's a link in the docs to this query. Sorry, I just lost my window. There's a link to the docs and you can find this query and you can go and actually, like, dig through. ton of example queries on Shopify.dev, because we know not everyone's a graph ql expert. But I'll copy and paste this one in here. And basically what we're saying is we want to look at the products. We want to grab the first 10 products. I just know, ignore those words and their graph ql crap. And then we want the ID and the handle for that product. The idea is a Shopify internal ID. They tend to look pretty crazy. And then the handle is just like a human readable ID. And notice we also are using the word handle in our page. So that's what we're going to end up, you know, linking and querying on. So let's run this query. And we're just getting back here a list of 10 products. You can see each product kind of looks like this. We have, you know, the node. And then we have an ID and a handle, a node, ID, and a handle. So you can see we have a bunch of weird name stuff, a bunch of different snowboards, different things, the oxygen, mail it freestyle snowboard, whatever. We can just go with the top level, like most generic handle snowboard. And we can use this for the rest of the tutorial as just kind of a backbone for doing our queries. The product page will build up. We'll be querying for this snowboard product.
7. Using GraphQL Queries in Hydrogen
We can change the query to query for a specific product instead of just a list. We can query for a single product that has a handle snowboard. We can grab various information from the product, such as the description and images. We can make the query dynamic by using variables. We can pass in the handle as an argument to query for different products. In the product page, we use the use shop query hook to translate the query to React code. We import the use shop query hook and the GraphQL tag library. We execute the hook and store the data in a data object. We can check the server terminal to see the results of the query. We extract the GraphQL query to a variable to keep it organized.
And you can do that. So right here, we're just getting a list. We're getting a list of the first 10. But we can change this query pretty easily to allow us to query for a specific product instead of just a, you know, list. And that query is again in the doc and in the tutorial. So you'll notice we change it from, I'll actually paste this right after it so you can see it. We go from querying products, plural, and putting some and asking for the first 10, to querying a single product that has a handle snowboard. So we'll drop that off, run this, and now we'll get just one product back. And again, just like we did before, you can hit control space, you can see what other information is on here, we can grab the description, we can rerun that, we can grab whatever other useful stuff is in here, and a lot of this gets pretty deep. Like we can grab images and under images there's another set of edges and nodes, and so those have like URLs and we can go and we can go and you can grab all this stuff. We'll talk about this a little bit more in a minute, I messed that up, but ignore my bad GraphQL. But the point is you can get very deep with this, because of how GraphQL works. We don't want to go too far into it, we will be using some advanced queries in a little bit, but like I said, it's not terribly important you understand it, because hydrogen will tell you if you get something wrong if you're missing data that it needs, it'll let you know and we'll see that in a bit. But anyway, we can now take that, and then we can query for a specific handle item. We're querying for snowboard, which would be fine, but again, this is a dynamic page, we're not always going to want to pull for just the snowboard. So, we can change this query one more time, and we can actually make it a query that can take a variable. So, again, I'll paste it right below so we can see, we're changing the type of query definition, I suppose you would call it, and setting it up to take a $handle variable, and then we're passing that handle down into our query, so that'll just let us pass in whatever string we want to be able to query for that product. So, whatever is in our URL, we'll pass in as an argument. You can't really see it here, but down here there's this little query variables thing that if you're very careful, you can actually drag it up, and this is a little area that takes some JSON that fulfills the variables of the query we have up top. And again, it's really smart, which is cool. So, I can start typing, and it'll say, oh, you obviously need to supply us the variable handle because it's defined in our query, and here we can type snowboard. And we can run that, and it looks exactly the same except I took out description, but it looks exactly the same. We can change that now to the oxygen or whatever. If we query for a product that doesn't exist, it just gives back null. So, this is us now having a hard-coded query that we can then pass in a dynamically variable to. So, with that, we can then take that and actually put it in the product page. Yeah, so, in our product page, Hydrogen comes with a use shop query hook, which essentially we can take the query that we just wrote in the graphical and translate it to our React code to essentially do the same thing that we were just trying out. So, to try this, let's first import the use shop query hook and the GraphQL tag library. And I just want to point out here that the graphical and this GraphQL tag library are pretty common if you're comfortable working with GraphQL applications elsewhere. This isn't specific to Hydrogen. The use shop query is obviously specific, but if you're comfortable with GraphQL, this should all look pretty familiar. And if you're like, oh my gosh, I don't know what is happening, a lot of this stuff is just some basic GraphQL. So you can learn more about that in like GraphQL specific resources, not so much Shopify. OK. So, using that U shop gray hook, we can pick a paste in that same query that we just had in the graphical on the left. Here, we're just using that shop Curry hook. It accepts to items the query, which is the same query that we just had, and then the variables, which are the same as the variables that we saw in the query variables at the bottom. And that cons data is just going to take the data back. Once that hook has completed, we store it in a data object. And yeah, essentially, we've just kind of copied from the graphical and translated it to our react code. If we check out the products slash example page, that is going to execute this hook now. And you can see because in the URL, the example we know that's not actually a valid product handle. So we're getting a null back in the server terminal. If we update the URL to something that we know exist, like that snowboard that we just saw before, we should be able to get both the ID and the title logged in the server terminal there. So essentially, same thing that we were doing before we had it working in the graphical translated it down to our React component. One thing to do while we're kind of in this area is we're going to extract out that GraphQL query. Queries can get pretty large and unwieldy, and spoiler alert, they will for us when we get to more product information. So we're just going to extract it to a variable and stick it at the bottom of the page. So it's kind of out of our way. Nice.
8. Client-side Component and Product Options Provider
Now let's move on to the client-side component. We'll create a product details component and use the product options provider to pass down the context of the product. This allows us to use the use product options hook and handle variants automatically.
So now that we have some data being queried, we're pulling something from the URL, we have some data being queried, we're not really doing anything with the data, but we do have it. This is where we can start getting into client-side components and things that are actually like more interesting on the page. So in this specific case, we're going to make just like a product details component, and then we're going to go ahead and use this thing called a product options provider, which is basically a way for us to pass down the context of the product we're looking at, which the server provides to product details, and then enable it to be used through the use product options hook, which a bunch of hydrogen components use, but then we can also create custom components, which use use product options, and then it handles a bunch of stuff automatically, variants and things like that, which we'll talk about in a moment. But for now we can just go ahead and create this client-side component.
9. Implementing Client-Side Components in React
In real life, you might want to make a source components folder for your client-side component. We're going to put a product detailed that client.jsx, which will render on the client and allow us to do interactive things. The product options provider is a way to display product details on the page and allows us to do cooler stuff. By passing the product data to the product options provider, it gives context to anyone who wants to use the Use Product Options hook.
In real life, you might want to make like a source components folder for your client-side component. We're just going to put it right next to the page, just to keep it simple. But if you look at like, some of the other examples you see that are a little bit organized, I might sneeze and I apologize for that. I can feel it. It's an inch away. Wait for it. Nope, no sneeze. All right.
So we're going to put in a product detailed that client.jsx. And remember.client means this is going to actually render on the client. So we can do things like heft state. And then we'll go here and say function product details. It's going to take a prop that is a product and we're just going to render out basically the same thing. It's a slightly different wording, but it's the same result that we're currently rendering out. So, we'll go here and we'll change this from just a p tag to go in and say product details. And we'll close that out. But if we run this now, it's going to break because we need to pass it in that product. So we can say product equals data. And there we go. And did I mess that up? Product equals data product product. Whoops. Oh no. I think the prop is data dot product from the source. You're correct. You're correct. I think I've seen this code enough to get it without looking at the doc. Anyway, so there you go. So you can see it's now rendering properly.
And the important distinction here is that now that we're doing this product details, we're using this client component. That means we can do interactive things. So let me look back to our doc real quick. So we have this product options provider that I mentioned earlier. And it's one of the ways we can display product details on the page. We don't have to use it. There are some options. So for example, right now we're already displaying product information. We're displaying the title. But this other component is a lot richer and allows us to do a lot cooler stuff. So I'm just going to copy and paste again from there, from our little workshop doc. And it looked like it changed a lot, but it really didn't. We still have our product title here. And then we just add in this new product options provider component. And we pass that data, and that data is the product. So what we're saying here is the server actually requests the data, passes to product details. Then on the client, we set up this product options provider, and we give that product. And now that product options provider gives that context to anyone who wants to use the Use Product Options hook down the road, whether it be a built-in component in Hydrogen or something specifically. So we can save this, and it's not going to go very well for us. Because it says product option providers require product.variance.node. In other words, the product data that we're providing is not complete. And it's not complete, because the query we're using down here is just that little test query.
10. Accessing Product Details with Hydrogen
In this section, we discuss accessing details on the product using Hydrogen's built-in components. We explore the product price component, which retrieves the price from the product data. We also cover using custom components with the product options provider to create a product image component. By using the useProductOptions hook, we can access the selected variant object and extract the image. With the provider configured and the data already queried, we can easily include the product image component on the page. This allows the image for the selected variant to be displayed.
It doesn't actually have enough information to qualify itself as a whole product in the product options provider context. So you'll see in the doc, we have two things linked. We have both the actual page on Shopify.dev, but we also have just a link to a gist under the text of this larger query. And when you click on it, you will find it is in fact a larger query. It is a much larger query. And we can replace all of this. And it gets real big. It's a whole bunch of GraphQL, a whole bunch of crap. It's a very productive way to code because we jump from having like 10 lines of code to having 300. All of this is not really that important for you to understand. There's a reason this is in the docs. It's a reason it's linked because you don't have to have all the information about all the details here. The only thing you might care about is there's things like how many images to fetch here so you could like change that, or, you know, different little fields if you're like, oh, I really only want three images to get pulled down. I don't need 10 or whatever. For our case, all those variables are hard coded. The only thing this query is expecting, just like the other one, is that handle variable and then it goes and fetches it. And you'll notice that when I saved this and I replaced this query from our old simpler one, the page re-rendered it's still not doing anything different, but at least it re-rendered and it doesn't throw an error anymore. So we're at a point where that provider is saying, yeah, you're giving me enough information that I'm not actively upset with you. So that's cool. There's one more thing we want to talk about before we really get into use product options too much, which is that there are still some components which Hydrogen provides for accessing details on this product. Now that it's a complete product object that don't necessarily use use product options or things that don't change between variants and don't need that context. So the first one of those I want to talk about is just as like, well, actually, let me take a step back. There's kind of three types of ways to access data off of your product for your page. The first one is what we're already doing. And you can see over here where we just access the data directly. Then the second one is using product options and using it to use that use product options hook. And then the third is to do these other components that, like I said, exists outside of the use product options but still expect a full product. So one of those is product price. So we can import that and product price looks a lot like the other ones. It takes data, which is a product, and this literally just goes and pulls out the price. It does exactly what you would expect. Oh, it's also worth noting because we changed that query to be so much bigger, this console log is now spitting out a ton of stuff down here. So this is like the entire product option that we're passing around. So that's another way we know that we're getting a more rich object. But anyway, so that's the second option to just do this product price, pass it in data, and get that to display. There's a bunch of those built-in product different fields and stuff just so you can easily do that without having to know exactly what field you're looking for. And then the other option is to do the other hydrogen components that use product hooks or use custom components that use product hooks yourself. So let's talk about using custom components and actually go and like create some using this product options provided and do some fun stuff there. Yeah, so we're going to create a custom component for us today. I think a cool use case would be maybe creating a product image component. So you can see in the doc that we've kind of scaffold out some product image is just using an image tag that's also built into Hydrogen. But you can see at the first line there inside the component, we're using that use product options hook that we've been talking about so much. So we have the context set up, now we can access that context using this hook. And what we're going to pull out of that hook is what we're calling this selected variant. That selected variant object, if you were to dig into that council log, you could see a thing called selected variant. And you would then see inside that object it has something in image in it. So that's what we're doing there on line 26, digging into the selected variant, and pulling off the image from there. And this is all already set up for us because we have the provider configured and we already queried all that data on the server side. So we don't have to do much else here besides just include the product image And if you're familiar with React context at all, you know that you have to wrap that provider around the children that need the context, so we're gonna add it there, and yeah, we're missing an import for that useProductOptions hook. So there on the page, pretty simply, now, you can see the image for the selected variant displayed on the page.
11. Using Product Options and Cart Provider
The useProductOptions hook pulls the selected variant and image from the provider. We can use this context to track selected variants. We can print out the different options available using the product options component. Changing the selected item in the dropdown calls the set selected variant callback. Soon, there will be improvements to reduce the need for long GraphQL queries. We will use the Cart Provider and add an Add to Cart button.
We didn't have to do anything too crazy or fancy. And that's because that useProductOptions hook is just pulling the selected variant and image from the provider that we've already set up prior to this. To make this a little bit more interesting, we can use this context to do something that's a little bit more fun.
So the purpose of this context is to be able to keep track of things, like the selected variants. So variants are kind of a concept in Shopify stores, products have variants, right? So maybe think, different sizes, different colors. Because in our case, these snowbirds have different sizes and colors.
So we can print out the different options that are available to us in this component that it grab from the docs, just product options. It's not doing anything too complicated here. This is just basic react. Again, pulling the selected variant and list of variants out from that hook. The use product options, which again is just set up in context for us. Mapping over it, displaying it on the page in a select also known as a drop down. And then the interesting part here is that as you change the selected item in the drop down, we'll call the set selected variant callback. Which again is just coming from that used product options hook. This is all defined by hydrogen. We don't have to do anything fancy here. And we pass in the variant that matches the item that we've selected from the dropdown. Again, in order to see this, we just need to include it in our page at the top. Again, with inside the provider so we have access to that context. And now you can see that this select dropdown is there. And it has all the different variant options for us. And when you switch the item from the dropdown, because it's connected to that same context and we're using that use options hook to set the selected variant, the product image itself updates automatically, because it's all hooked up to the same context. We didn't have to do any extra code. We're just relying on the state of the selected variant to be able to update that image pretty dynamically.
I just happened to see someone in a comment ask if there was a way to not do these incredibly long GraphQL queries. And it's funny that you mention that. Because that is a... Megan knows exactly, but I know it's something that is either coming soon or has came this week. Yes, the answer is, if it's not possible right now, it will very soon be possible to not have to stress about these huge things. Yeah. We know this a bit much. Yeah, definitely. And even when we were making this tutorial, yesterday I was like, oh man, this is not great. I was chatting with the team and they're like, yeah, we know we really should provide some examples of what exactly this use product hook needs, and provide a query for that. Because right now, we're just getting the whole kitchen sink, which is totally not necessary for every use case. So coming soon, we'll improve these queries and make this a little better for you guys. It kind of defeats the point of having this query language that lets you be hyper specific about what you request. And then we're just like, yeah, just grab everything. It's getting it's getting work done.
So the last thing we want to do before we take like a quick five minute break is do use actually another provider that we haven't talked about yet, which is the Add to... Sorry, the Cart Provider. So, like I said at the beginning, there's a bunch of concepts that kind of every ecommerce store has. One of those is a cart, right? Like you have to be able to go and actually, you know, add things to a cart to then eventually check out and do things like that. So we're going to use the Cart Provider and then we're going to add an Add to Cart button. Now, we don't have time today to actually go into, like making a UI to see everything in the cart and like removing what's in the cart. So that's going to be kind of left up to an exercise for y'all. But it's going to use this cool Use Cart hook. And you can go and dig into the Docs and set it up. It's just as simple as showing variants or doing anything like that. But let's go ahead and add this button.
12. Adding the Cart Provider and Add to Cart Button
We added the cart provider and the Add to Cart button. The product is being added to the cart, but it's not displayed. Chrome's features remind users about items in their cart. This integration follows e-commerce standards. That's all we need for the cart provider.
So we can add the cart provider in here and it doesn't need cart provider, it doesn't actually need anything special. It doesn't need any arguments or anything. You can close that up again. We'll save it and just doesn't do anything. And then the other thing we want to do is get this Add to Cart button and we can go down here and say Add to Cart Button. And we'll just add to cart. And close it up. And you can see it appears over here on another break because I'm a designer. Look at that. So we can hit this button now and you'll see it goes like... Yeah. It kind of goes like... What? Like it delays. It's clearly doing something. And I promise you it is doing something, but we can't see it because we're not displaying anything. But that data is there and the product is being added to the cart. Like I said, we'll leave that up to an exercise. One of the funny things, this is a complete tangent, that I actually saw was because there's features in Chrome that remind people if they've forgotten to go and like finish a checkout process, you might see when you open a new Chrome tab in that blank screen and it'll be like, hey, you left a snowboard in your cart. And that's actually because this is all automatically integrating not only with Shopify, but with like best standards for e-commerce, like across the board, which is super cool, even though the snowboard we're buying is like a weird JPG of a made up snowboard. Chrome doesn't know that. But yeah, so that's that's all we had to do to actually add it to the cart. Like I said, you can go and do more there if you'd like. We're going to take a break now, and I think. Yeah, I think that's all we want to cover about the cart provider.
13. Implementing the Add to Cart Button
During the break, you can try implementing a feature to disable the add to cart button if the selected variant is out of stock. The code solution is already provided, but you can challenge yourself to set up the functionality independently. We'll add another component called the add to cart markup, using the use product options hook to access the selected variant. Inside the selected variant object, there's an attribute called available for sale, which we can use to enable or disable the add to cart button. Hydrogen provides utilities that handle context and state management, allowing you to focus on developing unique features for your shop. Additionally, you can build custom APIs and services on top of Hydrogen. We briefly demonstrated how to create your own API by adding a new file and returning JSON. Hydrogen also offers advanced caching options, allowing you to cache requests and specific elements of the page for improved performance.
Yeah, so we'll take a few minute break, if you are so inclined during this break, you can try to implement a feature where the add to cart button would be disabled if the selected variant is out of stock. So we gave you the dock, which will, of course, have the code solution. But maybe a challenge to not take a look at that and use a couple of minutes to try and set up some functionality to disable that add to cart button. Yeah, if the if the thing was not available. Yep. And that's also a good time to just try to catch up if you've fallen behind at any point, because we only have about one more segment after we come back. So try to catch up if you have questions or concerns or anything like that. We'll have room for questions at the end. But, yeah, you can either poke around or take a break or whatever. I'm going to go blow my nose. So I'll be back in just a moment.
So I'm hoping everybody is kind of making their way back from the break. As I said, we've provided the doc. So this code solution is already there. But you can see it's pretty simple to kind of do the logic to disable this cart button. For the purpose of this workshop, we're just going to add another component to this same file that we've kind of been working in. We'll call this the add to cart markup. Again, we're just using this use product, or use product options hook to grab that same selected variant. This is the same one that we've been using in our other components. And inside that selected variant object is an attribute called available for sale. So just like we can pull the image out of that GraphQL query with that huge data object that we were looking at, there's also a flag in there called available for sale. And we can then use that to just create some logic to either disable or not disable the add to cart button based on that field. So pretty simple there, again, to just pull some information from that hook. And that's really kind of what we wanted to communicate with this workshop is hydrogen provides you a lot of these really nice to have utilities and sets up, does the hard work of like setting up context and keeping track of state and things like that for you so you can focus on developing your things that make your shop unique. Like our great styling. Yes, everyone's going to want to use this site for sure. You're right, I was going to get a snowboard like the local store, but when I saw that white website with the Arial font, I was like, oh, you've got to.
Closing Notes and Q&A
Hydrogen allows merchants to have control over customization and performance, enabling them to build a performant website. We encourage workshop attendees to complete a code challenge by creating a UI element to show items in the cart. Follow us on Twitter at Shopify devs and use the hashtag Shopify code intro to share your progress. Hydrogen provides options for creating your own app or using a complete template. If you have any questions, feel free to ask. Hydrogen is still in developer preview, and feedback is welcome. While there are no non-hooks utility functions for fetching APIs, it may be possible to integrate Hydrogen with other frameworks in the future. The goal of Hydrogen is to provide scalability and flexibility for building e-commerce stores.
And hopefully at the end of the day, you'll end up with a really performant website because that's a big part of the goal of Hydrogen is to let merchants who are very focused on customization and performance and milliseconds matter kind of vibes, really get as much control as they could possibly want in order to build out whatever cool storefront they want to make.
So with that, we can kind of open it up to, to questions. Is there any any other closing notes you want to make, Megan?
The only thing before we jump into questions is we would love if you all that attended the workshop today wanted to kind of follow up with a code challenge. We implemented that add to cart button and we updated some of the logic there to either display or enable or not enable it. But we didn't get a chance in this workshop to create a UI element that actually showed the cart. For those that are in this workshop today, if you want to kind of take that home, build some client component or some UI to show items that are in the cart, we would love to see it. So if you follow us on Twitter at Shopify devs and then you hashtag Shopify code intro, you might hear from us once you've kind of completed completed that extra challenge. But that's it. Ready for questions. And one last little note, I will go back to the slides just to close this out. Here's the hashtag again. It's in the dock as well. If you do want to, continue your hydrogen journey here the commands just use our basic way. You can go to create, React, up kind of vibe where you can make your own hydrogen app or you can go to hydrogen. new that gives a more complete template than what we have in the tutorial. We gave you this one over here has all sorts of ones that boots up. You'll see like an account page and everything like that once at loads. There you go. So you can see we have bunch of different options different products, you know, it's a very complete demo as opposed to ours, minimal possible thing. So that's over at hydrogen.new if you want to fiddle around with that or create something locally, whatever floats your boat, but yeah, any questions, feel free to post them in the chat. Just feel free to talk if you want to talk whatever whatever feels right in your heart. We're happy to do our best. If no one asks any question, I'm going to be sad. We need at least one question.
Yep. I have a question. Good. Does hydrogen provide some non-hooks utility function to to fetch the API so that we can use hydrogen in in a hozer a framework like next so we can use the fetching function in gets our side props or in the loader function of remix.
Great question Megan. Do you know I think that because we rely on that hydrogen config it to point back to a specific domain it might be possible to kind of pull in some of this to a different framework. I haven't seen anybody try that out yet. Again. This is just in developer preview. So, you know, maybe in the future will kind of allow the ability to use this in some other ways but yeah, I'm not sure I've seen that or if it's possible so far. We're really just kind of relying on the react ecosystem, especially because react 18 is the one that supports the server-side rendering. It's also worth noting that like Megan said, we're in developer preview. This whole thing is still an early project. So if you do I see things like that that are important to you that seem out of alignment with what we're doing like file something on Github, reach out to us on Twitter because that feedback can definitely go back and make a difference in the product. Totally. Yeah. Okay. Thank you. Yeah, thank you. Thanks for coming. Any other questions concerns? What can people do with the outcome you can become a millionaire. You can sell you can you can thrive. No, I mean, I think that's so somebody asked what can people do with the outcome? And the answer is yeah, I mean, you can take your app you can host it and you know take it as far as you want. That's one of the really cool things with hydrogen versus Shopify's normal offering, which can be a bit limiting as like your company grows or if you're working for someone like Kylie Cosmetics or some large store. You know, you can you can really scale this up to be huge. And that's kind of the goal of hydrogen is that there isn't a ceiling of how far it can go.
Hydrogen for Larger Merchants
Hydrogen is recommended for bigger and more demanding merchants who require customization and handle larger use cases. It allows developers to move away from mom-and-pop type development and work on more complicated stores.
And it's something that as the framework matures, we want to recommend to like our biggest most demanding merchants. So yeah, you can really you can do a lot. Yeah, I think just to add to that some of the feedback that we've heard kind of in general with a Shopify ecosystem and definitely when Shopify started it was kind of meant for entrepreneur mom-and-pop type smaller use cases, right? And that's all well and good like it. I mean, it's a really great site. People find it easy, you know to get started and things like that, but we were a little bit struggling with larger use cases, right? So even like b2b or like apes like Kylie Cosmetic Cosmetics stores that have a large, you know sales and you don't need to handle a lot of traffic. That's where hydrogen kind of fits in to the ecosystem. So becoming like a hydrogen developer opens the door to move away from, you know, mom-and-pop type development and work on larger more complicated stores and clients that need more customization.
Difference between Hydrogen and Shopify App
Hydrogen is a different use case where you use Shopify as the backend and create your own UI. The workshop on building the Shopify app with React and Node is for using Shopify end-to-end. You can build apps that integrate with Shopify's backend to customize functionalities. There's also an ecosystem of third-party developers who build and sell tools for Shopify.
I have another question. There was another workshop about Shopify three days ago. It was named 'Building the Shopify app with React and Node'. Can you explain the difference between that workshop and the one on Hydrogen?
Yeah, so Hydrogen is kind of like a different use case altogether. If you were building a Hydrogen store, you would use Shopify as your backend and create your own UI. You would configure your products in the Shopify UI and access them through the APIs. On the other hand, the workshop on building the Shopify app with React and Node was for using Shopify end-to-end. In this case, you would use Shopify as both the backend and frontend. You can build apps that integrate with Shopify's backend to customize specific functionalities, like fulfillment flows. The apps live in the backend of Shopify and handle more of the nuts and bolts of the business.
It's also worth noting that if you're an entrepreneurial-minded person, you can build apps for Shopify and sell them through the Shopify App Store. There's a whole ecosystem of third-party developers who build and sell tools for Shopify. Additionally, there's a theme space where people build and sell themes for Shopify stores. So there are various ways to engage with the Shopify e-commerce ecosystem.
Building Apps and Themes for Shopify
A fulfillment app can be created by app developers to customize the fulfillment flow for a merchant and integrate it into the Shopify backend. Shopify has an ecosystem of third-party developers who build and sell tools through the Shopify App Store. There are also opportunities in the theme space, where developers can build and sell themes for Shopify stores. Polaris is a design system for Shopify apps used by merchants on the backend. It is not meant for the frontend customer experience. The compatibility of Hydrogen hooks and components with next.js is uncertain. The optimization of images in Hydrogen is not clear, but some level of optimization is expected.
Come in. So maybe a use case is like you need some special type of fulfillment flow. A app developer can go in to the Shopify kind of backend create a fulfillment app to customize the fulfillment flow for a merchant and then plug it into Shopify in the backend. So you can use similar tools like Node and React. We have a component library called players that's built with react. But where those apps live is very different. So you're handling back of house, you know, kind of maybe more nuts and bolts of the business. That's where the app that we talked about earlier this week Would come in whereas hydrogen is very much like the person who's making the purchase focused right? So building the front end for the backend of Shopify. Does that make sense? Yeah. Thank you.
It's also worth noting if you're an entrepreneurial minded person who isn't running an e-commerce store, there's a lot of interesting opportunities building apps for Shopify just like your iPhone or any other App Store Shopify has an ecosystem of third-party developers who build and sell tools and you know interesting additions to our ecosystem through the Shopify App Store and we have I don't know the exact number of hand but hundreds of millions of dollars of revenue that gets paid out to third parties who are building apps that are merchants then use so it's a really interesting space and Megan's Workshop goes through touching touching into that and then we also have if you again, I'm assuming you've never heard of the Shopify ecosystem put any effort into reading about it, but at the theme space is also super interesting. There's a whole ecosystem of people who build and sell themes just like you know, HTML we use a custom templating language called liquid but make themes and sell them to people who make Shopify stores and there's a whole series of businesses around people doing that. So there's a lot of different interesting technical ways. You can engage with the Shopify e-commerce ecosystem. This is one app has one team's is one and yeah, it's really cool. There's a lot of fun ways to be involved. So an app is like a what pressed plug in basically. Yeah. Okay. Thank you.
It's my cat. Chunky. Question the chat polaris is largely centered around Shopify apps. Yeah. So Polaris is a design system for Shopify apps. It would not you would not use Polaris to show anything to the purchasing customers. So the people who interact with Polaris are the merchants on the back end inside your Shopify like admin page Polaris is not meant to be used On your front end for people who are like trying to buy the products. Yeah, and for what it's worth we have two implementation of Polaris we use internally that the entire Shopify dashboard is built out of so if you go and use those components your app and extension are going to feel exactly natural in our dashboard and you know control panels and stuff like that. And you don't have to be a designer which as an engineer I appreciate as you can see from our demo today, we're not the most designer minded. Can hydrogen hooks and components be used in next.js I think the answer is no or we don't know. Yeah, I think that is the question that we were kind of talking about at the beginning. So my answer is that. Yeah, I actually don't know I haven't seen anyone do this. My inkling is is probably not just due to it kind of being reliant on some of the things that react comes with. But maybe you could put next.js in there too. I don't know. I just haven't seen it. Sorry, I mean it's open source. So anything's possible. I don't think that I think the main intent is that your entire App is built with Hydrogen and but like like we said earlier like the hydrogen is still early are the images optimized like Gatsby images or next.js? Oh, that's a great question. I don't know if do you know? No, let me let me actually look because I think it is and I think that's why when we render an image, we use hydrogen's image tag instead of like the normal HTML image tag. So I know that data that comes back on the image is like super interesting and much more complicated than you would imagine. So I like to just go ahead and log this out and see because if we see like a bunch of different sizes of the image and stuff like that that will give us a good hint that that the images are all optimized. So let me go ahead and say, product slash snowboard. And we go down here. Yeah. So if you look at this image object, it looks like we're only serving up a single size version of it. So in this case, it doesn't look like we're optimizing that much for it, but there might be there might be other stuff here that I'm not familiar with. I would say. I would be amazed if we didn't do some level of optimization there, but I'm not seeing it immediately here.
Release Timeline and Fees
Hydrogen's roadmap may include optimizing images for performance. As a developer, using Hydrogen does not affect fees, but there may be pricing differences for merchants using a custom storefront. The API requests for Shopify stores are not charged, and there is no quota. The timeline for Hydrogen's release is uncertain, but it is a high-priority project for Shopify. Stay updated on the latest releases and join the Shopify Discord's custom storefronts channel.
So I don't know. Yeah, I just dug through the docs quickly. It doesn't say anything specifically. It does say it served from Shopify Cdn. I don't know. I didn't get any extra details though from this doc about what exactly that means. Yeah, it may just be another thing on the list. the nature of a pre-release framework, but obviously images are low-hanging fruit fruit for optimization. So if it's, you know, a framework built to be fully rendered A framework built to be fast. I'm sure that is on the roadmap if not already being implemented.
Anything else? Yeah, Just using hydrogen is makes it different for fees as an entrepreneur, as a seller than using the full stack of Shopify. Yeah, that's a great question. I do not think it makes any difference on the fees, the only situation that might be different is I believe Shopify.com. I believe you can there is a plan, that is like an API only plan. Do you know what I'm talking about Megan? Shopify lite. I'm not sure if Shopify lite has API access. I'm guessing it does but if there was a big value prop here, it would be It would be by being able to use Shopify lite, which is the version of our plan that is normally just for like adding a single buy button onto your website. But I am not a hundred percent sure. I think how I would answer that would be as a developer, it doesn't make a difference fees wise or you know, what what Shopify would kind of cut from I think as a merchant there is a pricing difference if you are going with a custom storefront versus the Shopify, you know kind of drag-and-drop WYSIWYG storefront that's available to you out of the box. I think that is the latest answer again, things are changing quite rapidly. I find it difficult to kind of keep up with where we land just with some of this stuff. But definitely these are details that will be ironed out by the time we hit, you know, global up-release for sure. It's worth noting. I don't think you're out of you don't get charged for API requests at all. I don't think there's like any quota or anything like that. And as far as I am aware it's not tiered in any way. If you are a Shopify store you get the API. Yeah. I think that's true. It's throttled obviously, but like if you make too many requests at once will, you know, cost you or block you. But yeah. So is there a timeline for the release? I have not heard what the timeframe is. Um. Yes, I do not know. I know like we we had announced this last. Unite with it or something and the idea was sometime this year, but I don't really have a more specific time. I will say hydrogen is one of the most important projects to shopify. Like it is a priority. With a bunch of engineering behind it. So yeah, even if we don't know the timeline, we, I can't tell you that. It is like the huge effort that we're working very hard on. I will also take the time now to plug our shopify discord. If you're really interested in hydrogen and keeping up with all the latest and greatest releases and stuff. They release constantly. I mean, just yesterday, they had a pretty, pretty major release. If you join our shopify discord, and then there's a channel called custom storefronts. And there is a feed of all like the latest hydrogen releases with like release notes and I believe they keep that up to date with like, you know, more targeted like this is what we're doing next and this is what how we're kind of feeling about a release. I'm just not completely up to date with like everything that goes on in that channel cuz it's such active development.
All right, everybody. Thanks for the time today. Yep. Thanks.