Shopify And GitHub Integration
Tags: shopify, github, beginners, tutorial
Published: 2023-10-31 05:00:15

Have you ever found yourself tangled in the complexities of Shopify theme management and version control? 

Are you looking for a solution to effortlessly synchronize your Shopify store with GitHub? 

Look no further. In this third installment of my Shopify development series, delve along with me into the intricate yet powerful process of **Shopify and GitHub Integration**, providing you with the key insights and step-by-step guidance to optimize your development workflow.

## Why Should You Integrate Shopify With GitHub?

**Shopify Theme Kit can help us in making theme development easier, why should we go for this Approach?**

Shopify Theme Kit definitely was a big step in making things easier for developers to work in local environment but one of the biggest drawback it brought was in case a merchant or fellow developer intentionally or unintentionally made any changes to the theme code using theme editor, those changes wouldn't be reflected in our local environment, inviting conflicts and several bugs.  

And that's when **Shopify CLI** and **Shopify GitHub Integration** was introduced which ensures that changes made in the Shopify theme editor are reflected in the local environment and vice versa.

Lets sum up the advantages in a better way: 

**1. Smooth Syncing:** When you make changes to your theme via your local development environment, the Shopify GitHub setup automatically makes sure the changes show up in your Shopify admin i.e. your online store's theme. This keeps everything looking and working the same on both ends.

**2. Two-Way Changes:** Any tweaks you make in the Shopify admin get sent back to your original setup, so your progress is always up to date, no matter where you're working.

**3. Keeping Track of Versions:** With Shopify GitHub, you can handle different versions of your theme by connecting them to different stages. This way, you can always go back to an earlier version if you need to.

**4. Better Teamwork:** This setup makes it easy for everyone on the team to work together smoothly. You can see what everyone's doing, and everyone's on the same page with the latest updates, making everything run more smoothly.

## Integrate Shopify With GitHub

In previous blog posts, I've walked you through [Setting Up A Local Development Environment For Shopify Themes](https://dev.to/quratulaiinn/setting-up-a-local-environment-for-shopify-theme-development-2ema) and [Shopify Themes Version Controlling Using GitHub](https://www.notion.so/Shopify-And-GitHub-Integration-b7583df82af54949805daa19405e1b7c?pvs=21). 

Now, it's time to tie these threads together and explore the remarkable possibilities of **Shopify and GitHub Integration**.

### Connecting GitHub to Shopify

**Step 1:** 

- The first crucial step is to create a connection between your Shopify store and GitHub. Login to your Shopify store and click on the **Online Store** section from the sidebar on left.

![Shopify Online Store Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oaw474rapkegn0o8b87.png)
 

- Just below your live theme, you'll find the **Add Theme** option.

![Shopify Themes Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/micy9io1hoaejgtvh7j9.png)

 
**A dropdown menu will appear, and this is where the magic begins.**
 
- Select **Connect from GitHub**.

![Connect to github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuirr8cvjdl6p2orlzq2.png)


**Step 2:**

- After you click on Connect from GitHub, on the right side you will find a button to Log in to your GitHub account.

![Login to github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aflx1clc69axiw1drlec.png) 

- You will be redirected to the page where you can grant the necessary permissions. 

💡 **This is like handing the keys to a secure vault** – it ensures that your Shopify store and GitHub can communicate effortlessly, making updates and collaboration a breeze.

![github access](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddg1dpdh94g62s13ruo0.png)

- You can choose to allow Shopify access specific repositories only instead of giving access to all of your repositories. Check **Only select repositories** radio button and then Select the name of repository from dropdown and click **Install**. 

![select repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/335y0ewxi3rle0mqww4o.png)

### Select Repository and Branch

**Step 3:**

Once you've connected GitHub to your Shopify store, it's time to get down to business. 

- Choose your GitHub account 

- Select the repository you created earlier or the one which contains your Shopify Theme. This repository is your treasure chest of code, where your theme's journey begins.

![Select repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59g2eiq50gel03yb2iux.png)


**Step 4:**

You'll be asked to choose a branch. Opt for the branch of your choice and click **Connect**. This is where the beauty of version control shines:

- By selecting the main branch, you ensure that the live store doesn’t get affected with untested changes. 
- By selecting the development branch, you ensure that changes and updates can be meticulously tracked and reviewed before making them live.

![Choose branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jzkh7qvhwmtzwkx4z5k.png)

💡 You can connect only branches that match the default Shopify theme folder structure. Folders in the repository that don't match this structure are ignored.

#### Shopify Theme Folder Structure:

```javascript
.
├── assets
├── config
├── layout
├── locales
├── sections
├── snippets
└── templates
    └── customers

```

**At this point, you will notice a newly added theme in your Theme Library:**.

![theme library's themes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eik84zvlmpgbmd0zc5z3.png)


### Create and Publish Themes

**Step 5:**

Now, it's time for the creative part. Create two distinct themes by connecting to both branches, one for development and another for the main branch. This dual-theme approach provides a safe haven for experimenting without disrupting your live theme.

![development theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sbve3z2d8yfqghyxgakh.png)


**Step 6:**

But the magic truly happens when you publish the theme created from the main branch. This action takes your development live and showcases your carefully crafted changes to your customers.

![publish theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln7k2aewt8bu08mamqbl.png)


## Conclusion:

By integrating Shopify and GitHub, you've harnessed the power of version control, collaboration, and streamlined development. Your journey towards a more efficient and error-free Shopify development process has just begun.

For more Shopify tips and tricks, feel free to connect with me.

LinkedIn: [https://www.linkedin.com/in/quratulain](https://www.linkedin.com/in/quratulain-shoro-7792721a4/)

GitHub: [https://github.com/QuratAin](https://github.com/QuratAin)