Why use git for Shopify store versioning - a store owner's guide

Have you ever wanted to:

  • have a staging environment for your Shopify store
  • ... to have a safe place to test changes before making them live
  • quickly reverse a batch of code changes in your theme
  • see exactly what an app has changed in your theme
  • ...and 100% clean up those changes when you uninstall the app
  • see when and what changes have been made by your developer
  • work out when and who/what introduced a bug to your shop
  • make it easier to upgrade your theme or change to a new theme

If you're a yes to one or all of the above, something called 'git' gives you this.

Git is what developers call a version control system. It keeps track of the versions of files as they are created, edited and deleted. You can say 'show me what this file was like two weeks ago' and compare that to what it looks like today.

You create a git repository to store all of these files and have them tracked by the git server.

Every developer keeps their code in a git repository but it's much less common for Shopify stores to have their theme stored and tracked in a git repository. I'll show you why they should be using some real benefits that can be achieved with git.

Have a safe place to test changes to a Shopify store

Creating a copy of your theme and using the preview link in your Shopify admin is a great way to have a safe place to test changes. A developer can work in this copy and then publish this copy when they're tested and you've approved.

That works great for one developer working at once, and if you do not need to make any changes to your theme settings or add/remove apps while they are working. But that's very restricting!

If another developer needs to make changes at the same time, you're customising the shop or adding/removing apps, all of these changes will be overwritten and lost if you simply publish the theme copy. Enter git.

Git lets you make a copy of your theme by creating what's called a 'branch'. The branch is an exact copy of your live theme when the branch is created. This is when it gets interesting.

Remember that git tracks changes to files? It will track the changes made to the files in your branch. So it will see a change like 'changed the font colour theme setting to red'.

Let's say in your branch you change the font colour theme setting to red. At the same time someone changes the font size theme setting to large in your live theme. Git can see these two separate changes in the two copies of your theme: your live theme and the branch.

Where the magic happens is if we want to take all of the changes from our branch and put them into our live theme. Git merges these changes without complaining. It is smart enough not to overwrite all of your theme settings in live with those from the branch.

In this way changes can happen in your live theme at the same time as in your branch. And since there is no restriction on the number of branches you can have, lots of people can work on their own copies of your theme at the same time and merge their changes when they're ready. No lost work!

Going back to having a safe place to test your changes you accomplish this by having a branch called 'staging'. I've written more about setting up a Shopify staging site here.

Quickly reverse a batch of code changes in your theme

Let's say I'm developing a new feature for your shop. I might edit various files in your theme like theme.liquid, add new files like daniels-feature.js and delete some others like old-feature.css. Together these make up the set of changes needed to make my new feature work.

With git you can batch up these changes into a 'commit'. A commit is an easy way for someone to see all of the changes for a particular feature. Rather than having to go through lots of files manually, one-by-one, we can simply see all changes in a neat commit.

Let's say we find a bug in my new feature but someone has made a bunch of changes after mine. Leaving their changes in but reversing mine is not easy using the Shopify admin.

With git we can simply revert my commit to remove my changes but leave everyone else's in. Then I can work on fixing the bug and simply commit again: none of my work is lost and none of anyone else's is either.

See exactly what an app has changed in your theme ...and clean them up on uninstall

Apps can make changes all over your theme. There's no way to see exactly which files and what has changed.

Git is purpose-built for this problem. Committing a copy of your theme to your git repository before you install the app and then again after will give you a view of all of the changes made.

You'll be able to see exactly what has changed. Then if you decide to uninstall the app in future you can make sure everything is cleaned up by doing a git revert.

See when and what changes have been made by your developer

Developers will love having access to a git repository for your shop. It makes their work so much easier and more efficient. It also lets you see when they make changes to your shop and what those changes were.

Even if you don't understand code, you can read the comments the developers write when they make commits to understand what they're working on and how it's going.

Work out when and who/what introduced a bug to your shop

We looked at how to reverse buggy code from your shop in 'Quickly reverse a batch of code changes in your theme' above.

If you have more than one developer working on your shop and app installations/configuration going on, it can be difficult to work out who introduced a bug and when it was introduced. The he said / she said situation is just not healthy and productive.

Git lets us go back to how your theme code was at any point in time in the past. That's a really powerful way to pinpoint when a bug started happening. Once the commit time that introduced the bug is identified you can see who made that commit and what it was.

This is not a finger-pointing exercise: it's a quick way to find the root cause of a problem and to get the buggy commit reverted. Then you can look at learning from what happened so it doesn't happen again.

Make it easier to upgrade your theme or change to a new theme

So your theme developer has released a new version of your theme with some really nice features! But you've invested in customisations and apps for your current theme that you don't want to lose.

Moving over those customisations and app integrations is a long, painful and messy task without git.

Git makes it much easier (but alas not a one-button-push operation). Since git keeps this history of changes you can apply a lot of these changes directly to your new theme. And for the rest you can see what was done by who and get them to move over their work.

A much clearer process with git.

As you can tell, I'm a big fan of using git for Shopify stores. It makes Shopify development much faster, organised and clean with a lower risk of introducing bugs into your shop.