Here's how to use Theme Kit, the Theme Kit app and GitHub desktop to backup your theme files on GitHub.
Links
Transcript
Hey, Scott Austin here from JadePuma in this video, I'm going to walk you through the process we use at JadePuma to leverage GitHub for versioning of themes, right? And there's multiple ways that you can set this up. So I'm going to show you how we do it, which works best for us, but you know, you can do it, your, you know, a different way for, for your business. Of course, now I just created a new development store. And so we're going to start from, you know, scratch and how this is all set up. So here in this development store, I've got my original version of the flex theme. And then I have a version of the flex theme that I've edited and customized. So I always like to have the original version in there so I can go back and reference it. And things like that.
Now here in the Shopify admin, you'll notice there's an option under ad theme to connect from GitHub. And we don't directly connect our themes from GitHub to the Shopify admin. And the reason for that is we're not the only people that are touching this theme, right? So my clients will sometimes edit the theme and app support. People will always be editing the theme. And, you know, as you work with app, you know, support teams, a lot of times they'll copy your live theme, do their edits in an offline version, and then ask you to review it and then publish that. So, because there's so many people touching the theme and they're making copies of it and changing out which one's live, we find the connect from GitHub option, not useful in those scenarios. The connect from GitHub might be useful if, if you are only one team is touching the theme at any time, but so many people have, or so many different have their fingers in the theme editing that we, we find going that route is not useful.
So instead we use a Shopify developed app called theme kit to save versions of the theme and, and save the versioning of the theme over time, how it changes inside a GitHub. So we use that for our purpose, but don't ask our clients or the different app support teams to use that. So it's a way for us to keep track of what's going on inside of a theme, and what's been changed by us or by other teams, right. It's really useful to, you know, take a snapshot of the theme before you ask app support to do something and then go back and look afterwards, take another snapshot out of the theme afterwards and see what has changed, you know, by that theme's automated processes or the support team. So let's walk you through that whole process of how to set up theme kit in a store from scratch. So the first thing you're going to need is you're going to need a GitHub account. And I'm not going to explain how to create one of those there's pointy tutorials out there in the world for, for that. And then I use a windows PC. So I also am gonna be using the GitHub developed app for windows. So we're going to assume you have those figured out already. So what I'm going to do in my store is I'm first going to go into apps and I'm going to customize my store, which takes into the app store. And I'm going to download the Shopify developed apps called theme kit. So I'm gonna search for apps and I'm gonna search for in kit. And there it is right there, theme kit access by Shopify. And we're gonna add that to our store and what this app is going to do. It's gonna open up access to the theme kit that we're gonna use locally on our computer to be able to down, download the files or upload the files for the theme. So just gimme permissions for that.
So now I've downloaded that app into this store, and now it's opened up the app inside the Shopify admin for the think kit demo video developer store that I created for this purpose. So the next thing I want to do is create theme kit password, and you can have multiple passwords, so different people have their own passwords to access the themes. So here, you know, the developer name, I usually just put in the agency name, JadePuma, and I actually usually send that to shopify@jadepuma.com, but you, I could send, send it to my other email addresses. And this comes into my inbox right now, the way I've got it set up so I can gonna create that password.
And now I'm gonna wait. And yep. My email just showed up over here. So here I got this email into my inbox, cuz Shopify at J Puma goes into my inbox and it says, get them kit it password. I'm gonna click on that. And it's gonna take me back into that Shopify store, the admin, and it's gonna show me the password and you only get to see this one time. So you gotta make sure you copy it now, before you close out the window. So then the next step I'm gonna do is I'm gonna go to GitHub. I'm gonna create a new GitHub repository for theme kit demo video. I usually name this the same thing that the Shopify store is named. And here, you know, I named this Shopify store theme kit demo video. I like to make things brain dead simple. So the same names, I don't get confused.
Cuz I get confused easily sometimes and I make this a private one and I usually for this here, let's just go copy this in the description. I just put the URL of the site. It's not necessary, but that's what I like to do. So they're gonna create that repository. So this is happening up on GitHub in the cloud. The repo is gonna be created. And now what I'm gonna do is I'm gonna go to my GitHub desktop application and there's a link to the download for this in, in the show notes a and I'm going to clone a repository. So I've already connected this GitHub desktop app to my GitHub account. So it, it can go up on the cloud and, and search in my different team repositories and personal repositories. So here I'm just gonna put in theme kit demo video.
There we go. And there it is. So I'm gonna clone this and automatically put it into the GitHub folder under my documents folder. So it's gonna create a new instance for this repo on my local machine. So I hit clone and there it goes. Now what I'm gonna do is if I go into a file Explorer and I know that I'll move it in and out of lots of things, it is a little bit of a complex process. The first time you do this for the first few times, you do it, but it becomes pretty intuitive. You know, once you do it a couple dozen times which maybe isn't completely intuitive, but you'll get used to it. It doesn't seems complex when once you do it a few times, so here there's a new folder now created theme kit demo video, and this is syncing to my GitHub repository and it's an empty folder right now.
So what I'm gonna do is I'm just gonna go over to one of my other projects and I'm just gonna grab this folder and I'm gonna copy it and then paste it to this theme kit demo video. So we're gonna paste that and I'm gonna open that up and I'm gonna delete all the sub folders in it, which is the actual theme from the other store that this was right. The important thing for me here is this config.yml File. So if I'm gonna open that up with sublime, which is my text editor, let's see if we can find that.
And you'll see here, these are the settings for theme kits. So you need to tell it what Shopify story you're looking at, what the password is and what the theme idea is. Now. Remember that password is what I copied a minute ago. So I'm gonna paste that. Oh, maybe it didn't copy. Let's see if we back to here theme, kit access, I'm going to copy that. It ends in two, a three gonna go back here and paste. That ends in two, a three S we got the right version. Now I also need to get the, my Shopify address for this store.
Anytime you're in the, the admin it's, it's the URL shown there. I'm gonna copy that, go into my sublime folder and change this. And then I need the theme ID of the theme that I want to synchronize. So in Shopify, what I'm gonna do is I'm gonna go to my online store and I'm going to not use the current live theme, which will make sense here in a minute. I'm gonna use the original version of the flex theme. What I always do is I put in the flex theme or any theme that I'm using, I put it in and I make a copy of it to use. So I have that original source there, right? So I'm gonna go here and I'm going to edit code.
And what you'll see up here is this is your theme ID. So I'm just gonna copy that from the URL, go back and see my YAML file and put in that theme ID paste. So now if I save this, I'm gonna close that out and go back here. Now I also have this little command line and this just opens up the command line for me. So another pre requisite to using this is having the theme kit, which works in the command line only on windows having the theme kit app installed on your local computer. And that is different than the theme kit app that you add to Shopify. And I believe, let me check here.
Yeah. So here, this is, you know, the structure of the, the, the page. I'm gonna put this on this. Video's gonna replace this one here. And here's a link to theme kit, theme, kit app, and then GitHub for desktop. So this theme kit is the one you need to install on your local computer. It's up in GitHub also. And it has instructions on how to install it here. You can see how to install theme kit. So they have instructions for you. So what I'm gonna do now is I'm gonna go back to my GitHub desktop, and you can see that it's registered in that folder that I created by syncing or cloning, the repository down local. It sees that there's now these two new files are now in there. So what I like to do here is I just so a theme kit setup, and I'm gonna commit this to the main branch and I'm gonna publish that branch. So what this is doing now, it's taking the changes, measuring them with GitHub and pushing them up to the cloud. So I like to do one last check that that works properly by going back to my Gith in the cloud for this repository, hitting refresh on that page. And there, I can see that folder is there. And the two files that I created are there. So then I close out the GitHub tab, cuz I'm now confident that it's working properly.
Get that out of the way that was that, you know, the email, it sent me with my password and I already got the password. It's all working properly so I can close this out also. So what I'm gonna do now is I'm going to go back into here. So this is my file Explorer, and I'm gonna double click on the command line. And this is just a little shortcut that I created and I, I put in all my folders. So it's just easy for me to open up the command line. Remember I said on your local computer, on your windows machine theme kit is a command line interface. So I'm gonna type in the command theme, which is gonna, because I've already added this app using those instructions. I pointed out a moment ago that Shopify has up on their GitHub repository for the theme kit app, cuz I've installed it on this machine. It'll work. So I'm gonna go theme download.
And now what it's gonna do, it's gonna go, you use that YAML file. Find what Shopify store we're, we're looking at using the password that gives it access to copy theme files and looking for the theme ID that we added. It's gonna download that theme for us, which in this case here, let's take this off the screen for a second. In this case here, what we're doing is we're looking at this offline flex theme, right? The original version of it. So I like to start off my GitHub repost. So, you know, let's say you've been working on a store for months or years or whatever. I like to start with a fresh version of the theme. If you have that lying around still and get that first iteration of what the theme was without any of the edits that you or apps have added to the theme.
So that is still downloading here. These downloads happen much quicker once you start, you know, cuz it's only gonna download differences. So once, once you're doing a theme update after you've edited the, just a few files, which really quick and easy, but the first time you do it, you gotta download all the files and it takes a moment here. And while that's going on, the next step we're gonna do then right, is as those files are being copied from the Shopify admin down to my file, you know, manager file Explorer in my windows machine. So it's, it's creating these folders. It's copying all the different theme files. My GitHub desktop is registering all those cause he's got 198. I keep refreshing this year. Now it's 206 files. It's almost done. There's 223 total 244 there.
And let's see when it's done here, it's still going as you can see here and now it's, it's copying them all. And I just, I'm gonna do another theme down. Let's show you the second time you do it. How much quicker it is cuz looking for differences. It's like, Nope, I got all this files quick and easy. All right. So I'm gonna close out that. So now I'm gonna refresh this window here just by clicking up on this changes element. And like I said, I've got all 223 files. So now I'm gonna commit this to my GitHub repository and I'm gonna call this untouched flex theme, commit that and then push it. And now it's gonna push it up to the GitHub cloud repository and we're good to go there. So now what I'm gonna do is I'm gonna go back to my Shopify admin and I'm gonna look at my current theme, right?
So the, this is a theme that I've made some changes to and customized a little bit, not a lot yet, but it's, there's, you know, a couple dozen changes in here. So I'm gonna edit this one's code and I'm gonna grab this theme ID. I'm gonna copy that. And now we're gonna go back to our GitHub repository local on our local PC and file. And I'm gonna edit that config YAML, right? I'm gonna replace the theme ID. So this was the offline theme, the fresh version of the theme. And I'm gonna replace that with the live version of the theme. And you can right have in your GitHub repository, multiple top level folders for all, all your different theme versions, if you wanted to. And there's sometimes that I do that also, but in this one here, what's nice about switching between one theme ID and another theme ID, cuz you have them in separate folders. You won't see the differences between those versions of themes. If you have 'em in the same folder and you overwrite one with the other, you'll see the theme changes between the different. So sometimes you'll have separate folders. Sometimes you'll overwrite the existing folder. It all depends what you're trying to, to suss out and what information you're trying to get. So here I've, I'm gonna save this.
Now we updated our YAML file. We're gonna go back into that folder. I'm gonna click on that command line again. It's gonna open up the mainline interface and I'm gonna do theme download and it actually tells you, Hey, this is the live theme, which is a nice little warning and you can see we had 223 files before now we got 244, cuz there's been some changes to this theme. So now that that's and save down local, what we're gonna do is we're gonna go back to our GitHub desktop app, which is right here. And it sees that there's 28 files that have been changed and the green ones are new files and the yellow ones are edited files. And the beautiful thing about this is let's look at an edited file. You can see here in the, the setting schema JSON, right, which is got thousands and thousands of lines here starting at line 1000, I added a JadePuma elements to the setting schema.
So it tells you exactly what lines were changed and what those changes were. So it's really useful to see like what an app added or someone else did. So if I haven't touched a client's store in a while and they ask me to do something new, the first thing I do is I go back and I take a new snapshot with GitHub through this whole process I'm showing you. And then I can see what has been changed in that theme in the, in the last six months since I had last looked at it. So it's a way for me to, to catch up to what's been going on in that store and what's been going on in the, the code for theme. So now I'm going to say, you know, these are my, my theme customizations as detail as you want there. I'm gonna commit that and push it to origin.
And now every time that you go and edit the theme, you'll wanna run through that same process of copying a version of that down, right, by going here to the command line and saying theme, download, and then going into your GitHub for desktop and pushing those changes up to the, the server. So you have a complete history. So if we look at one of my other clients stores here let's see youth and earth wholesale, a new store I'm building out right now and you can see here, I started that project on January 10th and you know, I'm gonna taking snapshots along the way. And as I do this, I can see all the different changes that I made or were made by apps and that kind of stuff. And it's a good way for me to, to troubleshoot things if there's an issue down the road.
So that is the process for, and I know, like I said, this sounds complex and it actually is complex to get this all set up and working. But it's one of those things. Once I got this working for my agency, we do it for every single project and it saved our skin multiple times, right. I actually had a client who had a dis employee one time and as they walked out the door and when they quit, they deleted all the themes from the Shopify store. So I had them stored GitHub. It was easy for me to, to rebuild that store for them fairly quickly. It's also really helpful in troubleshooting issues. When you can see, you know, what changes were were made, where, so you can, you know, figure things out. And, and it's really helpful for me as an agency where I might do a customization.
Like I just showed you here on the let's open it up again on the apex one, right? I, I have this, this quick order form that I developed. For example, maybe I wanna use that quick order form in another store, or I have also this, you must log in. Yeah. Require login. As in the same one, I changed the login form to do certain things. So it's really helpful for me to say, oh, I like what I did in this one store. Let me go look at what code changes I made line by line so that I can easily replicate that in another store. So that's the whole process. Hopefully that makes sense for you. Hopefully it's helpful. Thanks for watching.