This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

Connecting Your Shopify Store to Github Using Theme Kit

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. And this video, I'm going to walk through the process on how to back up a theme to get hub for version control reasons. Now there is built in a connection between the Shopify admin and get hub, and you can see that here I'm on, on online store themes. And right here, it says connect to get hub. And we don't use that at Jade Puma. And the reason for that is if you're going to connect your theme that way, then everybody editing the theme and stuff like that has to have access to get hub. And a lot of app developers customer support teams are used to like creating a copy of the theme and working on that offline version and pushing it live in store staff don't know how to use GitHub. So we just use GitHub internally at Jade Puma, but don't require our clients to use it or the different app support teams to use it.

So here's the process we go through to connect all that. So what you're gonna need is access to your Shopify admin for the store that we're talking about. You're going to need access to the G Puma organization in get hub. And you're also gonna need get hub desktop installed on your local computer. Cause what we're doing here is Shopify admin, right? It's a cloud service, it's a SAS service. It's storing the theme in the cloud. We're actually going to download that locally to our computer through an app called theme key, which I'll show you in a second. And then from theme theme can download. Then we're going to upload it back into get hub using GitHub desktop, and that'll put it into GitHub. So we go from cloud to local, backup to cloud is the way it works because we're not doing that direct connection like I talked about already. So here's, here's the steps to go through. The first thing you want to do is go to get hub in the cloud and create a repository under the Jade Puma organization. So here I am in the Jade Puma organization, and all I'm going to do is I'm going to say a new and the get hub repo I'm going to be making right now is for apex chassis wholesale. So it's going to type in apex chassis wholesale. And what I like to do under the description is actually put the, my Shopify URL for that website.

We keep all of our repos private. We don't need to add any options. So what we're doing right now is create a repo. It's going to be a blank repo in the GitHub on the cloud. So that's now done. And then what we're going to do is in GitHub desktop, we're going to go to file and we're going to say clone repository. So you're already logged in your GitHub desktop with your get hub account, which already has access to the Jade Puma organization. So what we should be able to do them, it's just place been apex. And you can see here, there's an apex chassis and an apex chassis wholesales. That's what I just created. I'm going to clone that. It's going to put it in the default folders.

So now we've got that GitHub empty repo from the cloud now downloading and sinking with our local repository. So then what I'm going to do is I'm going to go into my local file Explorer into my get hub folder. And now I should see the apex chassis wholesale folder. And it's empty if I click on it, there's nothing and it can move. That's an empty repo. So what I'm going to do is I'm going to go into apex chassis or you can go into any client client, a folder. It doesn't have to be the same name, right? I'm going to copy the wive folder and I'm going to go into wholesale and paste the live folder. And then I'm going to delete a lot of the content in there as you'll see here in a moment. So all I really want from that is I want to create a sub folder called live and I want to add two files. So I'm going to select all the folders in that live folder, all the sub folders and delete them. So what I'm doing is I'm copying a Y folder and these two files command line, which is just a shortcut to the command line interface, and then config dot Yammer.

And it'll take a second here, I guess, for it to finish recycling all those items. And then while that's going on, what we can do is we can go back to our get hub desktop, right? And now because it's watching that APEC chassis wholesale folder and the local folder, and it sees the changes of those two files that we added to it. So now I'm just going to say a theme kit settings, and I'm going to commit that to Maine. And then I'm going to publish that branch once that's done. I like to go into, get hub on the cloud and make sure, so I'm going to refresh the page and now I can see there's the live folder. So I know that my local, a get hub repo for apex wholesale is sinking up to the cloud version. So I'm going to delete, or just close out that tab. I don't need to check that anymore. Confidence that that connection's working. So now what we've done is we've connected our local repository to get home. And now we're going to connect our Shopify to our local also. So the first one we're going to do is in the Shopify admin for the stores, we're gonna go into apps and we're going to customize your store, which is opens up the app marketplace.

