1 - Shopify For Developers - Unlimited Free Stores for Developers

hello and welcome to the first video on Shopify development. this is going to be the first chapter of the series and I'm going to teach you how you can create a Shopify team from start to finish. so this course is going to be completely free and the requirement for this course is just knowing HTML, CSS and JavaScript. you don't have to know anything about Shopify. so in the previous videos, I toked about Shopify and how much developers are making money out of Shopify. I'm not toking about the ads, the drop shipping, some of the rzm I seen on Facebook, Instagram, how much money people make. no, I'm not toking about do stuff, but they're from developer perspective. people are going to make a lot of money out of it. why not? one of them should be you in the future. that's why I'm going to teach you how you can create shop for themes and how you can sell them in the future. so you'll learn a lot in this course. this is not going to be easy, but I'm sure I will make everything step by step and everything should be easy for you to understand. so after completing the course, I expect you to know everything about how you can create a Shopify team from its start to finish and then you can create your own team and then you can sell it. also, as I toked, I have a challenge for you. if you can complete the challenge, you can be one of the three winners who can win 400, 300 and another $300 for the person who can make the best team for Shopify. so I will tok about the rules and regulation in the future video, but in this video I will tok about the pricing and how you can get an unlimited like Shopify store for developers. so let's tok about this one. I will come to the shop fight. come here just quickly. if you go to the Shopify website, you just see your page, the landing page, where they ask you for the email address and you can extort for the trial. you are a developer. you are not going to start from here, because if you start from here, they are going to give you 14 days free trial. after that you have to pay for this tool. so, toking about the pricing: how much it cost and do you think people are going to pay for it? yes, Shopify basic is going to be $29 per month, USD. they have a and the sulphide for business 79 and, at one stop, Phi, which is two hundred and ninety nine dollar. that's not all. do you think people are going to pay for it? you may not believe the arrests of five plus and people are going to be moved in. two thousand dollar for each license or shot-for-shot five plus and businesses do that because Java is so easy for the businesses and the growth of them. one of the big companies I have seen who switch to Shopify is GB hifi, who is selling computer stuff. they just switch. you shall fight, because sofa is too easy and that's why people are switching to it and they are bringing new updates to their platform and it is really really easy to start selling something online. I know $29 is a lot compared to WordPress, e-commerce and WooCommerce, which are completely free, almost like- not completely- but some of the plugins you have to pay for them. but for developers, you do not see these anymore. so what you can do is you can scroll to the bottom of the page and you will come here and you'll start creating a shop, a personal account. they have a personal program, they have app developers, they have affiliate programs. so I'll go to the portal program. what is the partner program? you can create unlimited development in store for yourself. that is going to be completely free. you do not have to have like 14 days trial. all you have to do is just start creating your store, add the product unlimited product and the other stem restriction. I will tok just in a few minute, so I'll come here. click join now because you're in shop for partner page. it will send you to this part under Shopify, dot-com here. now. enter your business, here, your email address, because I already have it. so it is showing my email of us here as fill here. so also your website. it is optional also give them the or your errors and other details. after that, once you complete this one, you can directly go to the dashboard. so since I already have a software partner, I don't have to do this one. this is going to be easy stuff. so after you complete everything, make sure you click on the agreement check box here and then it will send you to the Shopify dashboard. so I do have an account. so I am NOT going to do anything here. I'll come back to the software partner page and I won't click join because you are a developer, you on your journey for the first time. just join from here I will login because I already have my account. once you log in, this is your dashboard. so in this dashboard they asked me to enter my payment information. I'm not going to do that one. it is completely optional for now because you don't have anything to sell. so you will come to you restore and it will show all these tools you have. you will come to the apps. it will show all the apps you have created and it will go to the affiliate links. it will show you all the affiliates. pull around, like if you refer someone to Shopify, they can give you a lot of money out of it. for example, some people or software partner and did bring some stuff I plus to the shop. why so? shop Y Plus clients are going to pay more than two thousand for the for their shop. so those people are getting a lot of commission out of it. so you can be one of them. you can fill their form and, if you have a lot of customer, submit your form and they will approve your your submission and you will have a unique link for the shop for affiliate links. so what I am going to do is I'm going to come to the themes. I don't have any themes here, so what you can do is if you have anything who is selling with that you are selling and Shopify store, it will be listed here. and when you are selling your theme, you will get 70% of each cell. they say your team is going to cost $100 and for each cell you will give $70 out of it. the other 30%, Shopify will get it 30 part, like $30. that's a lot, but they have to make it because they are going to review your theme and they are going to check a lot of things about your team. so I will come to these stores here. this is where you can create all your store. you have development store. you have managed a store which are going to be for your clients, so a non-oil store. you will see all these through. you have you can create your store. what I will do is and that in the next video, but for now, from here, you can create, you restore these. all of the wall of this is Telugu is going to be free. you can connect your domain and you can do whatever you want. so in the next video I will do it for you. so hope it has been informative. thank you for watching and I will see you in the next video.

