[Mini-Tutorial] Setting Up a Team Workflow for Shopify Theming

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.

Related: [Mini Tutorial] Uploading Shopify Assets

Setting up a Team Workflow for Shopify Theming

Revenge of the Nerds(^ your team)

The Prob

Shopify Theming Works like This:

  1. You download the Desktop Theme Editor app for Mac
  2. You use it to load your store’s theme onto your computer
  3. When you save a file, the Desktop Theme Editor app uploads it to your store
  4. 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.

Related: Mini Tutorial: 5 Tips for Better Shopify Theming

Developing with a team works like this:

Shopify Theming team workflow

  1. The team shares a project using some sort of version control (usually Git or SVN)
  2. Each member makes changes/adds features locally. They may create a branch to do so.
  3. Once those changes are tested and working, they merge their work back into the ‘master’ project, then deploy to production or not
  4. 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)

team workflow
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
  • Related: How to Fetch All Products Using Shopify Pagination

    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.