How to use Github with Shopify (Online Store 2.0)

hey everyone welcome back to this series on shopify online store 2.0 in this video we're going to talk about the new github integration with shopify this is a very powerful and exciting tool that has come out in the suite of changes that shopify have labeled as online store 2.0 i'm going to jump straight into the tutorial today and show you how we can automatically synchronize shopify themes with branches on repositories using github so in today's tutorial what i'm going to do to illustrate using github in shopify is to take an existing project create a git repository connect it to github and then use that remote repository to connect to our theme library here on the shopify store that we're working on in my case it's chris testing shop as always all right so for those of you who haven't really been across version control in shopify before this virtually there's only one native way to do version control in shopify and if we click on edit code and look inside here we can see what it is let's open up any particular file and as you can see next to the file name if we click on older versions this drop down menu appears and we can revert to an earlier version this is a very primitive form of version control it doesn't work as good as git git has so many more features in terms of looking at line by line differences between commits and branches creating branches for that matter merging in branches and pushing and pulling codes so git is a much better version control system than this which was all that shopify offered you up until now so clicking out of that i want to draw your attention to an article i wrote last year about using git with shopify i encourage you to still read it even though it's a little outdated now because we do have this shopify github integration now but essentially this is how i used to do my git before the integration came out and because there was no integration what i would do is i would of course have to move the code locally so i talk about the development workflow here i would have to move that code locally as i recommend for all developers to do and of course i was using themekit at the time as shopify cli has only just been extended to work with themes which we'll cover in a later video so what i had to do was i had to synchronize my theme code with my branches manually so as you can see here in this little diagram you of course have your current live theme i synced that up with a master branch and then have a staging branch and then if there's multiple developers working on the theme you can have a branch for each of them and then they would merge into staging you would look at staging and then you would merge into master and go live but the problem with this is you had to do this all manually and the changes only went one way so using this one-to-one relationship between themes and branches we were able to determine which changes had been carried out on which theme and the only issue is that this relationship this structure here had to be maintained by a lead developer project manager and perhaps one of the biggest issues is if anyone was to go inside this theme make a change inside this online store editor any of these changes wouldn't be pushed back into git so git would only work with your local development environment because you would have set it up in your project but anytime you make a change in the store those would not be recorded in git and so when you pushed your theme code from git into the store it had the risk of overriding any of the code that went in here now of course there was ways for us to get around this one of the ways was to always make sure we download the latest theme code into our branch locally and then push after merging any changes that come from live but it was a manual process there was a lot of things that could have gone wrong but now as you'll soon see with this shopify github integration the theme will always mimic the branch and any changes that we create on the theme on our online store will go back into the branch so it makes it much more robust and secure than what we used to have to do by keeping these in sync manually okay so i'm going to close down this article and let's get started i've got my github account here i'm already logged in and what i'm going to do is open up my code editor with this project that i have here it is it's basically the debut theme with a styles folder and a gulp file so this is the same project i had in the video i made recently called how to use theme kit with scss as you can see here perhaps not obviously but i don't have a repository set up yet so what i'm going to do is run git init actually i'll make this bigger for you guys and then in my terminal here i'm going to run git init make sure that you're in the project directory when you when you do this hit enter on that now you'll see that because of the tool i'm using i'm now got get master and as you can see there's 5 000 changes here that need to be added and committed so i'm going to do git add dot to add everything to our new commit and as is the convention with using git i'm going to run git commit and call it initial commit hit enter on that now you can see that we've made our initial commit now i can go back to github over here click over here to create a new repository i'm going to call this debu with scss i won't do a description i'll make this private let's create the repository and then now we can run git remote add origin they say to make a main branch but i prefer to just use master so i skip the earlier steps i'm going to run clear and then i'm going to run git remote add origin followed by the address of our git repository on github and then now i can run git push origin master this will take a little bit of time to upload but i'll fast forward and i'll see you at the end all right so that code has now been pushed to the remote repository i'm going to switch over back to github now and i'm going to hit refresh and you'll now see that our code has been added and is in the master branch okay so now that we've got our repository here with at least one branch which of course we always have at least one branch i'm going to go back into my testing shop here close this down and let's connect to github i haven't done this before so you should be able to see how it works from start to finish i'm going to click add theme connect from github and this side panel is going to pop up i'm going to click login to github it's going to open up this new window here and here it says that you can't connect through the partner dashboard okay i'm gonna log into this store from another account and i'll be right back all right so i'm back in here i am in the same account again but i'm now in an incognito browser for some reason i was in the store admin account but it wasn't working still so i'm going to try the process again here click login to github choose the account to log in and now it's going to ask me to log into my github account and now you can see that i have successfully connected with github not sure what happened there sometimes with shopify there are login issues related to caching so i just got past it by opening up a incognito browser you could probably achieve the same thing by clearing your cache if you're willing to do so so yeah just a weird quirk by shopify there i was actually logged into the correct account i just needed to get into incognito to make this work all right so as you can see here we've now got these two drop down menus one is for the account and the second is for the repository so if you're working in different organizations you can change this account here i'm going to open this up click add account and i'm just going to select myself here the other two here are organizations that i've worked with in the past they're blurred out for privacy's sake all right so now here you can see it's going to ask me which permissions i am permitting basically is it going to be all repositories or is it going to be only select repositories because i've got a lot of code on github outside of shopify themes i'm going to click only select repositories and i'm going to select the one that i just created so it was debu with scss all right i'm going to click on that one and now if i go here to click install you'll see that i should now have access to that account so i'll go in here again select my own name for my own account go in here and the only repository that i should be able to add right now is that debut scss debut with scss wasn't it fee all right i'll click on that one and as you can see this is a list of branches and we've only got one branch right now which is master so i'm going to click connect and what that's going to do right away is create a new theme that is automatically synced with this branch okay so i'll close down this little side menu here and as you can see we've got our new theme the name is just going to be the repository with the branch after it but as you can see down here we are linked to this branch on this repository so i can change this to project master or whatever i want to call it rename it you can call the theme whatever you want inside of shopify but it's always going to be synced with this master theme okay i want to show you that now if we go in and preview this theme i can now make a change locally without using theme kit or any other build tool so i'm going to switch over and if i simply push a change to the master branch that change will be synced to the theme so i'm going to clear this and then i'm going to go over to let's do something like we've done before a really obvious one let's scroll down here and just do body actually let's go into our chrome dev tools and test the change first before we do it let's just say with this work background color there we go background color aqua on the site header logo link so i'm going to take that class head back into here and make the background color aqua all right now in order for that change to go live we're going to have to add it commit it and push it so as you can see here our change has been recognized via git inside our code editor here and if i go to the source control panel i can click here to see the diff okay so i'm going to stage that change and for the commit message i'm going to say change background color of logo commit that and now for that change to go live we need to run git push origin master now that code is going to be pushed to our github repository and of course our shopify store is synced to our github repository so that change should now be on our store so if i refresh the page over here you'll see that we now permanently have this code and if i inspect it you'll see that our code that we just inserted is affecting the background color of our logo here all right so as you can see perfect synchronization with the remote repository inside our theme library now this is really handy and one of the best features of this is if i go in here and i click edit code and let's just say i go into my theme scss file again and i remove that piece of code that we just added by scrolling down to the bottom finding it here and removing it hit save on that you will soon see that shopify will make its own commit to the branch and that will now sync in the other direction with the github repository and this is a really big deal because often clients will go into their online store editor insert code and mess up the whole process so having this version control for the online store editor as well is really powerful now the thing to note here is that it might take some time for the commit to go through so if i go over to my code editor here and i hit refresh or fetch changes you'll see it might take some time to come through but the commit should go through to the remote repository and when we fetch and synchronize the changes we should start to see that our reversal of that code addition should come through locally as well so i'm going to click this again and as you can see there you go and the commit message is shopify online store bot update from shopify theme project master there you can see that shopify is making its own commits as well to make sure that the theme code and the repository are kept always in sync so this is a really cool feature with shopify it doesn't require us to manually ensure that the theme code is in synchronization because we have two-way synchronization now and if i click library here scroll down and we can see here that there is a link to view logs here we can see all the github integration theme logs so all the changes in this drop down that have happened with this theme okay so we can use this to verify that the integration and the synchronization is constantly happening all right so now that we've seen how shopify keeps our branches and themes in perfect synchronization let's talk a little bit about workflow so in practice you would probably have your master branch as the live theme so i'm going to do that right now i'm going to hit publish on that and i'm going to rename it live theme usually you would name this something more descriptive maybe the date that it went live and the change that you actually made on the theme for this tutorial i'm just going to call it live theme all right so now your live theme is synchronized with master okay and what you might want to do at this point is start a new branch so i'm going to go into my code editor here and create a new branch i'm going to call this branch staging but you could also call it dev or whatever you want to call it i won't go too much into how to structure your branches and everything in this video this is more so about the theme integration but let's talk a little bit about workflow because i want to show you how using this github can really transform and improve your workflow so i'm going to create this branch of staging i'm just going to run a random command here to make sure that we are in staging and from this point what i'm gonna do is let's create another change what what are we gonna do um let's try and make the body font times new roman totally not recommended actually why don't we do courier new all right so we'll make the entire body family font korea new so obviously using the github integration in order to see this change what we're going to have to do is add commit and push this change so i'm just going to review the change over here yep we're going to change the font family of the body so i'll right click here to stage and then in the commit message i'm going to write change body font all right commit that change and now publish that branch i'll fast forward a bit here all right so that branch should now be published and if i go back to my shopify store here click on add theme connect from github we can go and select that branch actually i think i have to delete a theme because i've run out of available themes give me one second to do that okay let's do this again connect from github select the repository same one as before debut with s css and then now i'm going to connect the recently published staging theme rather than the master theme all right i'm going to close down this side thing here here you can see our new theme connected to the staging branch is spinning up as that's spinning up i'm going to rename this just staging branch or just staging and let's click on preview to see those changes as you can see here we've got courier new as our font so if i click onto computed look in here i'll show you a bit closer up our new font is crew and new so that verifies that that change has come across and this is obviously on our staging theme all right so we're not on our master theme at this point when you've previewed the theme and you like the changes so you're like okay we've got our staging theme ready we're all good to go at that point we may want those changes to go into our master or live theme and for that we run a git merge okay so i'm going to go into my code editor here you can do this in github or you can do this locally and i'm going to go over into master inside master i'm just gonna run clear so that we can check we're in master and in inside master first of all i'm gonna make sure that we're synchronized from all the changes from remote and then from here i'm going to run git merge staging so here you can see it's asking me for a commit message if i look in here that's the only change from that branch i'm just going to click here to commit that and then i'm gonna click here to synchronize those changes with my master branch then i'll go back into here view my live theme and you can now see that courier new is the new font family on my live theme so just verifying it in our computer properties here there you can see korea new so that's a little bit of the workflow with github and shopify previously you couldn't really merge themes like this but using the power of git you can so now whenever you push to this master branch you can rest assured that the changes you push to this master branch are going live now of course there's an elephant in the room here and that is that we don't want to always have to push our code to see our changes and this is exactly where the shopify cli comes in now the shopify cli allows you to create a development theme and you're able to run that locally so this new github integration actually works pretty well with the new shopify cli and how that works is you can work on your theme code locally and then when you're ready to see it on your store you can push that code and then check it out on your store and so that's what we'll cover in the next video alright guys thanks for watching this video as always if you liked this video and you learned something new today hit like on the video comment below if you have any questions or comments and just to note for all the skillshare subscribers i have added brand new videos to all three of my existing shopify classes on skillshare to address all of the online store 2.0 changes i will be talking more about online store 2.0 on this youtube channel but for all the latest info if you want to get it right now and you're on skillshare go check out those classes i've added a few new videos there for you until next time i'll see you on the next video

Channel: Code with Chris the Freelancer

Views: 4,773

Keywords: Chris the Freelancer, Code with Chris the Freelancer, Web Development, Learn to Code, Shopify, Shopify Online Store 2.0, Online Store 2.0, Github, Shopify Github integration, Unite 2021, Shopify Unite 2021, Git, Git with Shopify, Shopify theme development, Shopify themes

Id: 72TSwHEhfDs

Length: 22min 1sec (1321 seconds)

Published: Mon Aug 16 2021