Building custom storefronts on Shopify with Hydrogen

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.

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.

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.

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 let's head over, we can click that open. You'll see it'll go ahead and spin up an environment for us. We have our little web browser over here. If you haven't used StackBlitz before, the gist is that it's a very nice way to just get everything running in the browser really quickly. Okay, so we've already pulled down a little boiler plate piece of code over here. We've got our code here, our terminal down here, and then our program running right over here. You can open this out into a new window, you can open this browser tab out into a new window, which is nice if you wanna check network requests and things like that. We won't really be doing that. But just if you need more space, you can hit that button up there. I'll go ahead and pop this out just so I don't keep skipping back and forth for y'all. And oop, there you go. Cool, and I was just typing an answer in the chat, but I'll just say it verbally. TypeScript support is something that the Hydrogen team gets asked about a lot. I believe the idea is that we'll go to GA with just JavaScript and then quickly follow with some TypeScript support as well. So good question, I know the team gets asked that quite often.

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.

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.

Yeah, so of course, if we have thousands of products, we don't want to just create thousands of pages for each one so we can update the file name to be able to accept a parameter. And how we do that is just by putting square brackets around the name of the variable that we want to declare. So here we'll call it handle. That means the handle for the product. And now that we have that file name defined, we can actually grab those params from the argument for this component here. And then if we want to use them inside that component, we just pull the handle off that params object. So, again, just a reminder, this is JavaScript so that the names here matter. That handle that we're pulling out in the curly brackets is the same as the variable name that we've declared in the square brackets of the file name. So now everything is connected. You've got your handle specified in the file name. We're pulling in the params in the component and pulling off the handle from that object. And now when a updates the URL, you can see it does a pull that param off and it updates the page to show that dynamic name. Easy. Never seen anything more natural or easy in my decades of programming. On top of this, the handle is great. Right. So we've got a little bit of information from the URL. You can obviously expand this. You can put multiple fields in the URL. Do whatever you want, whatever, whatever floats your boat. We're not going to go any deeper on that. So what we do need to do is take that handle that we just pulled out of the URL and, like, do something cool with it. In this case, since, as Megan mentioned, we already have this connected to a demo store, we know we can go and query, using that handle, to pull product-specific information from our API. However, we don't really know how to do that. We don't have any example API calls in here. You've probably never looked at the API documentation. So the API we're going to be using is called the Storefront API, and as the name implies, it represents basically everything about a Shopify store. And there's multiple ways to learn about this and figure out what data you can access. One is you can go look on the docs. You can go to, I believe it's hydrogen.shopify.dev, and you can read all you want about all the nitty-gritty.

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.

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.

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.

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.

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.

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.

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.

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.

So the last thing we wanted to talk about before we wrap up and take any questions is just to kind of remind folks that like, although hydrogen is obviously very Shopify specific, it's tied very closely into our ecosystem. It doesn't mean you can't do other things if you wanted to, you could build out all sorts of custom APIs here. You could do, you know, whatever type of interesting additional services you need. So just real quick. I just wanted to show how to make make your own API on top of hydrogen that you can then go do whatever with. And it's super duper simple. All we have to go do is go into our routes, add a new file, we'll just call it API dot server dot JSX. And then the code again is in the doc, just like everything else. And we can just set it up to return a little bit of JSON, and if we go over here, we changed our URL. Whoops. That's not what I called it, API. There you go, we got JSON back and you can do any normal Javascripty, TypeScripty kind of magic you want to do in here. And yeah, it's very straightforward. One of the things we didn't really get a chance to talk about that we mentioned in the beginning is just some of the really advanced caching options that exist within hydrogen. You can do caching on a bunch of different levels. I'm not going to actually show the code here because it's on the doc and I want to stay in alignment with what we have written down, but you can go and cache an entire request. So we could make this, for example, cache for a minute or an hour or whatever. But you can also go into just about any of the hook or the query calls I should say, and you can cache those. So I think it's just called cache. Yeah. So you can basically cache any call you make to Shopify to make that faster, you can cache different elements of the page differently if you want to. So like Megan was talking about, where you're pulling data from reviews and you're pulling data from like the shop and all of these things. We do a really good job of helping you make a performance service and really get control over every element of how things are cached and served.

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.

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.

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.

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.

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.