An Overview of My Shopify Workflow Tools ~ KrobKnea

by Keir Whitaker

Following the publication of the recent Shopify Theme Series A few people have reached out to ask me about some of the workflow tools I use when building themes. Let's begin by looking at the Desktop Theme Editor for Mac.

Desktop Theme Editor for Mac

As Shopify is a hosted platform, you need to upload your theme files to view changes in your store. Whilst you can of course use the theme editor in the admin area, many of us like (and prefer) to work locally on theme files using our chosen text editor - Sublime Text 2 in my case.

It can get a bit labour intensive having to ZIP up your theme and upload it in order to see small incremental changes, but ,thankfullyt there are two tools which solve this problem. The first one I'd like to discuss is the Desktop Theme Editor for Mac.
This app, which is free to download from the Shopify app store, works in the background to seamlessly synchronise changes made to your local theme folder to a development or live Shopify store. This means you are able to work locally in your favourite text editor, make changes, add/delete files and then simply go to your store - hit refresh - and see the changes.
Setting up the Desktop Theme Editor is straight forward:

Download the app from the Shopify App store, install and open.
Login to the app with your Shopify store details.
Pick the relevant theme you would like to work on locally.
Note: the theme has to be available in the store. If you are starting from scratch simply upload your boilerplate theme via the store admin area and then select it from the list.
Choose an appropriate location to save the theme.
Open up your theme in your preferred text editor.
Make a change and wait for the notification to appear that the change has been applied to your store.
Refresh your browser store to see the changes.

It's a great utility, very easy to set up and will certainly streamline your theme development. Full details on the app including a screencast are available on the Shopify docs site.

Shopify Gem

If you don't use a Mac, or have a preference for the command-line, you might be interested in the Shopify Theme Gem available on GitHub. This achieves the same end result as the Desktop Theme Editor, but instead of installing a native app you install a Ruby Gem.

The Shopify Theme Gem is a powerful command-line tool for working with your theme files

Once you have installed the Gem (full instructions are available on GitHub) you'll have access to a wide range of command-line features in addition to those offered by the Desktop Theme Editor. These include the ability to:

Download all the theme files
Upload a theme file
Remove a theme file
Completely replace shop theme assets with the local assets
Open the store in the default browser

Both these tools make building themes very straightforward. The synchronisation is quick and seamless and certainly speeds up your workflow process.

Timber

I'm sure I am not the only person to have my own boilerplate for theme development. I maintain mine on GitHub and use this as a basis of themes I work on.

My boilerplate theme is really basic and whilst it works for me you might like something a bit more fully formed such as Timber. This starter theme was recently released by the Shopify team and describes itself as "a faster and easier way to build Shopify themes". It's much more of a framework than my own and ships with many useful features.
Here's what's included:

Required Templates - Every theme template, both required and optional
Basic Markup - All the essential HTML and Liquid output and logic tags for each template
CSS Framework - A barebones set of styles that you can quickly customise for your own needs, including a fully responsive grid framework
Snippets - Reusable segments of commonly used code such as pagination blocks, breadcrumbs and newsletter sign up forms

Timber is definitely worth looking at. You can also try out a demo store to see how it functions in its basic form.

Sass Support

It's a little known fact that Shopify also supports Sass, albeit with one small caveat. Compilation of your *.scss.liquid file happens on the Shopify servers so you don't need to worry about running a local pre-processor for your Shopify theme development. The resulting output CSS is compressed and comments are also removed.
I mentioned one caveat. Currently you are unable to use @imports in your Sass files, due to security implications on the Shopify platform. This currently prevents you from using helpers like Compass and Bourbon, but the good news is that solutions are being looked into.
However it's not all bad news. Timber includes a number of useful mixins in its own Sass file and you can of course include your own - just remember that they have to live in the same file as your style declarations.

Better Workflow

The Desktop Theme Editor, Shopify Gem, Timber and Sass support all represent ways in which, with very little effort on our part, we can start to improve the way in which we build Shopify themes.
Beyond these tools many talented Shopify theme developers are using their own tools and ideas in their daily workflow. If you have a useful technique you'd like to share I'd love to hear it, feel free to drop a note in the comments.

KrobKnea