Shopify Hydrogen and Oxygen

hey everyone, jan here codingwithyencom. so hydrogen 1.0 and oxygen are both brand new and have just been released to the public, and if you guys are curious, right now, today we'll go over what they are, why and when to use them in the first place, and also how to practikally get started, and i really hope you find some value in this. so let's have a look. alright, so then let's get started by answering the what. and besides being the most common element in the entire universe, hydrogen is also a react-based framework for building custom shopify powered storefronts. and, assuming that you roughly know what react is and you roughly know how shopify works, the question would be: what is a custom storefront? and just to catch everyone up here really quick, the way that shopify websites are usually structured is that, on one hand, we have the back end, so that's where we manage products, pages, content, we have our orders, payment settings and so forth, and on the other hand, we have the front end, which is usually built by using a theme. yeah, so this is like the actual website that visitors would see, so that's where we showcase our products, and we could say that a theme is kind of like the interface between website visitors and then all these ecommerce features. okay, now, in most cases, when people are getting started, this combination of backend and then a theme works perfectly fine, but there can be certain circumstances where a theme is just not enough, and we will get into the why here in a second, but for now, just imagine that you would want to sell groceries through a smart fridge. like, where would you even start using a theme in that case? right, doesn't make any sense. so here you would need something custom coded, namely a custom storefront. so that's pretty much the whole concept. you have a custom place where you want to showcase your products, but you still want to use the shopify backend features, like managing inventory, orders, payments, because it's like, so much easier to leverage this existing infrastructure as opposed to building everything from scratch. and the way you connect these two and how you exchange data is just through the shopify api. alright. now, to be fair, the smart fridge was a pretty obvious example of why someone would need a custom storefront, and you could make the same case for in-app purchases or in-game purchases, where using a normal theme just wouldn't make any sense, right? however, in the beginning we said that hydrogen is a react-based framework and react-based websites look at least somewhat similar to normal websites you could build with a theme, and at first glance you might not even be able to tell the difference between a theme-based website or a react-based website. so let's tok about some of the reasons why you might want to consider using hydrogen in the first place. and when i think about this, three different areas or three different things immediately come to mind. so first, let's touch on theme limitations or, to be more precise, performance. i guess that's pretty well known. i guess we've all been there before and yeah, maybe i should backtrack here for a second, because some of you might say the new dawn theme is super fast, and yeah, that's true, i'm also a big fan of dawn. but as soon as you add third-party libraries or some apps that inject code or some data-heavy content you want to display, that will still significantly slow down your store. and i guess we've all heard about the studies conducted by google before that over 50 of users on mobile will just leave the website right away if it doesn't load in less than three seconds. and yeah, since it's google, i just have to imagine, i have to believe they know what they're toking about. so the bottom line: faster loading times will lead to higher conversion rates, will improve the overall user experience and it can also help with seo rankings, so that, in and of itself, can also have direct impact on revenue. all right, the second point would be design freedom and talents, because as a theme developer, you always operate within certain boundaries. you have to look for existing liquid objects. you have to find work around sometimes, but if you build on hydrogen, design possibilities are pretty much endless. you can structure the website in any way you want. you can build it as custom as you want and, since we're toking about a react-based website, there are also a lot more developers out there than if you would just be searching for pure shopify developers, and that's a pretty interesting angle in terms of hr or hiring people, because then you might be able to augment your team with very qualified people from outside the space. okay, the third and last point would then be development costs and speed, and this one is interesting because building a custom storefront by utilizing the shopify api has actually always been possible, but it was also very time consuming and came with a variety of tiknical challenges, so that made it very expensive, and now, by providing these ready-to-use templates and pre-built ui components. hydrogen mitigates some of that by accelerating the development process, and that just makes it less expensive and more accessible overall. all right, now let's say you have a project where you want to use hydrogen or you just want to play around with it and test things out. then the question becomes: how do you practikally get started? let's tok about that. so, first of all, it really helps to know the basics of react and also graphqa. and then, in terms of the tiknical things that would be helpful or needed, they would include a package manager such as yarn or npm installed on your local computer, a github account, a shopify partner account, a store you want to connect, and ideally that store would also have shopify plus permissions, because then you can use oxygen as a super simple hosting solution for your hydrogen pages. i will also show you that in this video. but, that being said, you can still use hydrogen on any other plan as well, but then you would just need to figure out your own hosting and connect the store manually. more of that in a second. and then, lastly, you also might want to install the shopify cli, because it has some useful commands to speed up the development process and for everything that i just mentioned. of course, you will find links to the best resources in the video description. okay, so then let's move over to my development store, and this one is special because it has shopify plus permissions, which basically allows you to install oxygen as a hosting solution, and in order to do that, you will just go to the sales channels here and then all recommended sales channels, and you would find hydrogen right here. otherwise, you could also search that in the app store, but, as i said, you will only find that if you're operating on shopify plus, and in a second i will also show you how to create a hydrogen app from scratch without that. but yeah, for now let's go the easy route and just add hydrogen right here. so then we get redirected to this welcome screen here, and here we gotta connect our github account. so here i'm already logged in. let's just authorize shopify. yes, for simplicity i would just give access to all repositories here. so now it seems like my coding with yarn github account was successfully connected, and then let's enter a repository name. for this case, we can just use hydrogen test, okay, and then create a new repository here. okay, now this has finished. so the hydrogen storefront was successfully created. let me also show you what happened behind the scenes on github. so we basically have this new repository here- hydrogen test- and it pretty much just duplicated the demo store templates for hydrogen, which you can also clone or duplicate if you start a project from scratch without the integration, without the oxygen sales channel integration. but the main benefit now is that the hydrogen configjs already points to my development store. let me show you that. so here points to my development store, coding with the undeath and here we have the acc.

