Facebook iconF22 Labs
WhatsApp Icon (SVG)
BlogsHeadless ShopifyIntegrating GitHub with Your Shopify Store

Integrating GitHub with Your Shopify Store

Jun 19, 20244 min read
by Sahil Singh
Integrating GitHub with Your Shopify Store Hero

In the short falls of complexity faced in Shopify theme management and version control, if you also find it annoying to use the basic version control given in Shopify to keep the track of changes or

shopify liquid file recent changes option to track changes

duplicate the theme for development purpose or making more than one copy of theme because both you and your fellow developer need to work simultaneously.

shopify online store theme library

Integration of Shopify with GitHub provides unparalleled benefits, for version control and collaboration. Connecting Shopify stores with GitHub repository allows us to leverage Git-based version control system which allows developers to track changes and collaboration. Multiple developers can work on different features or fixes simultaneously, and Git helps merge their changes together without conflicts, one can also ensure code quality before deploying changes to the live store. By following these easy steps, you integrate your Shopify Store with GitHub –

Create a new repository on GitHub 

Create a GitHub Repository for your Shopify Project

creating a new github repository

Download theme file from your store

Shopify allows you to download your store's theme files as a ZIP.

download shopify theme file option

In your Online Store, click on the action icons and Select the download them file, this will send a zip file to your mail.

shopify theme file download pop-up

Download the zip file from your mail address, then extract it to a folder. Push the files to your repository. Make sure to follow the proper file structure of theme i.e 

shopify file structure
Source: shopify.dev/docs
create a github repository of downloaded file

In your Online store, navigate to Add theme button and select the option ‘connect from GitHub’ –

On clicking on the Add theme button, you’ll get options whether to visit Theme Store or Upload Zip file, the third option would be that of connect from GitHub.

shopify theme library github connect option

Click on Log in to GitHub Next, and choose your account to continue with Shopify-GitHub Integration

shopify github integration login page
shopify account window

After choosing the account, the next step would be to choose whether to give Shopify access of all the repositories or selected repositories only, it’s totally up to your store requirements whether you want to give access to a few selected repositories or all. 

shopify access permission setting

After Selecting repositories, click on the install button. After completion, you will be able to see on the side window your GitHub Account being displayed along with the option of selecting the repository.

connecting github repo to theme library

Select the repository that has your theme files and the branch that has your latest code and click on the connect button. After clicking, it will show you a tick mark and in the Theme library section, you can see your theme file being uploaded to your store.

selecting branch for integration with shopify

And now you finally have your Shopify Store Integrated with your GitHub account

view theme logs in shopify theme library

On clicking on view logs, one can see recent theme logs

recent theme logs

Also on GitHub, in your repo you’ll see a Shopify Bot section on heading, clicking upon which you can see all the recent changes on your theme –

shopify bot in github repo

github commits from shopify cli

Now, lets look at a scenario where different developers are working on different feature and they pushed their codes to their respective branches,

github branch recent pushes to shopify integration repo

Here we can, make pull request to merge the branches to the master branch(i.e. the one which is integrated with shopify)

comparing changes in two different github commits
comparing changes in two different github commits

Based on the changes, github will either automatically merge or in some cases, notify us that there are conflicts that need to be resolved manually. which one can resolve by reviewing the conflicting lines of code and deciding how to reconcile them with the changes in the pull request.

shopify github integration repository

After successful merging one can see the code that has been implemented now in the master branch itself and now automatically reflecting in our shopify theme.

github integration theme logs

Conclusion

Connecting your Shopify store with GitHub allows you to leverage version control system, It makes it easy for multiple developers to work on different features or fixes simultaneously say in separate branches, and then Github helps in merging or rebasing their changes to the master branch (i.e the branch that is integrated with shopify) making the development and edits on a theme a hassle free task. By following the above given steps you can easily integrate your Shopify store with GitHub.

Author Detail

Author-Sahil Singh
Sahil Singh

A front-end developer with a passion for building captivating web experiences. Through my blog, I share insights, tips, and challenges as I navigate the ever-evolving world of front-end development

Phone

Next for you