Shopify ECommerce Store with React & Next JS | BuilderIO

Key Takeaways

Knowing how to build a web shop is an important skill to have for every web developer. With 2021 being well how it is, most of the shopping is now being done online. You as a developer can contribute the world by creating amazing web experiences. Hello everyone and welcome to another JavaScript Mastery video. This one is quite special because I'm going to teach you how to build and deploy a Shopify e-commerce store. Usually, the process of creating a web shop would take you weeks. Thankfully, in this video, I'm going to teach you how to use the tools that are going to speed up the process significantly. If you are an e-commerce freelancer or a person with a non-development background that wants to run their own shop or a developer that wants to extend their skill set and learn how to build web shops, this video is for you. So, what exactly are we going to build in this video? Well, let's take a look. As you can see, this is our demo web shop. It has a landing page as well as some collections like spring, men, and women. Let's go to spring for example. All of the products for this category are listed right in here. We even have a built-in search that you can use for searching the products. Let's search for something like cozy coat that works perfectly. Finally, if you click on the product, you'll be directed to the product page where you will be able to choose some product details and then you'll be able to add it to the cart. So, let's say I want the blue one in a size large. And I'm going to click add to cart. Once you do so, you'll be able to proceed to a typical Shopify checkout. That's it. Quite a lot of things going on here. But don't worry, this video will serve you as a stepbystep guide to creating headless e-commerce stores using Builder I.O. Builder IO is a tool that's going to make all of this possible. Builder.io IO is a low code tool that allows developers and non-technical people to build landing pages, blog posts, and storefronts extremely quickly. The sites that you can build with Builder are going to be extremely optimized and efficient thanks to Nex.js's server side and static rendering. There's one really important point that I want to emphasize. I've mentioned that Builder.io is a low code tool. What does that mean? Is it just a simple drag and drop tool? Yes, it is. But the key point here is you as a developer code the components that you can then later drag and drop. That makes it extremely versatile. It's not how much code you write at the beginning, it's how much you have to write to maintain it. And with builder, you only add code when you need new components. Nothing extra. Without any further ado, let's get started. We are going to start off by cloning the starter code. The goal for us is to understand the starter code and then we'll be able to add our own features and components to the code. The link for the starter is going to be linked in the description. Once you're on this GitHub page, let's clone it. We can do that by going to code and then finally download zip. Once we download it, you can find it in your file explorer. And then what you want to do is simply extract it. In this case, I'm going to extract it to my desktop. And just by doing that, you'll see that we have this folder right there. We want to do the usual thing, and that is open it up in Visual Studio Code. I have my empty Visual Studio Code window right in here, and the only thing you want to do is simply drag and drop it. Now that we have it cloned, we're going to take a look at the readme of that same GitHub page. There are steps for running everything correctly. So, let's go to the getting started guide. You need to have Noode.js, MPM, and Git. And finally, let's follow the steps. The first step is to create an account for Builder.io. And we're going to do that by going to this link. In here, you can just enter your details and get started. Okay, great. Before we do anything, let's just verify our email address. So, we don't have this thing on the bottom left. I just magically verified it and the message is gone. Now, what you want to do is you don't even have to create a new space. We're just going to go to account. So, that is on the left side sidebar. You want to go to account. Then, you want to go to private keys right there. And then in here, you just want to say create the autogenerated key. In here, it lets you choose the key name. Let's do something like demo. Now that we have this key, you'll want to copy it and make sure to stay on this page because we're definitely going to use it in one of the next steps. If we go back to our readme, you'll see that the second step is basically what we just did. So, we can scroll down and we can go to the third step and that is to clone this repository and initialize a builder IO space. We've definitely cloned it, but now we have to go into it and install some things. So, let's go there. As you can see, we're going to have our repository. Let's open our terminal by going to view and then terminal. Great. Now that we're in here, we have to see are we in the current directory where all the other files are. And you can see by the path that you need to be on Nex.js Shopify master. Great. So, in here, we want to run some commands. The first thing that you want to do is install the Builder io CLI globally. So just copy this line and paste it in your terminal. This will install builder io CLI globally and then we'll be able to use all of its features. Okay, that is done. And the next step is to run the builder create command. So let's copy this thing and let's paste it right here. As you can see, some of the things here need to be changed. So, for the key in here, this is the place where you have to put your private key. So, let's do that. Right now, we are back in our builder io account page and I'm going to copy this private key. If we go back, I'm just going to go here and right in here, I'm going to put my key. Finally, the second thing that we have to pass in is going to be the name of our space. And you can use anything. In this case, I'm going to use demo store. Make sure to run the builder create command. And that is going to create our demo store. What you want to do with that API key is copy it. I'm going to copy mine right now. And you want to go into thev development and production and you want to paste it in here. So you can see here builder public key. Override it and put the new one. Same thing forv.production. The builder public key has to be overridden with a new one that you just received in the CLI. In this video, we're going to use a demo Shopify store to showcase all of the builder functionalities. Instructions for connecting your own Shopify store are also going to be in this readme right here. Finally, if we go back to our builder io website and if we close this, we can go to spaces and you should be able to see your newly created space. Everything should already be autofilled for you. You can just click connect your store. This is going to do two things. First of all, it's going to ask us to index our products and collections from Shopify. That means importing all of our products and collections from Shopify store to the builder IO. As you can see, all of the products and collections from the demo Shopify store have just been imported. And the second thing that this just did is that it created web hooks for products, updates, creations, and deletions from Shopify to always keep the data between Shopify and builder in sync. Finally, we can go back to our code and we can run mpmi to install all the necessary dependencies. Once all dependencies get installed, you can simply run mpm rundev. This is going to start our development server. By the way, if you usually watch my React videos and the Nex.js is completely new to you, don't worry. This video is completely friendly to all the people who are just starting with Nex.js. Now that our application is running, we can check it out on our builder.io website. Once you're here, you can go to your account settings, which is right here, left sidebar, account, and then site URL. You'll want to switch this to your site URL. Currently, we're working with localhost. So, that is going to be our local host. Make sure to put it exactly as HTTP colon slash slash localhost and then colon 3000. No more extra forward slashes and no https. Just like this. Okay. Now that that is done, let's take a look at our models. On the left side sidebar you can go to content finally page and then there are pages like homepage about us page and all the other landing pages that you want to have on your website. So let's create a new page and let's name it something like landing page. Let's start from scratch by choosing a blank as our starting template. This just loaded your site and rendered the add a block button. As soon as you drag and drop a component, your local host will immediately be informed about the changes and you will be able to see the change live. Let's test that out. So, if I take a block of text right there and simply drag and drop it and let's say something like I'm learning how to build a web shop. Just like that, we have it right there. We can even change the styling. So, let's go for that. Let's just increase the font size to something like 50. Great. I'm learning how to build a web shop. The only thing you want to do to see this live is click publish draft. Finally, on the right side, you'll have a URL and you can just visit that URL in your browser. That's it. The changes are live on your local host. As easy as that. Of course, this is not something interesting. We just added a header. You could have done this in the code, but later on we'll be able to use so many features specialized to web shops like adding products, collection, and so on that are going to extremely help you when building a web shop. With that said, let's go back here and let's explore the insert tab on the left side. Within that insert tab, you can press show more and there you will see code components. Code components are custom components that you can create inside of your Nex.js application. With this demo version, you'll already get some of the pre-built components. Those components are something that a designer or someone using the editor wouldn't be able to do. You, as a developer, create components and then other people can use those components. Now, let's try to build a demo product store. We can start by inserting a hero by simply drag and dropping it. So right here, let's choose a hero. And you can also immediately edit the text and change its styling. Right here, you can see we can change the headline, we can change description, and also you can click edit style to change absolutely all of its styling like margin, padding, and so on. I'm going to remove our heading right now. And finally, we can add a product grid. So if you go to insert and then show more under code components, you'll see product grid. So I'm going to simply drag and drop it below. The product grid component is a component that was already given to us in the starter. But you as a developer can access that component in the code and you can modify it and extend its features. You can also create completely new components from scratch. All of these components are easily modifiable in the code. That's something I want to point your attention to. This is not just a simple drag and drop site. You can build these components and I'm going to show you how to do that. Okay. So, why is our product gr not showing anything? You can go here under edit and of course we have to choose our products. So, we can add our product list one and we can add our product. It is immediately going to look into your Shopify store. Right now, we're connected with a demo store, but if you had your own products, they would be showing here. Let's go for Cozy Code. And just like that, instantly, Cozy Code appeared right there. This is an image that is completely scalable for different screens. And it loads quickly. We can also click edit. We can add one more product list. And let's go for something like jacket. Okay, we've just added two different items. Let's click publish update. Again, if you just go back to your local host 3000 and landing page, you'll be able to see those items live right here. And without any extra logic, you can just click on this item and it's immediately going to open its product page. It's almost like magic. Okay, but now we've seen a lot of drag and dropping. Let's go into the code and let's explore everything. Let's really understand how this works and how you can use it to make something even better. Okay, we're back in our Visual Studio Code and as you can see, we have a lot of folders and files here. One folder that's going to matter to you the most right now is going to be the sections folder. Inside of here, you can see all of your code components. Remember the hero we've used? Well, it's right here and it's made up of three different things. A hero file, it can be a JS, JSX, or you can even use TypeScript. In this case, they're using TypeScript right there. but you can freely just use normal React if that's what you prefer. Then we have a module CSS file which is just basic styling. And finally, we have a hero.builder file. This is something that simply adds it to your code components. So let's explore how we can create a new code component from scratch. Let's do something extremely simple to start with. Let's create a new folder and I'm going to name it text. So, it's going to be a simple text element. Inside of there, we of course have to create a text component. So, I'm going to create a new file and it's going to be named text dot and we can use JSX. As I mentioned, it doesn't have to be Nex.js if that's not something you're familiar with. Let's take a look at our hero so we can see if there is something special. And you can take a look. It's mostly just some JSX right there. So I'm going to use this React snippets logic to create a simple functional component which is going to be named text. And then inside of there we can input some text. Of course in here we can put some static JSX like we can say static text. But how can we make a code block that the user in the builder io website will be able to fill in? Well for that we use the second component which is called builder and then.js. So, we're going to create it right there. And that is going to be in our case text.builder.js. Let's take a look how it is built right there. I'm going to put this on the side. They use ts, but again, if you're not familiar with TypeScript, you can simply use normal uh React or JavaScript. And I'm just going to copy what they have. Like, we can even copy the first eight lines. If you paste it right there, you can see that we're importing something from Nex.js. JS and we are also just calling something from builder. Then we are rendering our component. In this case our component is going to be named something like let's do text to stay consistent. In here we need to import that component and that component is named text. Finally this is the place where you register that component. So what we have to do is in this options object you need to pass all the info about that specific component. In here you can pass a name. Let's do name is something like text element. And then in here you can put the data that the user will be able to type in. So we can say inputs. Inputs is going to be equal to an array. And there you can have multiple inputs. First one can be something like name and we can use something like headline. So this is going to be the main text. The type of the text is going to be a string because a user will be able to enter a string. And then finally, you can have a default value. You don't have to, but let's add this is a text element. You can add as many inputs as you want. And they don't have to be just simple strings. They can be radio buttons, checkboxes, or anything more complex. For now, let's just do two. I'm going to copy this one and I'm going to paste this one right here. This is going to be a description. And below, it's not going to have a default value. Great. So now what we are doing is we're creating this text element currently just with static text. We are importing it into our text.builder.js and we are registering it as a builder component. So how do we actually use these elements inside of our JSX? Well, it is extremely simple. You get them through props. So right inside of here, we're going to dstructure and then you can take all the elements that you mentioned right here. Headline and description. So right in here, make sure to put this object to the structure. I'm going to say headline and description. and you're going to get real values that a user or a person creating the store types in. So in here, let's do something like an H1. I'm going to use a headline. That is going to be just like this. And finally, in here, we can use something like an H5 tag. And that is going to be the description. Now that we've created this new code component, that being our text element, we need to go to pages. And then you need to import it in the page you want to use it in. If you import it inside of the app.tsx, that way it's going to import it into all components. So you don't have to worry about that. So right inside of here, let's import that code component. Just below these section imports, you can also import that. The only thing we have to change is that's not going to be the hero. It is going to be our text. And finally, it's going to be text.builder. builder and then.js. Let's see if text.builder is going to do it. Now, let's go back to our builder website. Okay. And without even needing to refresh the page, our text element appeared right in here. Let's try drag and dropping it. And there we go. As you can see, we have static text and we also have this is a text element. As you can see, it also has the headline and the description. Keep in mind the headline is pre-filled. So if we start typing something like test and test right there, you can see that this indeed works. This is our custom component. We expected that this headline here is going to be big and bold because it is supposed to be an H1 element and description should be an H5 element. So, why are they appearing to be paragraph tags? Well, let's open our inspect tools and let's inspect them. As you can see, this indeed is an H1 tag. So, why is it appearing as a paragraph tag? As you can see, we are inheriting our font size and font weight. So, if you remove those, it's going to appear as a headline. So, what do you have to do to indeed make this a headline? Well, back in our code, you can simply apply some styles to this H1 tag. So we're going to say style and let's do something like font size is going to be equal to 2 em. Finally let's say font weight is going to be equal to bold. If we now save this and go back you can see that our headline is properly styled. Now I know that this was a really really simple example where this custom component is basically nothing that we need. It is just a piece of text. But I just showed you how you can create custom components. How you can put something in code and then drag and drop it here. Now you can use as many of these elements as you want and you can use them on multiple webops and on multiple pages in the same webop. But once we dive deeper, you'll be able to understand that this code component can be anything. It can be a widget that you can add to the store. It can be something like a calendar or a newsletter form. or you can find a package on mpm. If you don't know how to develop something, you can simply find an mpm package that does it, import it into your code, and then you'll be able to drag and drop that specific component onto your site. For now, we're going to remove those custom components, and we're going to keep creating our demo store. We still have a lot of things to explain and add, but later on, we're going to come back to our custom code components, and then we might think of something more interesting to build. For now, the takeaway is you can create custom components and then you can drag and drop them onto your sites. Great. Now that we know how we can create custom code components, let's continue with the demo store by adding one more pre-built custom code component. In this case, let's use a product collection grid. We can just drag and drop it right into here. Click edit and then click choose collection. Opposed to choosing a product grid, collection grid allows us to immediately import the full collection. In this case, we already have a few immediately imported from my Shopify store. In this case, let's go with men. As you can see, in a matter of seconds, the entire men's collection was imported right into here in a nice collection grid. Finally, if you publish the changes, you'll be able to see it live on localhost 3000. And this is crazy. In just a few minutes, we've created a web shop where you can view products. This is like a landing page for the store. It is fully optimized and it's statically rendered, so it's extremely fast. So, as you can see, now we have our landing page and a pre-built homepage. Let's see what that is about. I'm going to click this logo on the top left. And currently, there is just an iframe of the video where one of the main developers of Builder io is explaining how you can use the platform. Let's see how simple would it be to create our own store homepage. Let's go back to builder and let's start drag and dropping. So, I'm going to go to the left side content. As you can see, our homepage is just slash. So, we're going to go there. Let's just make a few changes. Remove this iframe. Let's add a block. In this case, we can use something like let's do a specific. We can do a hero one more time. And in here, you can say something like, "This is my web shop." Of course, you're going to put your webop's name in there. Of course, you can add some sections, add a lot of elements in there. But what I'm saying is you can create your entire store's landing site in a matter of minutes. So, I'm going to refresh our local host 3000. And would you look at that? It is immediately being created right there. Now, let's go back to our content to explain things in more detail. As you can see, we also have a collection page and a product page. The difference between the basic page and these ones is that the collection page and product page are generic collections. So, just to repeat, these generic collections are not associated with a URL. It's a component that can show on multiple different sites. I'll explain it in more detail really quickly. Now, let's go to our collection page. And there you'll be able to see that we have our generary collection that we just talked about. Let's go into it and see what that is about. As you can see, our current collection page is just showing spring. And that is because we are previewing collections and then spring. That means that the collection view is automatic. It is dynamic. It automatically bounds to the collection in the specific view. If you want to preview something different, just go to the options tab. And in here, you'll be able to choose something different to preview. Let's go for women's. And there we go. It just loaded. It is the same as it was with Spring. As you can see, it just shows a specific collection. But now, let's say that you want the women's collection to be different than other collections. That's where custom targeting comes in. We're going to leave the generic collection as it is, and we're going to create a duplicate. Top right of the screen, right there. Duplicate. Once it is done duplicating, we can rename it to let's do something like women collection template. Now let's set the targeting to target the women's collection. So in here targeting collection handle and we're going to choose women's. Okay. So now our targeting is included. And now let's drag and drop something. So, for example, we're going to add a text here and we can say crazy discounts live right now. And you can even provide them some specific discount code, but let's just leave this right now. Whatever you put in here with this targeting currently turned on, it's only going to affect women's collection. So, now let's publish it and let's check it on our local host. So if we go back and let's first check men, as you can see, we have our generic collection that simply shows men. And then if we go to women, as you can see right here, we have this specific targeting. This means that you can target your users by a lot of different parameters. And that way you can make the pages fully customized to their own needs. Okay, now let's get back and let's explore more features of builder. We can go to content and this time let's go to the product page. Let's go to the generic template. Now that we're on the product page, go to options and then choose one specific product. Let's go for black leather jacket. The situation is the same. We have the generic template that is bound to the product of which URL you're currently on, but you can create custom targeting for specific products as well. in the same way we did it for our collection. So for example, let's say that you want to show a specific message only to the users who are currently viewing the black leather jacket. To do that, you don't want to change all the products. So first, what we have to do is duplicate. This is going to duplicate the products page. Finally, we're going to rename it to black leather jacket. And then we're going to turn on our targeting. As you can see, you can target users by a lot of different parameters. In this case, we're going to use the product handle. The product we're going to choose is going to be the black leather jacket. Once we have that, whatever changes you apply to this page and with this targeting are only going to be applied to users who are viewing this current black leather jacket. So, for example, let's add a text and let's say, "Hey there, that's a nice leather jacket." Okay, just like that. Let's try to make this text bold. And that's great. So, now that we have that, let's publish the changes. And we're going to go back to our page, go to men's collection, and let's see if we can find that leather jacket men. I don't think this is the one. So, we can open it. And as you can see, it is just a normal page. We don't see anything special. But if we go for leather jacket or was it black leather jacket? Let's see if our search works. And it does. It is here. If I click it, as you can see, hey there, that's a nice leather jacket. Again, in here, you can use custom targeting. You can put some discount codes. And you can generally increase your sales. This is the logic that would be kind of complicated to write in your own code if you're building this from scratch and also it would be extremely tedious to write because you would have a lot of if else statements on absolutely all of your pages. This way it's so easy to handle. Great. Now you know how to use custom targeting and we also discussed generic templates. These are the templates that are going to be for example for a specific product or for a specific collection. But then using the custom targeting, you can also add some additional things to it. Now let's discuss the last two models, the announcement bar and the cart upsell sidebar. They are basically messages that render on the client side only. You can fully customize them. You can use that to, for example, provide users with some coupon codes or let them know that one item that they currently have in cart goes well with another item that they might want to buy. So, let me show you how you can do that. Let's go for the announcement bars and you can click new and announcement bar. An announcement bar can be a text element that we can drag and drop to the top of the page. So let's drag it and let's play with some styling. So if we go here, we can change the text color to be white. We can also increase the font size to something like 40 pixels to make it really big. We can change the background color to something like black to really make it stand out and add some top and bottom padding. So let's do 20 pixels top and also 20 pixels bottom. Now that we have our announcement bar, let's go to targeting. We can target by we discuss the items in cart. And let's say that this only happens if you have a cozy code in your cart. By doing this, this announcement bar will only appear if cozy code is added. Before we publish it, let's change the name to something like cozy coat. Also, let's change the text. Go to edit and let's do something like nice choice. Great. Let's click publish. Go back and see if that works. Now, let's go for cozy code. We have it here. I clicked it and I'm going to add it to the cart. As you can see, immediately an announcement bar appeared and it says nice choice. As you can see, we have some margin top. We want to remove that. So, it's going to be extremely easy. Just set it to zero right here and you get the hang of it. It just happens instantly. Finally, let's explore our cart upsell. So, we're going to make sure to create a new cart upsell and make sure that you have at least one item in the cart. There we go. As you can see, we have two cozy codes. And finally, you can add a new text block. So, I'm going to pull this text right there. Now, let's add some custom text. We can say, "It's cold outside. Would you like some boots with this coat? And how can we know that it's called? Well, because we're going to do custom targeting based on the cozy code. So, let's go here, target, target by item in cart, and let's add cozy code. There we go. Let's make this bold. And finally, let's add some styling. More specifically, we're just going to add some margin bottom right here and remove the top margin. So now, if we give this a name, let's do upsell. Let's publish it. And let's go back here and reload. Of course, it doesn't just have to be a text. It can be a complete link that's going to guide users to a different product that you want to sell. And there we go. It's cold outside. Would you like some boots with this code? We've just explored a lot of features that Builder io has to offer. And while doing that, we've also created a fully functional e-commerce store. As you can see, we have our landing page that you can see right there. We also have a completely new page called landing page that you can find right this on this URL. So, if we go in here, you can see we created this landing page. You can use other pages for something like an about you page or contact location and stuff like that. Finally, we have all of these different collections that have different products in them. You can go to specific products and then you can choose some parameters and then you can add them to the cart. You can view the entire cart. You can add some custom targeting and modifications and then you can proceed to a fully functional checkout. Before we deploy this web shop, let's say that you want to add some custom additional features to your web shop. You know how nowadays most of the web shops have those annoying countdown timers at the top? You still have the discount while the countdown is here, right? Well, let's try to create that. Of course, we could create it by hand just by writing out some code. But in this case, let's say that you want to use some mpm package. So, I just Googled and I immediately found this React countdown. We're going to use this to add it to Builder.io and then we'll be able to drag and drop it just so I can give you an example of how you can think of literally anything. You can find it either online or you can code it yourself and then you'll be able to add it to your web shop using builder io. To start off, I'm going to go to React Countdown and I'm going to copy this command. And then inside of here, we're going to open one more terminal window where we're going to simply paste that command and press enter. Once we do that, we're going to go back in here and we're going to see how we can use some of the features of this countdown. There is the most basic usage, a very simple and minimal example. So, what do we have to do? We just have to import the countdown and then we have to use it this way. So I'm going to copy these lines and go back to the code. Remember how we mentioned that we can add new sections and those new sections are going to be custom code components. So I'm going to create a new folder which is going to be called countdown. Similarly how we created this text component. We're going to create a countdown.jsx and also countdown.builder.js. Again, keep in mind that you can use all of the features of TypeScript and Nex.js in those components. So, to start off, we're going to create a simple React functional component called countdown. Inside of there, I'm going to paste the two lines I've copied. That is going to be the import to countdown and then simply using that as a component. So, I'm going to put it right in here. Okay. So, what are we going to do with this countdown component? Well, we have to do a similar thing we've done with our text. So, we have to create a dynamic builder component and then we have to register it. That way, it's going to be accessible from our builder io dashboard. So, I'm going to copy this entire code, paste it into the countdown.builder.js, and we're going to change just a few things. First things first, let's change the name of the component. That is now going to be a countdown. In here we can also change that to countdown. And we can change the name of the element here also to you guessed it countdown. Now what inputs are we going to have? Well, it is going to be one important input that is going to say something like time. In here a user is going to enter a number. We're going to keep it simple and this number is going to represent the time in milliseconds for how long is the countdown going to last. So we can say time in milliseconds. Of course, if you want to make it even better, you would just have to do some calculation and turn these milliseconds into seconds or even hours or days. Okay. Are we going to have some other inputs? Well, we can. We can have some sort of a title and we can make that optional. Well, it is by default. Great. So, now that we have this, we are of course getting these two inputs from props. So right in here we can extract those. That is going to be time and that is going to be a title. We are going to change our default time of 10,000 milliseconds here and just set it to time. Also, we can have some sort of a title just above this specific countdown. So I'm going to make it a paragraph component. Inside of that paragraph, we're of course going to use our title inside of a dynamic JSX block. And let's give it a style of font size is going to be equal to 2 em. Great. Now let's save this. And don't forget to do one final thing. That is to go to pages app.tsx. And finally we have to import our new component. That is going to be forward slashcountdown slashcountdown.builder. Before we save it and go check it out live, let's make sure to rename one of these two things because we cannot have two of the same names. Countdown. Countdown. So, I'm just going to rename this ones to CD countdown. We can do that because this is a default import. Great. Now that we have that, let's go back to our website and check it out. Okay, I'm going to go fully back to our content to our page and let's go to our landing page. There we go. It loaded. Let's remove our cozy code from our cart because we don't want to have this nice choice at the top. There we go. It automatically gets removed. And now if we go to show more, take a look. There is a countdown component. We're going to place it at the top. And this is not as it's supposed to be. But maybe that's because we haven't entered the time. So let's enter the time. Let's do for example 100,000 milliseconds. There we go. That is about a minute and a half. And let's enter a title. This let's just say countdown or let's say special discount. And let's do three exclamation marks because it's really important. And there we go. That is great. If you go ahead and click publish on the top right, let's go back to our website. Let's go to localhost 3000/landing-page and let's see how does it look like. As you can see, it started the countdown from 1 minute 40 seconds. That's exactly 100,000 milliseconds apparently. And it has our special discount title. Now, let's go back and let's style this a bit. So, what can we do when it comes to styling? Well, we have some pre-built things like we can immediately put it somewhere. Let's center it horizontally. Let's also add a fill color. Let's do some crazy greenish look. Let's also change the text color to something like red. Of course, this is not something that you want to do, but I'm just showing you the possibilities. Great. Now that we have that, we can add some more padding to the left. Let's do 20 pixels. Padding to the right. And it already looks well terrible. But you have it. you added a new feature to your shop by using a specific MPM package or the custom code that you wrote. If you don't know how to code, if you're just managing different stores, this is going to be great because a person will be able to tell the developers, "We need this feature. They're going to build it or you are going to build it and then managers will be able to use it all across the board with hundreds of stores." With that said, if we publish it, go back and reload, we can see our crazy countdown counting down. Great. So, we added custom features. Now, you know how to do that as well. And the final step, the cherry on top, would be to actually deploy this web shop so you can share it online and so you can actually start making some profits if you connect this to a real Shopify store. To deploy our great web shop, we're going to use Versell. Versel is extremely easy to use with Nex.js. They work together amazingly because they're made by the same company. The only thing you have to do to deploy this webshop is go to the link that I'm going to leave you in the description. That's going to lead you to the Versell deployment page. There you will have to connect your GitHub account. And as soon as you do that, you're just going to name your project. In this case, let's go with demo store. I'm going to click continue. There you'll have to connect if you haven't already. And finally, you'll have to enter the name of your repository. I'm going to again use demo store. You can also make it private if you want to. And you can click continue. Finally, you can choose your project name. Framework preset is going to stay as it is. Root directory is going to stay as it is and all the changes are going to stay the same. The only thing you'll have to do is you will have to add your environment variables. And how are we going to do that? Well, I'm going to put our code side by side and we're going to go to our env. As you can see, we have env. Production ordevelopment. Inside of here, you have all of your environment variables. Shopify storefront API token, Shopify store domain, and builder public key. So let's start with the first one. I'm going to copy the variable name and I'm also going to copy the variable value. After you do that, you can just click add. And we're going to repeat the process for the other two environment variables. There we go. Only the third one left. And that is it. Once you add all the environment variables, you can simply click deploy. We're going to go back in full screen. It is going to take a few moments because it has to build it. But once our application is built, you'll be able to access it from the web. And I've just missed it. But after a few moments, Confetti is going to down your screen and you'll be able to visit your website live. So, let's do that right now. After you click visit, you'll be redirected to the demo store 7.verell app. And there you'll be able to see your website. We have our homepage. We can go to our landing page. Of course, we could have added the link to that, but that's fine. We're going to type it out. There we go. As you can see, it is extremely fast. It was kind of slow on local host. You might have noticed that. But here, when deployed, it is extremely fast. We can switch between different sections and collections, and it is lightning fast. It is extremely fast. Take a look. I click it. It's there. I click add to cart. There we go. proceed to checkout. And all of this is happening extremely quickly. Our fully functional, optimized Nex.js webop is live and ready to be visited by people. I hope you learned a lot in this video and I hope this video is going to be helpful to you to start your own e-commerce store if that's something that you want to do. If you're not going to build your own web shop, now you have the skills to build web shops for a lot of different companies. I really hope this video helped you in any way. If it did, definitely make sure to subscribe. There are a lot more interesting videos and projects coming up on JavaScript Mastery. Again, I just have to mention Builder.io. Thank you guys so much for making this video possible and for sponsoring it. But not only for that, thank you even more for creating such an amazing platform to build online e-commerce stores. That's going to be it for this video. To make sure not to miss the next one, like and comment on this one. And if you haven't already, make sure to subscribe. More importantly, turn on all the notifications by clicking the bell icon. Stay safe and see you in the next one. [Music]