More:shopify plus vs bigcommerce

5 Tips For Better Shopify Theme Development | Tips For New Shopify Theme Developer

how's it going, guys? it's bernard and i decided to make a new video. it's been a while, so i prepared myself and while i was cleaning, i was looking for q-tips and i found five of them. and while i was looking at them i notiked, or i thought, maybe i can give you guys the tip- you know the tip- to become a better shopify theme developer. so in today's video, i'm going to give you five tips to improve your shopify theme development. number one is to use a code editor like vs code or sublime text editor, instead of using the built-in code editor of shopify, especially if you're working on a big project. this will save you a ton of time from typing codes, a lot of codes, and this will also save your eyeballs from this. you know why would you stare at this bright? so, as much as possible, try to install vs code or sublime text editor, because most of these code editors they do have a built in dark mode interface, or at least they are customizable. and once you have your code editor installed, try to also install shopify cli. that way, you'll be able to make changes to your shopify theme project without ruining the main theme of the shopify store that you're working on. another thing that you can use with shopify cli is the theme chat. this will help you find the issues in your project or in your code, like typos, missing variables or unused variables, and the list goes on. number two is to plan your project. are you building a shopify theme from scratch? if so, then create a plan. make a plan, make a mock-up design. so you know what to do now about making mock-up designs or web design plans. it doesn't have to be the polished. the whole point of planning is to help you go through the steps of making a shopify theme. you can use anything with this planning stage. it could be photoshop for making the mock-up designs. it could be just a document describing your theme. it could be a wireframe- it's all up to you. but if you're working with someone, then make sure that others can understand your web design plan. also, before you create shopify themes, you should know first what this theme is for like. is it for a shopify store that only sells one product? is it for a shopify store that sells multiple products? what about the niche? is it for gardening? is it for clothing? is it for tik? is it for women? is it for men? i recently had a client asking me to create a shopify theme from scratch and i asked him what is the niche? so he told me that something related to gardening. so with that kind of with that information, i knew exactly what design i'm going to, i'm going to create and i'm also i also know what color palette that i'm going to use. so knowing all of this information really does help. but what if your client is only asking you to create a feature or a section? if that's the case, then what you should do is to learn and understand the shopify theme that your client is using. make sure that what you're going to create matches the design of your clients shopify theme. also, if you're working on a pre-existing shopify theme for your client, do not create a new stylesheet or a new css file. as much as possible, do it in the existing css files. do not create your own stylesheet, because if you do that, you'll just increasing the file request of the shopify store and that could slow down your clients shopify store. number three is to use the extension shopify theme inspector. so what is this extension? shopify theme inspector is an extension for chrome that helps you understand the timing of each node of liquid used to generate a page. this is shown using a flame grab. if you don't know what is a flame graph, flame grab is the grab that burns all of your sims away- stop. on a serious note, flame grab is a collection of call stacks represented as a column of boxes that is sorted based on their total time. you can click on these nodes to see more information about the specific node, like which file this node is coming from and how much time it took to finish loading. number four is to use shopify developers official blog and documentation. i don't think i need to explain this further, but there are plenty of good artikles and documentation in shopify developers page that you can read to learn more about shopify theme development. you can also check out our blog. i'll put its link in the resources below or in the description below. number five is to learn javascript. unfortunately, i've seen few of my students and they are not familiar with javascript, which is quite unfortunate because you can do a lot of things with javascript. you can do a lot of awesome things with javascript. in fact, you do really need javascript to create an amazing shopify theme. there are plenty of tutorials out there about javascript, so go ahead. learn about variables and classes, making iteration, making http requests- that one is very important, make sure you learn that- and manipulating dom. that also. that's also important, because you can't just rely on liquid. unfortunately, liquid is not a front-end language, so if you want to make changes to your dom elements, if you want to, you know, change the content of your page without reloading it, then you only have javascript to do that. i mean you can also do that with css, but you can only do it with styles or changing colors, changing effects, etc. i'm more toking about the form inputs: changing the values, changing text, making pop-ups, making cool effects like scrolls, zoom in, zoom out- mean you can also do that with css, whatever, but you get my point. so there you have it. those are my tips to improve your shopify theme development. but of course, everything that i said in this video is purely just from my experience. i am no way saying that i am the best shopify theme developer or shopify developer, nor the best web developer, and i'm pretty sure you all are the best shopify developer out there. you're better than me, i know it. anyway, i hope you guys enjoyed this video. if you did, let me know by hitting the like button and subscribe for more shopify theme development videos or something like this, if you want more videos like this. anyway, i'll see you guys next time, peace.

