Shopify Theme Development Workflow

I started building my first Shopify theme in December and have figured out a basic workflow that is working pretty well so far. This basic walk through will explain the basics of using Foundation, Grunt, and the Shopify theme CLI to create a new theme.
The basis for starting was Foundationify, a skeleton Shopify theme built with the  Zurb Foundation framework. Included in Luke’s project is Grunt and Bower, with a  Gruntfile that builds the final project into the appropriate folders needed for a Shopify theme. The real benefit to using Grunt is that you can use something like Foundation and SASS, and let Grunt compile and minify everything down into the files needed for Shopify.

Pair that with with the shopify_theme CLI, which lets you auto upload any changed files to your test shop, and you’ve got all the tools you need. To get the CLI working, you’ll need to generate private keys for your dev shop (go to {shop url}/admin/apps/private) and use the keys to connect the CLI to your shop.

With all this set up, just run ‘grunt watch’ in one terminal window (from your new theme’s root directory), ‘theme watch’ in another (from the dist folder, to which all the final files are written by Grunt), and any changes you make and save to any file with be automatically processed and output properly into dist. Then the shopify_theme CLI will look for changes in the dist folder and upload them immediately. Depending on the file(s) you’re changing, it takes just a few seconds for the change to appear live on your test site with a browser refresh.

At the time of writing, not all the available template files that can be customized are included in the Foundationify project–specifically the customer templates like the customer login page. You’ll probably want to check out the Theme documentation for more details on the templates you can customize.

As always, you should include version control in your workflow as well. I use git, and for projects like these I usually push to a private Bitbucket repo.

If you’re looking for a Shopify theme developer, let’s chat. I’m located in Utah, can work remotely, and even run a Shopify site of my own with my wife (check out Stitch People). Feel free to get in touch via my contact form.

This Post Has One Comment

  1. Thanks, this was really useful, speedy development setup! Much quicker and less prone to bugs than the crappy Desktop theme manager!

Leave a Reply

Close Menu