Setting up a Shopify dev environment

I’ve recently taken over maintaining a Shopify store, and it’s been a pain. They seem to expect you to edit your theme files from their web editor, directly into your production store. I searched around for a way to set up a dev environment in Shopify, but the best solutions offered very little improvement over editing in the browser. So I’ve stitched together something that works well enough. It took me longer than it should have to figure out what to do, mostly because I just couldn’t believe there wasn’t some other way.

Edit Locally

A necessary first step. This is what the rest of the internet already has covered, but I’m including it here for the sake of completeness. First off, better hope you use a mac. Heaven help you if you develop on Linux (or some other operating system), because I can’t. Soget yourself that MacBook Air you’ve been meaning to try, and then go get the Shopify theme editor app.

So this app lets you designate a local folder to hold your theme files, and watches for changes. When you change a file, it uploads it immediately. If you want to hold off on that upload, tough. It doesn’t reliably sync when you start up the app, so there’s no waiting until you’re ready and then opening it. And you still can’t test locally.

Test Remotely

In order to test somewhere other than prod you’re going to have to set up another store. I recommend signing up for the Shopify partners program and setting up a test store. It’s free, and you can keep it password protected.

Then you connect that store to the theme editor as well — it’s a separate shop, in a separate folder, and to coordinate the two, use git (or svn, I guess, but then the next part won’t work). You can either push and pull directly on the local filesytem, or you can use a remote repo (I use bitbucket). In either case, the rhythm should be familiar: make changes on your test store. When you’ve tested to your heart’s content, commit your changes, push to your remote, and then switch to your production folder. Pull from your remote, and voilĂ … nothing happens.

The Theme Editor App Is Stupid

More precisely, only one file will upload. However many files you changed, the Shopify app will only upload one. You can look at your git history and touch each file individually, but who has the time for that? Instead, just pull the list of files with git show and loop through them, touching each one in turn (in update.rb) (yes, I realize you could just do this with bash):



require 'fileutils'

files = `git show --pretty="format:" --name-only HEAD`.split("\n")
files.each do |file|
  FileUtils.touch file unless file == ''
end


… aaand still only one file gets uploaded. Turns out, the Theme Editor app just can’t pay attention that fast. Even waiting as long as a tenth of a second is too fast for the app to catch. However, two tenths of second is fine, for some reason:



require 'fileutils'

files = `git show --pretty="format:" --name-only HEAD`.split("\n")
files.each do |file|
  FileUtils.touch file unless file == ''
  # Wait juuust long enough
  sleep 0.2
end


That does the trick! Oh, and make sure you keep update.rb in a directory outside your theme directory, or the Theme Editor will try to upload it.