More:shopify order status page

02 - Creating Fresh Development Store Shopify Theme Development

hey, welcome to another video. in this video we are going to create a fresh um development store on the shopify partner. so far, uh, this is like the starting point and i assume you have watched 10 video in this playlist. if you already know how to use shop shopify, how you can create a partner account, on how you can kill development store, you are good to go. but if you are not, please watch 10 video in this series, because for the rest of it i assume you already know how to navigate around shopify partner. now here we are in the development tab. from here we are going to create a store. just click add store. and here you have two options: either you go manage store, manage your storage for the client, you send a request to them and they accept. you bring changes to the resource. but we are going to create a development store, so let's give it a name, and the name could be anything, as long as someone already is not like getting that name. so, uh, by that they are going to add this extension of that, my shopify. it will be always free to use, but the front page of your store will have a password. no one can see it. that is the limitation. previously, like one year ago, you could disable the password, use development issue for yourself. it had http, it had the domain. you could connect your custom domain and shopify realized a lot of people use it as a landing page and that's why they put the password. you cannot disable the password, which is not a good move, but still, i'm going to give it a name code: inspire. so because this is already taken by someone i don't know, but i can call it div. this is also like reserved, so i should find something that which is not reserved. so i'm going to call it team. yeah, this one is not taken. uh, this is going to be my domain, my email, and then let's enter a simple password. so i will use a basic password. using this password, you can log in directly. so make sure you remember your password and it does not match. let me enter the password again. when i type in front of the camera, i don't know, it is a bit annoying if someone is watching me typing something. that's the same thing. now, here is the option in here: preview, developer preview. if you enable this one, there are some developer apis which is available on the development store and you can not transfer your store, which which means you can create a development store later in the future. you can transfer it to a client. but if you enable this option, you cannot transfer it to a client. so if you are building the whole administrator for the client, adding a product theme and all sorts of this stuff, you should not check out, like, check this one, but i will enable this one. uh, this is where you are going to search for, like, which of the feature you want to check out. i don't want to select anything. i don't know if this is required, but let's go with none. the development preview. this is the address, not my current address. so if you send anything here, it's not going to be me. so, and here is the purpose, i'm just playing around or testing key mode app, so let's save it. it will take a few seconds. i'm not going to update the password, because it will update my partner password. i know which password i use. it will take a few seconds to create the development store for you. so yeah, it is success. let's see if it redirect us to the story one and throughout the course, we are going to use the shopify dev uh documentation extensively. the reason for that is because i want to show you how to navigate around. this is the kind of fusing part. the documentation is not really like a step-by-step guide. all you have to do is, like you have to play a lot with the documentation and you have to find where things are. that's why i want to show you around and how you can navigate, find things. that way you will be more experienced once you finish the course. so this is my development store, just the basic. here is where you see the order, product, customer analytiks, apps, discount and this is where we uh focus a lot. in the theme section under android store, you can see there is one theme called down, which is already here. this is the store 2.0 theme that shopify created. there is a lot of thing we will change in this theme we can like. this is the starter theme. shopify also says: if you check out the documentation, they tell you that you can start using the down, building your own team in here. this is what what we will do, but i promise i'm going to write 50- or not like 40- less good than down, and still our theme will function the same as brown team, because i have checked down. there is a lot of code which is extra, even joystrips, css, all of them i will. i'm going to remove the extra code for you. i'm going to like recreate that and you will notike how much code we can like save we can. we do need a lot of it, but beyond that, it is also about maintaining the team. when you build the theme in the future, your client want to maintain it, like some other developer is working on that. that is also the important thing. a lot of people don't care about that part. they just create the team and say, okay, it is working, fine, nobody is going to extend it in the future. the extending or adding more feature is more important because in the future, um, someone is going to work on that. i want that part to be very easy for you. that's why the theme is open source. if you build it for your client, it will be much easier to to just copy a feature and put it in another theme with zero configuration. so that is what i will do in this video. but here you can preview, you can duplicate your theme and you can preview your duplicated theme. you can download it, you can edit the code. the code editor online is not the best, but it is really good, and you can edit the language, rename the theme if you would like to. but for now let's check out our story in here and this is our store with new product. these are just the placeholder. there is no product. if i go to the products, you can see there is no product and in the next video we will start um configuring our theme and i will show you what tool we can use to configure our theme. there is like which routes we have to go and there is cli, team kid, and we will discuss more about that in the next video. i hope this video has been informative. thank you for watching. i will see you in the next video. you

