Shopify And GitHub Integration

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 and Shopify Themes Version Controlling Using GitHub.

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.

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

A dropdown menu will appear, and this is where the magic begins.

• Select Connect from GitHub.

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.

• 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.

• 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 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.

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.

💡 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:

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

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

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.

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.

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

GitHub: https://github.com/QuratAin