And we're going to search for an app called theme kit. And this app is right here. It's made by Shopify. We're going to add that to our store. And what theme kit will do is it'll give us permissions to access the Shopify API, to be able to download and upload of theme files as needed. So we're gonna take the settings and install the app. So the app is now installed. You can see that by going back to the apps thing, kid access, can I go back into the app itself? And I'm going to click on that create thing, kit password, and for developer name, I'm going to put Jane Puma. I'm going to put my email in here and create password. And what it's going to do is it's going to send me an email, which isn't in my inbox yet, but should be there soon.

Yeah, there it is. So if I go into Gmail here, you'll see that it has sent me this get theme Kip passwords. I'm going to click on that link in the email. It's going to open up that app inside of the store. I'm going to and say show password. So I need to copy this password. And I show you where we're going to put it. Let's go back to on our local desktop, right? We're in file Explorer. We're in the folder that we created the live folder. And remember that file config dot mammals. So I'm going to double-click on that. It's going to open the it's. This is a text file. It's going to open it up and sub-line cause I've got sublime registered you open Yammel files by default and what you can see. There's, there's three things we need to change here. The first one is going to be the password. The second one is the theme ID and the third one is the store domain. So let's get that password first that was under right here. So I got a copy, the password and you can see it starts with S H P T K a going to go back to sublime paste in the password.

Let's see, it's got that new prefects there. So I've got that stored in there. The next thing I want is the store, my shopify.com URL. So good to go back here and to our Shopify admin and grab just the URL part there or the domain part, put that back into our Yammel file. And then the last one is the theme ID and the theme ID remember right now we're using the live theme is the one we want to be sinking up on. You can have more than one theme that you're sinking through this process. So we're going to do is going to the online store and just click on edit code for the life theme. And the theme ID is right here in the URL. So it's going to double click it, copy that, and then paste that back in here. And now I'm going to save this file, close it out.

So now we've updated our settings inside of our local file, the configure AML. So now the next step is going to be to download that theme from Shopify into our local repository. So here is the command line interface just to shortcut. It opens up the command line interface in the current folder. And when I type in the command theme, and this is a SU this assumes that you've got theme kit installed on your local computer, which is a separate process. I assume you've already done. If I do theme download, you'll see, it's going to start kicking off the download process. And over here, you can see folders starting to be downloaded and there's files inside of those folders. So it's going to download a total of 318 folders. So we're gonna let that download for a moment.

And then once it's done downloading, what we're gonna do is we're gonna go back into our GitHub and you can see the GitHub desktop is seeing all those changes automatically dropping into that folder. And you want, you want to do is wait until the command line interface has done its full download. And the first time it does, it takes a long time later on when you're just updating or changing two or three files out of term, that's a really quick and easy process, but the first time does take a bit of time to download all the different files.

I think that's because there's the throttling at the Shopify API level that's going on here. And you'll notice that, you know, more files are being downloaded here, but this count this 87 change files is not updating automatically. So what you have to do is you click on this changes here and you'll see it's going to change from 87 to now 171. I click on it again, 178. So many times what I do is when I start this process like we're doing right now and I'm waiting for it to go, I go and look at it. And then I, you know, commit that all those changes, but I didn't basically refresh the file count by clicking on that changes thing. Since I have to do it two times, instead of one time, I've got crickets sitting on my lap. If you can hear her she's snoring right now, She's quite uncomfortable. So what's going to happen when this all downloads. So we've downloaded it from Shopify to the local repository, and then we're going to sync it back up to get hub, right? So we'll do that inside of GitHub, desktop.No,

And there you can see it's downloaded it. All right. If I just run that theme, download command again, it'll see that, Hey, you've got all the files downloaded, no changes, whom nice, quick and easy process. So, and then we'll just show you inside of the files here, right? So we look inside the snippets folder. For example, now all those different theme files are in there. So what we're going to do now is we're going to click that little changes up here and now it shows 300 plus files. And we're going to say initial theme commit, Commit that to get hub And then publish it or push it. And now all those changes are in our GitHub repo, and now we're doing good version control in our theme. So that is how you connect Shopify to get hub or Shopify theme to a get hub repo using theme kit and get hub desktop. Thanks for watching.


JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Search