Nix-based development environments at Shopify (NixCon 2019)

so are you guys ready for the last tok today? we're going to begin in 30 seconds, so the last tok of today is going to be about mix based development environments at Shopify. Biber killaby, given my hand, does this work all right? so I'm aware that I am standing between many of you and beer, so I'll try to keep this so much short and somewhat entertaining. I work at Shopify, where ecommerce company software is a service company. we have about 6,000 employees and maybe one to two thousand of those or developers. so that's I work on developer tools there. so that's a bit about this. so what the company does isn't too important, but what we run on is for context. so our developers use MacBook Pros- we have like something like a thousand of them- our CI is based on docker and build kite, and our production is mostly kubernetes and Google cloud. so what that means is like we're really straddling this world of Darwin and Linux. development happens entirely on Darwin, basically, and then production is all Linux. that works in large part because most of our code is in Ruby, JavaScript, things like this- interpreted languages. Ruby is very dominant, especially in our older, more central code bases. relatively few of our projects have any sort of compilation step. they all basically run from the source, except for you know, we, like any company, have a bunch of stuff in various languages and some have compile steps, but the really critikal core applications that hundreds or thousands of people work on are basically interpreted meaning that we have no build phase in development. so that kind of informs the tools we build, because we don't care so much about build systems. but we do have the problem everyone has where you end up with as you grow over time and have more projects. they all have their own read me with like setup instructions and you're going through this readme and you know, trying not to get annoyed that having to install, you know some partikular version of my sequel. so, like I'm getting to Nick's eventually. just I'm trying to give you context on on what, what I'm adapting this into. so dev is this tool, that that manages all of that kind of stuff. it kind of has. I like to think of it as three groups of commands. on the left you have like locating code bases. the middle is a command that sets up all of the dependencies to run that project. on the right there's a few kind of standardized keywords that we encourage people to implement. so the first group: see if my screencast works. yes, so you can clone a project- we is the short name and it kind of locates it on github. it clones it automatikally, changes into that directory. and then we have another dev CD command that fuzzy matches, based on all the projects that exist on the system. nothing really super exciting there, but it's using a shell hook which lets us change the directory. dev up is the real meat of it. so I created our toy app here- just ignore what's happening on the left side of the screen for a second. but basically dev is configured with his dev gamal file, which is kind of the the minimum possible configuration that we could use to specify what actually needs to happen to run this application. and keep in mind like this is setting up everything on Mac OS to run software. and the thing about developers, Mac OS machines, is they're all broken in a million weird ways that you don't expect, because developers do strange things to their machines, right? so this all has to work on a thousand machines and the amounts of that we have to do to make that all happen is truly astounding. but so yeah, basically what we're saying is up is a list if we call them tasks. in this case we've got a ruby task specifying a partikular version and a bundler task. the gem file is what bundler uses to specify its dependencies. we just list one- it's called CLI UI, which is a really trivial- where small at least- gem that we maintain. and then over on the left it goes through some stuff and runs them. so number one is some global stuff that happens in every project. and then we did the tasks that we listed. so kind of critikal to this paradigm as met and meet is the API that we used to implement all these tasks. it's like if Matt fails it runs it, otherwise it skips right away. let me rephrase that: it runs Matt's, if it's false it runs meat and then asserts that met must be true. so when you see gold stars here, it was like it already ran true and didn't decide to run the actual satisfier. it did run the satisfier for bumble install and then test server console build. these are just like it's basically just a mapping to like some command to run. so this is super lightweight but it gives us a huge amount of consistency across our thousands of projects because we just sort of mandate that developers should put something in whatever of those fields are useful, the main thing with dev is like one command to a runnable project, and of course, this is something that nicks can do too, and so you're probably starting to see where I'm going with this. the reality is that our configurations look a lot like this, where we have like homebrew and then I don't know, a million packages and like actually just about all of those are only used for building ruby gems with native extensions, right. so that feels kind of not great, especially because then when you have, you know, hundreds of projects that all have the same gems with native extensions, you're all redundantly specifying the same homebrew packages and then when, like, one of those homebrew packages updates, you don't have any ability to like manage that that version update. so you like end up in this state where a thousand developers have a thousand different versions of like libgdx- a bad week. so there's two things basically that we do in dev up: we provision files onto the machine and we start some process- right. this is basically what a software dependency is. is one of these things? like you either have a file someplace or you have some typically socket listening on something. so NYX is great at provision file, provisioning files. I learned today that it's actually kind of capable of starting processes on Darwin, but I'm not sure we'll see. so yeah, like let's see is next. it sounds great for for repeatability and and just my team's sanity to to like forklift all of dev up on to Nix, and so I've been working on that for a while. the rest of this tok is kind of like an explanation of the problems I ran into and the solutions I like kind of came up with, before eventually realizing that in most of those cases those are already solved problems and I just hadn't found the solutions. so like there is some neat new stuff at the end. but I actually like learned about some things today where I'm like: wow, I can throw away so much code. so I'm gonna tok about the boring one first. I know you don't like you're not thrilled about the prospect of me toking about authentikation, but we're at a company where we unfortunately have to care. so we- this is kind of tangential- but like just quickly we use an overlay to distribute a bunch of our private stuff. Devi's distributed literally as a bag of files that slosh off /dev, and so we just put an overlay in that repo that distributes with the same mechanism and we linked it from like nick's packages dot config thing. it's fine. so the the main problem we've had with this is like you can use HTTP basic auth with like the, the net RC thing that nix does, but we kind of like would really like to use oauth2 to Google cloud for a lot of things, and man, that's just painful. so one thing that we want to do is like we have a private overlay, so of course we want a private binary cache so that you don't have every developer building everything from that overlay. so Kasich's is an option for that. but the authentikation model didn't work super cleanly for us and this was an experiment at the time and it's just insanity to try to get our finance department to fund an experiment. maybe not, I don't know. I didn't feel like dealing with it. so the thing is our users already have like

