How To Create Widgets with App Blocks

[Music]. hey there, my name is strauss. i'm an implementation specialist here at rebuy and today i'm going to show you guys how to install rebuy widgets to your online store 2.0 themes using app blocks. app blocks are super powerful. they allow you to kind of click and drag your widgets. you can place them where you want. um, some examples of these in use are our dynamic bundles widget, some recommendations, the bottom, a complete the look and a product upsell widget. so for this example here, we're just going to do some recommendations like this carousel here at the bottom of the page. so, from the rebuy admin, what you're going to do, if you haven't already, is create a new widget. in our case we're doing that product page recommendations widget. so i'll click through my product page. if i hadn't created one already, i'd click new widget and then ai recommendations. i've got this widget here. it's currently not installed and not visible. you're able to install widgets and have them on preview mode so you can test them before your customers can interact with them. and in our case, since we're using a 2.0 theme, this install button won't work like old themes. previous themes had a different templating structure, so we knew that for a product page widget we would install the productliquid file. 2.0 themes no longer function like this, which is why we need to use app blocks. so from the shopify admin, we're going to head to the online store themes section and then click customize on whatever, on whatever theme you want to change. you can do this to your live theme or development themes, no problem. so when you land here, you will land on the home page. um, whatever page you want to upgrade- whether that's a product page, blog page, cart page, checkout, etc. you'll go here, select that page. i've selected the product page and then we will install our app block. so let's hide my little face here. and we can see right now that i've got four widgets installed at this page. we're currently only seeing two here, but since this is the default product page and if you want to run multiple widgets like the ones that we're seeing here, here and here, um, you will need to install as many as you know you want for that use case. um, so for our use case right now, since we are not doing anything beneath our add to cart button, like a complete the look widget or a pop-up that pops up directly on the page, i'm just going to add an app block beneath our carousel at the bottom here. so there's several different ways you can do this. you can add the block directly within a section, like the product information here, or like our app section here. i can add a new block and any apps that support 2.0 themes will show up beneath this section. so right now we've only got kendo- something else- and then rebuy right here. so now that i've clicked this, i have another widget here, but it's currently not displaying, so we need to give it some content. now on the right hand side of the menu we'll see that we want this widget enabled and then we've got a few different options here. so the first thing that we'll need to do is add our we, our widget id so that we can properly show the widget that we've created and the data recommendations associated with it. so if we go back to rebuy here, we know that i want to do my widget ai recommendations, pdp, which has the id of 1979. so i'll go back here. i'll go widget id 19795 and then i believe this should auto save and update. now, if i scroll down to the bottom here, i've got my new re-buy widget app block. so this just defaulted right below this one. i can click and drag this one, put it up, above or below, wherever you want, within the specified location you've chosen to put it. that should update here. so now we've got our new rewi widget app block, since i dragged it up, and the pdp carousel below. so that is how you create and install widget app blocks. now, if i click save here and we go back to our theme, i currently can't see it, but if i refresh the page, i should see our new rebuy widget installed. alright, now that this is loaded, we can see that it is matching the location that we've set in here. we've got our dynamic bundles, our new app block and the pdp carousel, and the same is here on our live site. these are super easy to click and drag and install. um, again, like i said, now that we know our widget is installed, we can come here, mark it as installed and, because our widget is on live mode, it will say it's visible. if you want to toggle this, you can check it out. while rebuy is on preview mode, like you're seeing down here, you can go to the widget settings, toggle live mode, click save and then clicking this link will place rebuy and preview mode, so you can check it out. thanks for tuning in. don't hesitate to reach out to support if you have any questions about online stores, 2.0 themes and installing rebuy. thanks for watching. bye.

Add Whatsapp Widget To Shopify Dawn Theme - NO APP NEEDED

