GitHub is an important site for any serious web developer. It allows you to use version controls to manage your project seamlessly. If you’re a developer working on large code repositories, using Git is a must.
It will help you revert to previous versions to avoid errors. You can also freely experiment with your code at no risk of losing your original versions.
GitHub is also popular for Shopify developers. That’s why Shopify has included the ability to connect with GitHub. There was a recent update for Shopify that made connecting to GitHub easier than ever.
If you’re an avid Shopify developer, then you’ll want to take advantage of this perk. Read on to learn how to connect Shopify to GitHub to streamline your development.
Shopify’s New Update and Integration with GitHub
Using the Shopify GitHub Integration allows you to link your GitHub account. It will log you in at the same time that you log into Shopify.
From there, you can connect Git repositories to your Shopify themes. That will allow you to use version controls for your theme code. You can collaborate with other developers, as well as share your progress in real-time.
Version Controls: Branching and Merging
If you’re new to Git, then you may not know precisely what it does. To avoid confusion, here’s a brief description of what Git is and how it works:
- Git is an open-source version control system that came about in 2005. It allows developers to use branching and merging from a singular repository of code.
- The repository is a saved version of your code. A branch is a copied version of the source code. You can then edit the branch until you get it picture-perfect.
- Once the branch is complete, you can merge it with the original repository. If you decide that the branch has too many errors, you can get rid of it. Git also allows you to revert to your original saved version.
It’s for these reasons that Git and GitHub (a cloud hosting service that allows users to use Git) are so popular.
Developers commonly work on gigantic projects with tons of code. Being able to save repositories and use branching and merging helps developers cover themselves. If you were to edit the original code, you could risk making a mistake and ruining it all. Okay, now that you know more about Git and why developers use it, back to Shopify’s integration.
Shopify GitHub Integration Features
Shopify’s new update contains the following features for GitHub users:
- Easily push and pull theme code from any repository on your GitHub account.
- Connect one or more branches from one of your repositories to test out new features.
- Track all your edits in the Shopify admin under the Code Editor and Theme Editor.
- Keep your themes up to date with specific commits for each branch.
- Connect code branches to published or unpublished themes.
As you can see, you’ll be able to use Shopify and GitHub to develop your store seamlessly. The new integration frees you up to import any code branch from your GitHub account. As a result, you’ll enjoy unprecedented levels of freedom when developing your store. You’ll be able to experiment with branches without compromising your original data.
How the Integration Works
Say that you have a branch of code in your GitHub account that you’re using on Shopify. Whenever you update that branch in GitHub, it will automatically update in Shopify too.
The reverse is true, too. If you make changes to your branch on Shopify, the changes will show up in GitHub too. The new integration always makes sure that both the branch and theme always match. You’ll enjoy rock-solid consistency when you integrate with GitHub.
Shopify Commits
Whenever you edit your theme in the Shopify admin, the changes will commit to your repository on Shopify.
Commits are created whenever owners, staff, or collaborators make changes to your code. The changes will add as a commit to the connected branch when you save them.
Here are the areas that you can edit your theme in the Shopify admin:
- The Theme Editor. Customizing your theme here will show up in the setting files part of your theme code.
- The Code Editor. This editor also allows you to make changes to your theme through the code.
- Theme apps that you’ve installed via the Shopify App Store.
Connecting to GitHub
Okay, now let’s look at some specifics of how to connect Shopify to GitHub. First, you can only connect one GitHub account to your Shopify login. Also, only repositories that you connect to themes are visible by other users. Anyone who has Themes permission on your store can disconnect your GitHub account, so bear that in mind.
Once your Shopify login gets connected to a GitHub account, you can do the following at login:
- Connect repositories and other branches that you can access
- Disconnect your GitHub account from Shopify
Say, for example, that you have multiple store admins that need to use repositories. In this case, each admin would need to connect a GitHub account of their own.
Error Handling and Conflicts
Shopify and GitHub have also included some error handling features. For example, if you have a file open in both Shopify and GitHub, you’ll get a warning message. It will let you know that you’ll be overriding your changes whenever you save.
Yet, there are no conflict alerts in the Code Editor at the moment. If the same file is open in GitHub and the Code Editor, then the Code Editor’s changes win out. If you have a conflict or commit outside of Shopify, you can fix it in GitHub or push it through to Shopify.
If you feel as if your theme is out of sync with your branch, you can reset it to your last commit. All you need to do is go to the Theme Card, select Actions > Reset to the previous commit. That will allow you to revert to an earlier version where your theme and branch were in sync.
Getting Started with the Shopify/GitHub Integration
Now let’s dive into how you integrate Shopify with GitHub. To do so, you’ll need to download the Shopify Online Store GitHub app, as well as some other steps. Luckily, we’re here to break down every step of how to connect Shopify to GitHub.
Considerations Before Getting Started
Before you start, there are a few things that you need to know:
- Ensure that you’re either the store owner or that you have the Manage Themes permission or Themes permission. Otherwise, you won’t be able to do the integration.
- To use a development store to build your theme, you’ll need to log in to your Shopify Partner Account. From there, you can create a development store to use.
- You should already know the GitHub repository and branch that you want to use with Shopify. That’s because your branch must match the Shopify theme folder structure. Take close note of your theme code so that it can integrate with your GitHub branch. You won’t be able to create a repository or branch through Shopify.
- If you want to use a theme that you already have for your store, you can download a ZIP file of it. From there, you can create a repository of its contents on GitHub.
- If the repository you use belongs to another organization, you’ll need to get their approval before using it.
Step #1: Connecting Your GitHub Account or Organization
Here are the steps that you’ll need to take to integrate your GitHub account:
- From the Shopify admin, go to Online Store > Themes.
- Under Theme Library, select Add theme > Connect from GitHub.
- Under Connect theme, click Log In to GitHub.
- Enter your login information for GitHub.
- Authorize and install the Shopify Online Store GitHub app.
- If the app is for an organization, select whether you want to use a single repository or all repositories.
Step #2: Connect Your Branch as a Theme
Next, you’ll need to connect the branch that you want to use for your Shopify theme. Here’s what you need to do:
- Go to Online Store > Themes.
- Under Theme Library, hit Connect from GitHub.
- Log into GitHub if prompted to do so.
- If it’s for an organization, select the organization that owns the repository.
- Select the repository and then the branch that you want to connect.
From there, the theme will show up in your theme library. Themes that connect with GitHub will display the repository, branch name, and last commit time.
Step #3: Check Your Connection
Before you do anything else, you’ll want to ensure that your branch and repository are connected. Here’s how to do it:
- Online Store > Themes.
- On the GitHub theme, select Customize.
- Change one small setting.
- Save changes and then exit.
- In your Theme Library, find the GitHub branch.
- Ensure that the most recent commit reflects your small change.
That’s how you know that your connection is working correctly.
Step #4: Publish Your Theme
All that’s left is to publish your theme so that you can track the changes. To publish, you can do so manually through the Shopify admin or you can use the Shopify CLI. It’s up to you how you want to publish. Once it’s done, you’ll be able to track the changes made to your code. To see our complete guide on designing Shopify themes follow this link.
CodingPhase
If you are interested in a great course to learn liquid try out Shopify Theme Development by CodingPhase. Codingphase by Joe Santos teaches you all about the liquid programming language as you code alongside him to create a theme. I highly recommend this course as it’s easy to follow and has tons of useful information. We recommend subscribing to the diamond plan so you can have access to both the Shopify theme development courses and Shopify app development courses, while also getting access to a huge collection of programming courses you can take. You can also buy courses individually but you will end up spending more money than if you bought the diamond plan and got access to all of the Codingphase courses. If you want to get access to the Shopify theme development course and a huge collection of courses check out Codingphase at this link.
How to Connect Shopify to Git Hub ( quick video )
Closing Thoughts
That’s how to connect Shopify to GitHub. With this most recent update, Shopify has made it effortless to integrate with GitHub for developers. If you’re a developer working on Shopify stores, you need to take advantage of this new integration with GitHub. To get more Shopify developer tips see our developer posts here.