Shopify Theme Development in 2022 with Shopify Dawn and Shopify Online Store 2.0 Tutorial

[Music], so [Music], [Music], [Music], so [Music], [Music], [Music], [Music], [Music], [Music], [Music], [Music], huh, [Music], [Music], [Music], [Music]. hello, what is up guys? welcome to another live stream. how's it going? let me know in the chat that you guys are here and alive. hopefully you guys can hear me. if not, somebody please let me know before i embarrass myself for another half hour. uh, but today i'm super excited because we're actually going to be looking at the new shopify online store 2.0 experience. so, if you guys aren't already aware, at the the end of july, early august, shopify announced a new theme and a new online store 2.0 experience that essentially makes a lot of really necessary updates to what i would consider a kind of antiquated way to build themes. now, if you guys are watching this, you may have already seen, uh, another live stream that we did, where we actually went in and we set up a modern development workflow, uh, using shopify and using theme kit. uh, but apparently they've just completely dropped the support for themekit in their new theme and the online store 2.0 experience and made it a little bit simpler actually, uh, to go and be able to use git um for uh version control and to be able to push your theme up. so we're gonna be looking at all of that good stuff. but before we get into that, uh, if you haven't already, do me a favor, go ahead and like this video, subscribe if you haven't already and click that little notification bell, because we're going to be making a lot more content like this for the rest of the year and well into the future. so if you're interested in web design, interested in web development, definitely subscribe. but let's go ahead and get started. so this is actually in end of june, early july, so i misspoke. but they introduced the online store 2.0, uh, and there's this artikle that i'll go ahead and i'll link in the chat, uh, where they tok about what it means for developers. looks like we got some people in the chat. hey ray, hey oscar, thanks so much for hanging out. welcome to the chat, guys. if you have any questions at any point, feel free to drop them in there. i'll be reading them as we go. so just taking a look at this and hopefully you guys can see it. let's make it nice and big. online store 2.0 opens up massive opportunities for developers building themes and apps for shopify merchants. we've rebuilt the online store experience from the ground up and are introducing a new set of developer tools to help you create amazing experience for merchants and shoppers. let's tok about exactly what that is before we go and we check it out for ourselves. so the first is an upgraded theme architecture. essentially, the sections that we've become so used to using on the homepage are now available on every page, so you're no longer pigeonholed to not being able to use those sections on an about page or on a product page without a developer. before, you used to have to have a developer be able to add that section over to that page, so that essentially, only people who knew how to code would be able to do this kind of customization. now, sections on every page- it's just gonna come right out of the box- one of my favorite additions, honestly. so there's some specifics about how it works. it uses json templates, so we'll tok about that a little bit later on when we tok about migrating over to shopify 2.0. but another cool thing is that they added theme app extensions with the app block specifically. it looks like you can just go ahead and add whatever apps you guys have installed. if they have a block, you'll be able to add it anywhere on the website, which is really, really cool. so modularity- we knew that, uh. flexible store content, the improvement to metafields: i think this is probably one of the coolest things, and we're going to go into detail about what this means. but essentially before, when you wanted to link a data object from the database, you'd have to do it through liquid, so you'd have to have a developer that knew how to do that. now you're going to be able to essentially tell different fields to go ahead and use metadata that you can save on individual products, on individual pages, so this way, you don't actually need a developer to go and make meta fields. it used to be super convoluted, um, if you know what i'm toking about, leave a comment please, because i want to know what you guys think about the new uh metafield experience. but other than that, there's a few minor improvements here that will kind of breeze through. what i'm really interested in, though, is- this part right here- the new developer tools that were added. so with the introduction of the shopif, shopify github integration, an updated shopify command line interface tool and theme check, you're going to be able to experience more robust theme development with version control, a better sandbox environment to develop teams locally, and streamline development with a real-time linter tuned for shopify theme. so there's a lot of things that we gotta unpack right here. right, so we've got uh, shopify github integration. you integrate directly with shopify with a github right now, which is super, super cool. that means that we can actually start to think about using github actions to deploy themes. that might be something that we're going to be able to do either now or in the future. an updated shopify command line interface tool: they're essentially using this updated cli tool to phase out themekit in the shopify theme development workflow. so i'm super excited to dive into that and see what what it has in store for us. and then, finally, theme check- i assume this is like their linter- to make sure that whatever code that you're pushing to your theme, that it's build quality and that it's essentially going to work. let me get a drink of water here, sorry guys, thanks. so we're going to dive into each of these, hopefully in detail, during the stream, and there are a couple of other things here that we'll probably want to go into, but i think the first thing that we should do is log into our shopify partners account now. if you guys don't already have a shopify partners account, what are you waiting for? it's free. you can literally go, create a shopify partners account and the day that you have a client or a project that's on shopify, you can go and you can build it on that account without having to pay the monthly fee until you're ready to launch and start making money. so whether you're a developer or whether you're a marketer, you should have a shopify partner program. this is doubly true if you're a freelancer or an agency, because if you have one of these shopify partner accounts and you build a website for somebody and then they go and they upgrade from a free account, like a partner's account, over to a paid account, well, guess what? you're gonna get paid commission for the whole first year of their subscription. so this is an awesome way for you to create stores for people and then go and deploy them, and when they upgrade their account, you're going to get paid a little bit off. the top. shopify is going to say, hey, thanks so much for making sure that these guys stayed on our platform. here's a little money for you to go and spend it on yourself. so we've got our shopify store. i'm actually on the wrong one here. i'm gonna go into this one, which is pretty much empty, i believe. let's see, let's go into themes. okay, let's go into stores. okay, we've got here a development store. this is exactly what we set up during our last live stream. let's go ahead and click login. we're going to log into that store. if you don't already know shopify partners, you could go ahead and you could add multiple stores. you can pretty much add as many stores as you want and you can go and you can work on them here. so anytime there's a new feature or anytime there's a new theme drop- which is very rare for shopify- or even if you want to just kind of test things out, you can create a store right here. you can kind of play around without having to pay shopify any money. so this is a really, really cool way to learn.