[Music]. hi everybody, this is marwan. today i'm gonna show you how to add a whatsapp widget on your shopify store. that's gonna appear on the bottom of your store, either on the right or on the left. if you really need a whatsapp widget on your shopify store so your customers can contact you directly by whatsapp, then this tutorial is great for you and you will create this with widget without the need to use any third-party app or any extra fees. so i just created this topic on scrope website so you can follow the steps by steps here and copy the code from it. so let's start. so first of all, i'm going to use the down theme. you can use anything theme you want and if you are stuck, you can contact me on scroogecom and i can make this for you. so let's start. let's go to edit code and the first step to do is just under uh snippets, click add new snippet and name it whatsapp. so just under snippet, click add new snippet, name it whatsapp and just copy and past this code there, copy past and click save. then you can close this file. second step: we're gonna, under config, we're gonna open the file settings here, then create an empty line between line 9 and 10. so here just click enter and let this empty line here. then copy this code and passed it here, click save. you can close this file. so the third step and the last one is under layout, open the file theme dot liquid. so we're gonna here under layout, themeliquid, search for, uh, this code, head control fc for this code just below it. pass this code, click save and that's it. so let's enable the whatsapp widget. now you're gonna find it in the same customizer or in the theme editor. go to theme settings and here, as you can see, here we have whatsapp widget. just click on enable. i'm gonna click save so we can see if it's appear here. here's the preview and it's working, as you can see. here you're gonna see the whatsapp widget here. now you can customize from the theme editor. here i'm gonna just refresh the page so you can see it. from this button you can hide it on desktop so you can let just the mobile user see it, and on this desktop you can either hide it or use other feature like messenger or something else. this is optional. you can try to make it on the left hand side if you don't like it on the right. and here you can enter the name, the sorry- your whatsapp member without using any space, and here pre-filled text that you can use. so i hope this was useful for you and you can just follow the steps here. i'm gonna uh left the link in the video description. you can just follow the steps here to enable the whatsapp widget on your website so people can just click on it and send you a message there directly on your whatsapp. thank you so much for watching. bye [Music].

More:nihao dropshipping

Shopify Widget | Tutorial by Without Code

Ashtyn here from without code and welcome back to another tutorial video. today I'm gonna walk you through our new Shopify widget for the web builder. Shopify is one of the leading e-commerce platforms available. it's easy to manage, especially for those new to e-commerce and selling products online. now we're pretty big on Shopify here at without code and we've used it for years. both our Muse themes and theme photos businesses are powered by Shopify. Shopify does offer a no code experience for building websites and offers both website templates and hosting. however, one major drawback is that making changes to a site beyond the template layout is just about impossible without coding and custom development. we experienced this exact issue with our departing details business, which was hosted on Shopify, recently converted to without code. there were several reasons for this change, but a big one is that hosting the site owner without code builder provides us full control of the site without needing custom development on a regular basis for changes. feel free to read more about this on our blog at whoa cocom slash blog. look for the business case study Shopify - without code artikle. now, the beauty of this is that, even though the entire business end is handled by Shopify, as in products, inventory, fulfillment, etc. all of that remains intact on Shopify and translates beautifully over here - without code. our widget will be useful for those that have a Shopify store but prefer to work and without code for their site build, those that want to add products or e-commerce to an existing site or those that are taking on a client that already has a Shopify store. so let's start by jumping right into Shopify to get our Shopify storefront token. this is going to be vital for linking the Shopify e-commerce functionality to the web builder over here at without code. now I'm logged in to our demo account and here from our Shopify dashboard, we're gonna go to the Left sidebar here and select apps. then we're gonna click down here for manage private apps and now we're going to create a new private app. now, here for our storefront API, we're going to select this option for allow this app to access your storefront data using the storefront API. and now here in the storefront API permissions, we need to select what types of data you want to expose to the app. in this case without code and for our already selected by D, and we can leave that as is. we want to allow without code, to read products, variants and collections, read and modify customer data, read and modify checkouts and read content like artikles, blogs and comments. so let's click Save. now, after we save the app, we can see here our storefront access token has been generated down here in the storefront API section. so let's copy this and now we're all set to go to link this up to the widget over here in without code. now I'm not gonna spend a whole lot of time going into depth on the Shopify side of things or setting up an account or products or anything like that. it's pretty in-depth and we can probably assume you've already done that and are ready to incorporate your Shopify store into your without code site. but just keep in mind, if you are new to this again, that all of your store functions, as in product creation, inventory, fulfillment, SKU numbers etc. will all happen at Shopify com. you will not need to manage any store activities over here at without code, and this is a great situation. if your client runs the store, any changes made to the products or anything relating to the store will automatikally be reflected on the without code site once you've got it published and linked up. so here in without code, I'm working with our eyewear theme and I'm gonna visit my pages list and click over to our shop page. now this template tiknically has a store built in already, but we're just going to imagine that the site does not have any e-commerce yet and we're gonna integrate that now with Shopify. let's jump into the widgets panel and down here in our business section, you'll actually find that there are two Shopify widgets, both of which will be required for the full widget to operate. the first one we're going to work with is this one right here called Shopify cart. so let's grab it out and drop it right into this empty row on our page. and if we jump inside the settings panel, you'll find that this widget serves two purposes. it links your Shopify store to your site here and it's also where you control all of your cart settings. and let's tok about cart positioning really quick. the cart button will appear in either a manually placed position on the page or pinned to the side of a browser window. if we want to choose a manual placement of the cart button, you're going to need to place the Shopify cart widget here, exactly where you want the button to appear on the page. now, if we want to use a pinned position, we can place this widget anywhere on the page that we like. and furthermore, if we want the cart to be pinned and persistent across the entire site, you'll need to place this widget in the header or footer. so let's do that now. I'm gonna drag this down to our footer and we'll put it down here under the social icon, so it's out of the way. and remember, this temporary widget box will not show on the published site. the header and footer are Global here in without code. so this means that when our cart widget is placed in the footer, as we've done now, when the site visitor adds an item to the cart and the Cart button appears, that Cart button will stay persistent even if they navigate away from the site shop page. they can click on the button at any time to open the cart, regardless of where they're at on the site. so now let's look at these widget options, starting with unique ID. just make sure to give this a unique name. we can leave this as is for now. now for Shopify store URL and storefront access token. now we've already copied our token, so let's paste that here. and Shopify store URL. this is super easy to grab as it's visible in the URL bar anytime you're logged into Shopify. so over in the browser up here we can see this electrical - wires dot my Shopify com. that's what we want to select and copy. then we'll head back to withou code and paste it into the widgets panel. now let's jump down here to these last few options: check out in pop up. if you enable this, it will allow the checkout process to be completed in a pop up here on the page. now, if you leave it toggled off, the checkout process will redirect to take place on your Shopify domain. next we have cart labels and we can expand this options panel here and we've got a selection of verbage that you can customize for different labels and functions of the checkout process. and finally, down here in cart settings. we've got some customization available here, allowing you to give the cart a title and toggle options to show the title, the product count and/or icon. and this top option here is where you'll customize that cart positioning I toked about a moment ago. leaving this as pinned will keep the cart pinned to the side of the browser window and with this now sitting in our footer, that'll be persistent white. and if you opt for manual placement, the cart will then appear exactly where this widget box is placed on the page. so now let's grab part two of our Shopify widget into the widgets panel once again, and this time we're gonna grab the Shopify store widget and we'll drop it into our row here on the page. now that link that we put into the cart widget applies to the main Shopify widget as well as any additional instances of the main widget as well. so upon placing our store here on the page, we can already see our products previewing nicely here in the editor. now we don't have to worry about sizing the widget container. right now we'll start by setting up a full store, which will be wide, like the widget here is default. so starting in the panel here with a setting for a unique ID. so you're gonna want to enter a unique ID here for the widget, if yo.

