What I Learned From Shopify

One of my most recent projects for Bookmans was to create a Shopify theme from a pre-existing web template. This was my first real knee-deep interaction with Ruby on Rails and liquid theming, so it carried with it a heavy dose from the lessons learned bag. Thankfully, the gents at Bookmans were willing to give me the time I required.

The Rundown

I started with a slightly unrealistic time line and a barrel of good intentions. It took me a week to build my first theme for Wordpress, but that didn’t mean anything to me of course. How hard could it be to theme a system I have no experience with?

A Shopify theme seems to always come organized in the same way. The main folder contains the following sub folders: templates, assets, and layout.

Not that complicated, right?

The layout folder always contains the theme.liquid file. It is the main page of your website, and all content gets shoved into the little space you give it based on which page is navigated to. It’s quite ingenious.

The assets folder contains all javascript, stylesheets, and image files. This would also contain flash, video, and audio if you were using them.

The template folder is where all of the pages reside. Whether it’s your index page, product page, collection page, or blog, it goes here. All of the files get the .liquid extension.

What Went Wrong

To start, I didn’t calculate properly how long it would take me to familiarize myself with someone else’s code. The code was also meant to act as a general framework for the store. It was not meant to be taken wholesale and contained only a single page as an example. Even some of that example was not right for what we were trying to do.

Beyond that, none of the moving bits on the webpage worked. There was a counter on the bottom that was broken. The rotating slot for images didn’t rotate. The footer links were just empty anchor tags. While none of this was a real problem, it all added to the time the project took. The different files in the template folder all had to be planned and created largely from scratch.

Categories are actually collections.

What really frustrated me was the difference in terminology between a regular shopping cart and Shopify. Categories, for example, are broken up into two separate Collections groups: regular and smart. I’m still not sure what a smart collection does. Finding the loop to dig through all of the collections took a bit of searching. It was ridiculously easy to find once I corrected my vocabulary. So much for finishing before Christmas.

In my own special way, I also messed up the forms for the shopping cart. My fail came from my inability to remember that input=”button” does not work like a button in my mind does. Inputs set as images do, however. What a way to waste an hour.

What I Learned

Even though we have Hofstadter’s Law on the wall, I didn’t re-estimate what I thought it would take until it was obvious I wasn’t going to make the deadline by any stretch of the imagination.

In the future, I need to learn the appropriate terminology before diving right in. I need to do a bit more research before I can just say “Oh, I got this”. Even when the knowledge is valuable and useful in the future, we need to accurately estimate what we can do for it and how much time it’s actually worth to us.

Thankfully, the ability to use liquid theming is pretty big.