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.
Setting up a Team Workflow for Shopify Theming
(^ your team)
Shopify Theming Works like This:
- You download the Desktop Theme Editor app for Mac
- 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.
Developing with a team works like this:
- 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
There’s Your Workflow
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.