More:J'arrête toute relation sex*elle avec les femmes tant que je ne suis pas millionnaire

Breezi Tutorials - How to Add Shopify Widgets on Your Website

in this tutorial today I'm going to go through a few different options you have for embedding Shopify widgets on your site so you can sell products if you use Shopify as your shopping cart in an e-commerce tool. so right now I'm logged into my Shopify account, have some products loaded up here, and the first thing you want to do is you have to add the widgets app. so we're gonna go under apps here, click get more apps and then you can just search widgets and this is a new app from from a Shopify that makes it really easy to embed on another site. so we're gonna go ahead and install the app, just put your site ID there and then you just want to confirm so. once you have the Shopify widgets app installed, this is the screen that you'll see. so basically, you have three options. you can either embed a Buy Now button, which is very straightforward. that's related to us partikular products, where you just have a Buy Now button which lets your visitors purchase that product through Shopify, but display it right on your breezy site. you have a embedded product, which I'll show in a minute here, which you get to actually show what the product looks like, and then you have the embed shop, which is basically just a link and then renders the Shopify whole shopping experience through, and overlaps will show all three of these in a in a sec here. so let's do the embedded product first. so just click this option there for embedded products and then pick one of your products, whichever one you'd like to embed. so I'm going to do this one just to show the example here, and then you have a few customization options depending on where you want to show the product on your page. you can pick one of these options and then I'll show you where you can customize the sizing if you need to. but it makes it easy if you can just fit one of these options. so I'm gonna go with the 600 by 600. you can see a preview there. I'm gonna stik with a minimal style. you have the art gallery style as well, but I'm gonna go with minimal. and then you can customize a few of the colors here. so the text color: you can change that if you'd like to. that just changes. and then, once you make a change and kind of see the preview, I'm gonna leave a white. but if you want to, you can change it. that's just the price there. the button color: you can change that as well. just click it. and if you want to pick, you know, different color, we'll go ahead and change this to a blue and then just click out and it will update there and then you have the button text color. so where it says by now, you can change that as well. and if you click extra options, you have a few more as well. so you can do like the background color. if you want to set that to maybe a lighter gray or you know, whatever your preference is, you can go through and kind of modify these different, these different options here. so, and then the last thing is the Buy Now button. if you want to change that text, to feel free. so once you play around with your customization options and you like the way it looks based on the preview, just click, get embed code and that simply gives you a snippet of code which you're gonna want to highlight and then copy to your clipboard. so we'll go ahead and copy that and then, once you have that copied, just jump back over to your actual site. so I'm logged into my site right now. I plan on putting this shopping widget right here in this empty space. so in order to do this, we need to use the embed HTML app. so I'm going to scroll down, grab the embed HTML app. I'm going to install a new version, since this is, you know, the first time gonna have this on my site and it's unique to this page. and then I'm just gonna click the edit option there and basically remove the default sample embed code there and I'm gonna paste the same code that Shopify gave me for this product. click Save when you're done and then you can just close out and you can see our new product is added here. so embeds right there on the page. and then, of course, you can go into your styles, might want to play with a spacing here to make this a little bit more centered, maybe even add a background so we can add, you know, just to kind of match the styles around here. we can play with this a little bit to get it looking right there. it's a little bit better centered, looking pretty good there. so that's how you embed just a product and that basically just lets your users click Buy Now and that'll take them through the purchasing process. you can also, if we jump back to Shopify- we'll close out here and we'll go back to the beginning- pick a different widget style. you can also embed the entire shop. show you how that works real quick. so, basically, Shopify lets you organize your products into groups. so this is it, just a called a front page group, so we'll go ahead and pick that. it's the only one we have right now. go to the next step and then basically it. you have to do a couple things right here and I'll go through that, but the first thing you need to do is just add a little snippet of code that basically says: visit my store, which is actually number 2 here. so I'll show you that- and then you copy this embed code and we put that in our actual tracking space for our site. so let's do one thing at a time here. first, I'm gonna grab this code- so I'm actually skipping the order here- for there steps. I'm gonna add a new version of the embed HTML app, same as before. I'm just gonna put it here for now, but you know you can organize this wherever you'd like to. this is basically just a piece of text that's gonna trigger the Shopify overlay where they'll see the whole shop. so it gives you a basic one. as we can see here, when we save it, the, the text might not match your style of your site. so I actually, you know, if you're a little bit more advanced and you want to apply some HTML, I did that beforehand just so we can see it styled, kind of the same font and size and everything. so very basic tags. but again, you want to know what you're dealing with, HTML before you start messing around with with this, because it is a little bit more advanced. so I just added some line height that's the same typeface as the other headings there, and then increase the size. I'm actually gonna make this a little bit smaller than 30. I get 22 and then click Save. so again, that's totally optional. but if you'd like to kind of play with the, with the styles, and you know some HTML, you can feel free to do that. so there it says at our shop: we've got there again we can adjust styles and make this a little bit tighter with the spacing. so the second step to this, going back to Shopify, is to add this embed code. so this actually goes. we're gonna select the entire embed code, copy it and then this goes in admin custom tracking code. so we'll click that. actually already had it added here, but this is where it goes in your custom analytiks. if you have another Analytiks code for Google Analytiks, you can just add a line, couple line spaces and add the code below it and then, when you're done, click Save Changes and all that's doing is basically connecting. when someone clicks that button, it's gonna render that embedded widget there that we just saved to our to our site. so, in order to see that, we can log out. and then we'll go back to the page we were on. and then now, when we click visit our shop, you'll see it renders the shop in an overlay, which is really nice, so you can pick the products, your visitors can add them to a card and basically have the entire shopping experience right here within an overlay, but they access it directly through your site. so it's a nice little integration there. and then, lastly, again back at our three options. here we can add the Buy Now button. this is the most basic, but if you already have the product information displayed with other breezy apps, like the image app in the text app to describe it, and you just want to throw a Buy Now button in there, you can just basically go through these steps, select the product that you want the Buy Now button associated with go through your different options.

