Shopify theming is fantastic and simple. We really enjoy it here at Demac Media – it’s so good! The smart minds over at Shopify have done a lot to make our lives easier, including making decisions about theme development environments. But sometimes, these decisions can make our lives more complicated when we want to do something that hasn’t been accounted for. Let’s talk about that. Let’s talk about: setting up a team workflow in Shopify.
You use it to load your store’s theme onto your computer
When you save a file, the Desktop Theme Editor app uploads it to your store
You view your changes at your store’s url
In short, there is no local development environment; it’s all either staging or production environments, and developing directly on production is a bad idea (spoiler: everything breaks, and customers are now buying your client’s meggings in abundance for FREE), we can use theme “previews” to develop inactive themes. Keep that in your clever little brain for later. We’re going to come back to that to solve our problem.
The team shares a project using some sort of version control (usually Git or SVN)
Each member makes changes/adds features locally. They may create a branch to do so.
Once those changes are tested and working, they merge their work back into the ‘master’ project, then deploy to production or not
Everyone is all happy, drinking beer, and whatnot
The thing is, we can’t do that with Shopify. Picture it: Jane and Joe are going to develop the same theme. They check it into version control, they both download it, they both edit it, and Shopify Themes uploads it. In this environment they keep overwriting each other’s changes, making it impossible to develop and test.
The Soloosh (aka the Solution)
Let’s make a version-controlled project that we can develop as a team. We’re going to make multiple copies of the same theme, and commit each theme copy to its own branch in version control.
Jane creates a Git repo
Jane makes our ‘master’ theme in our shopify shop
Jane copies that theme for Joe’s branch
Jane downloads the ‘master’ theme (using the Desktop Theme Editor app) and commits it to the ‘master’ Git branch
Jane creates a Git branch ‘joe’
Jane checks out the ‘joe’ branch
Jane downloads the ‘joe’ theme (using the Desktop Theme Editor app) and commits it to the ‘joe’ branch
Now, both developers can preview their respective themes in development, just be checking out the correct branch. When changes are ready, Joe can simply merge his changes back into the master branch. This approach is very flexible; with it we can do things like:
Have a branch and theme for each developer on the project
Add a production branch and theme for live deployments
The key thing to remember here is that each branch has its own corresponding theme copy in the shop’s admin panel. Voila! Now your team is theming conflict-free in Shopify. Let me know if you have any questions, comment down below.