Shopify Theme Framework

11th Sep, 2013 by Cam

Working with Shopify is both rewarding and positive. I love creating Shopify sites for my clients, and have found working with the platform has proven the value of a lot of the ideas I had developed in earlier years of web development. That being said, I feel there is always room for improvement, and one of the key areas I found wanting was in theme ‘frameworks’.

Theme Frameworks Are Good

A ‘theme framework’ is something that I find necessary for developing web sites at a realistic rate. Hand coding everything from scratch hardly makes sense for most projects. As such, I have used frameworks for much of the last 10 years. Earlier frameworks I created myself, using the principles I had developed through experience. Newer frameworks, I have based almost entirely on tried and tested assets created by some of the best.

Which Framework To Use?

I have played around with many of the HTML5 + CSS + JS templates available, and settled upon Zurb’s ‘Foundation Framework’. I’m not entirely sure why, but feel free to ask. I may have some useful insights. Something about the way it is coded and presented just rings my bell. To be honest, I am slightly in love with it right now.

Liquid is Brilliant

Liquid is the theme language used by Shopify to load dynamic elements into a shops HTML design. It uses little snippets and ‘ifs’ and ‘thens’ to create dynamic web pages. Liquid is logic. It is a logic language, and also very logical. It’s similar to methods used in other platforms like Tumblr, but with a lot more power and a little more zen.

If ‘Shopify’ & ‘Foundation’ Made a Lovechild

I wanted to start building Shopify Themes, so I looked around for a good framework to use. There weren’t really any good ones. I started reading up on what I needed to do to build one. Between the articles in Shopify’s documentation, and the Skeleton Theme for Shopify by Caroline Schnapp, I quickly had a pretty good idea of what I needed to do.

Armed with this new clarity around the subject, and recently becoming slightly enamoured with Zurb’s Foundation, I managed to have my new ‘Foundation Shopify Theme Framework Shopify Theme Framework’ up and running in just over a week (working on it between other jobs). Over the following week I added new features, and now have it at a point where I feel it should prove very useful to anyone who wants to build Shopify themes. Especially responsive themes. I need to work more on the documentation, but I recommend checking it out now if you are interested in creating themes quickly.

The Plan From Here

I am going to add new features to the theme over time, as time permits. One of the most important features will be settings that allow you to toggle between common layouts with the flick of a switch or 2. Other features are less interesting, so I wont bother you with them now. The focus will always be on keeping the framework flexible, while including any basic options and features that you would want in any theme. That way, it can be easily used as a springboard for any design you can think of.

If you want to try out the theme, I suggest following the project on Github and checking out the theme demo on Shopify.

You will also probably like to check out the Shopify Liquid cheat sheet.

EDIT March 10, 2014: The project is now called “Shopify Theme Framework” to avoid confusion with the Shopify theme named “Foundation”. Also I will probably make a bootstrap version soon too ;)