Installing Stamped.io main widget in Shopify

hey there, stamped io seamlessly integrates with major e-commerce platforms and offers applications for a smoother experience. in this video, we'll have four sections where we install the app: install the main widget, install the star rating badge to your product page and install the star rating badge to your collection pages. now let's go ahead and add the app. log into shopify, if you're asked to do so. i'm already logged in, so it will install the app directly, accept any permissions and proceed to install the app. in most themes, installing the app adds the script and the core widget automatikally. if you do not see the main widget installed on a product page, please proceed to the next steps. head over to your shopify dashboard. select online store under your current theme. select actions and edit code to open your code editor. to your left you're going to look for the themeliquid file, which is located in the layout folder. head on over to our documentation site at helpstampio and you're going to search for install. select the second link. install app, main widget and script on shopify. click the first link and scroll down a bit to find the code. copy it. head on over back to your theme editor, then scroll all the way down to the bottom of the page and paste the code right above the closing body tag. remember to save great. now the script has been installed in this section, we'll be adding the main widget to your shopify product page. now, basically, we offer two core widgets: first, the star rating badge to show the review count on your product page, and secondly, the main widget, which is designed to showcase reviews with an option to write a review. now let's go ahead and install it. open your shopify admin panel under online store current themes, select action and edit code to open your code editor. there we'll search for a productliquid file, usually under your template section. now we need to place the code between product template and product dash recommendations. head on over to our documentation site at help dot stamp dot io. search for install, select the second link and there you look for install main review widget and product page. grab that code, copy. head back on over to your shopify admin panel and paste the code between the section mentioned, select save. now let's go check to see if it's been installed. for demonstration purposes, i've already imported some reviews, so let's look at a product page, scroll down and there we go. we've successfully installed the main widget. something to note: some themes have different structures and you may need to place the code in a different template file. here is a list of the templates that you can look for in this section. we'll be installing the star rating badge now. let's head on over to your shopify admin panel online store. on the current themes, select action edit code to open your code editor. search for product dash template. now. remember, different themes have different layouts. here are some of the sections that you can look for. now. i'm going to look for the title of the product. you can look for producttitle and you can also search in the code editor using control f on windows and command f on mac. and i'm going to search for product dot title. there we go now let's go ahead and install the code below that product title. go to help dot stamp dot io [Music]. search for install and click the second link. now select install star rating batch. grab that code, copy and head on over to the code editor. paste the code below the title. remember to save. now let's check our product page to see how it looks. open the product and there we go. we've successfully installed the star rating badge in this section. we'll be installing the star rating batch to the collection page. now let's head on over to the shopify admin panel under online store: current themes, select action and edit code. in this theme, i'll be searching for the product cardliquid file located in the snippet folder. as mentioned, different theme layouts have different sections where you paste the code. let's open that up and i'll be placing the code under the product title. you can search for the product title using command f for mac and control f for windows. now let's get the code at help dot. stamp dot io. search for install, select the second link and select install star rating badge and collection page. grab that code, copy, head on over to your code editor and paste it below the product title. remember to save. now let's go check out our collection page, open up catalog and there we go. we've successfully installed the star rating badge on our collection page. i hope you enjoyed this step-by-step video on how to install these stamped i o features onto your website. if you have any other videos you'd like to see, do reach out to us. thank you for choosing stampedio, as we continue to help increase your brand loyalty and accelerate your brand growth. you.

A Brand New Type Of Shopify Apps: Checkout Extensions

hey, everyone young here codingwithyancom check out extensions: a brand new way of adding features or customizations to the checkout of Shopify Plus stores and also very interesting opportunity if you ever wanted to build your own Shopify app, because it's basically an entirely new category and pretty untapped. so today we'll go over why and when to consider checkout extensions in the first place, what they are exactly and how we can get started today, and I really hope you find some value in this. so let's have a look. all right, so we all know that checkout is where the magic happens. customers put in their names, their shipping address, they select the payment method and cha-ching- the sound we all love- or dark complete. now, if you've been in the space for a bit, you'll probably also know that the checkout on almost every Shopify store out there looks pretty much the same, and it's because, unless you're on Shopify plus, there are only a handful of customizations that we can make. namely, these customizations include changing or replacing the logo, changing the text color. we can also do some minor customizations on the order status page, or you can add a post purchase Page by installing one of the corresponding apps out there. all right now, to be fair, there are still quite a few people out there who find these options a bit limiting. I totally understand that. but also to be fully honest with you- and I might be throwing myself under the bus here a bit- but personally I think most people shouldn't have the ability to customize the checkout, and that's simply because they have no idea what they're doing, and I'm not even excluding myself here. but think about this way: the default checkout has been used by millions of merchants at this point and Shopify literally measures and tracks every single step of the process. and also the checkout has gone through dozens of iterations- a, b, split tests- and it's just in the company's best interest to keep the conversion rate as high as humanly possible, because Shopify is directly financially incentivized to do so. and if I had to bet on either me, who thinks what looks good, versus Shopify as a multi-billion dollar company that it is, with teams of developers and data analysts and much more data points than I have, I think I would bet on them every single time. right, and I'm also not here to tell anyone what to do, but maybe that's at least a thought to consider before we go, before we go on the rant about the default checkout next time. fair enough, awesome. so then let's actually have a look at what the new checkout extensions are exactly. because, despite everything that I just said, every store is still unique, and if you can create, let's say, a good looking upsell section on a Shopify Plus store that's maybe doing a million per year in turnover, then even the one percent uplift, which is like a super conservative estimate, would already be an extra 10K per year. so I think you would all agree that it's still worth to test these things right. okay now, in the past, the way you would make customizations on a Shopify Plus store was by texting the support and then they would give you access to the checkoutliquid file, and that was awesome because you could just add your HTML, CSS and JavaScript directly in there and, yeah, you were pretty much in control. so this was an awesome time. however, yeah, you see, this is an episode with ups and downs. this approach came with two major risks. first, you could introduce breaking changes, which actually happened to me once and I burned about 15 000 in clients Revenue- um also have a video about that story- and then, second, your code also needed frequent maintenance, because whenever there was an update to the checkout, you just had to catch up with changing elements or changing naming selectors. to overcome these challenges, Shopify now introduced the new checkout extensions, which are basically custom or public apps that you can write, which is great, because it also means you can sell and distribute them on the Shopify app store. and to speed up the development, you will also find pre-built UI components, such as text blocks, Choice lists, check boxes, grid layouts, and all these elements are already styled similar to the rest of the checkout so that you can easily create this native or coherent design experience. the new checkout extensions are also a lot more robust, and in order to place them, we can use so-called extension points, though these are kind of like predefined placement points throughout the checkout, and we can then anchor our new elements to them. and the best news of oil, similar to the theme customizer, Merchants will also be able to move your checkout extensions around or replace content by using a new checkout customizer, if you coded your elements in a dynamic way. but how epic is that? okay? so now that we understand what the new checkout extensions are, let's also tok about how we can get practikally started, like how we can get started with building them, and a few things we need up front here include git installed on your local computer, then a Shopify partner account. a development store with at least one product in there just just makes it easier to preview the checkout, and while creating that store, it's also super important that we created, under the checkout extensions, developer preview, because at the time I'm recording this, the checkout extensions are not publicly available on all the stores just yet. yeah, like this is how brand new they are, and you also want to make sure that the email address you enter there is the exact same that you use for your Shopify partner account, and if that's not the case, you might just want to go ahead and create the store and then change it afterwards in the user settings. um, or at least that's what I had to do in order to authentikate my app later, and yeah, it took me a bit of time to figure that out, so it might save you a couple minutes here. further, we then also need to have nodejs installed, as well as a package manager such as yarn or npm, and that's because we're going to be using the new Shopify CLI version 3.0, which is awesome because the installation has been simplified dramatikally and now we can just use one single command to instantiate a new app project and all the dependencies will be installed automatikally, as well as the CLI itself. yeah, so that's amazing. and then, lastly, we just need an engrock account to surf the app locally while still under development, and the account is going to be free of charge, but we just need to grab up the access token from the dashboard. alright, now, assuming that you have everything ready, and of course you will also find links to the best resources for everything that I just mentioned in the description, but assuming you're ready. now it's time to bring up visual studio code, and on my desktop I already created this development folder here and then brought it up in vs code. if you don't know how that works, just you can just click on file here and then open folder and then select it, and then next I want to bring up the terminal so you can either click on this gear icon here and then command palette, or just press Ctrl, shift and P and then view toggle terminal right. and here you can also see that one of the main benefits of bringing up a folder in vs code is that the working directory gets automatikally set to that folder and otherwise you would have to change directory to navigate there. okay, so now then let's get started with the First Command, and we're just going to start by typing yarn, create, add, Shopify, slash app, and then hit enter. now it's installing some dependencies, so we're just going to wait for that to finish. here we need to enter a name for our app. for now, we're just going to go with checkout app, 10 points for creativity, and then we can select which template we're going to be using. um, and personally, I only tested the nodejs templates and that's also what I'm most familiar with, so let's just select that one and after all the dependencies are installed, we should fin.