Shopify: a Review, a Workshop and a Friend

In my endless pursuit of finding the perfect eCommerce platform (much like my endless pursuit of the perfect jQuery carousel – finally solved btw), I’ve been testing out different eCommerce platforms with each new project that’s needed some sort of checkout functionality. I hate eCommerce. It’s always such a pain to customise and get the client’s designs working and looking exactly right, because each platform comes with it’s own limitations. I’ve personally tried Zen Cart, Shopp (for WordPress), Digicart, CoreCommerce,  WP eCommerce (for WordPress and WooCommerce (for WordPress). WooCommerce has come close to the best one – but their documentation is absolutely terrible and it’s a pain to customise because of it.

Thanks to me being endlessly sick this past month, I had to cancel my talk in Wales this week at iOSDevUK – but that left me free to attend Keir Whitaker’s Shopify Workshop Monday. I’ve known Keir for about three years now through email, as I used to write a couple of blog posts when he worked with Carsonified and Think Vitamin – but I’d never gotten the chance to meet him in person. So I wanted to go just to meet him. I wasn’t really interested in Shopify, but am always interested in meeting with people and seeing “behind the scenes” of a platform. Anyways – I went.

And wow. I’m surprised at the sheer awesomeness of both Keir’s teaching and the platform itself. Shopify looks awesome and I can’t wait to try it out on my next eCommerce project. I took several pages of notes and a bunch of pictures detailing what I learned – so let’s jump in.

First Thoughts

The most important first thought, is that Shopify is very, very similar to WordPress in terms of the admin and their “programming” language. Especially the new admin that’s coming out soon (we got a sneak peak!). I’ve never seen Shopify before this, but as soon as Keir showed us both the old and new admin, I knew exactly where I wanted to go and what I needed to do. If you’re familiar with developing in WordPress, you’ll find that their programming language is very, very easy to learn, thanks to their appropriately named “functions”. This is awesome.

Shopify is a hosted solution – which is a drawback, much like CoreCommerce, because if the client also wants to have a blog, they’ll have to pay for hosting on top of Shopify’s monthly fee, since you can’t install WordPress on their servers. They do have a simple blog area you can add on – but it’s not near as powerful as WordPress. They are PCI compliant though, which is a plus.

The offer all the regular features you’d find in a normal cart, so I won’t go into too much detail. What I really liked is that they offer a fantastic API that allows you to create or add on several “Apps” that can extend the functionality of the cart. The admin area is very, very clean and isn’t cluttered with a ton of useless features. Instead, they allow you to add on features as you need them.

Theming

The most important concern of any cart for me is how easy it is to theme. Shopify runs on Rails and has created their own little language that allows developers to pretty much do anything without sacrificing their PCI compliancy. Basically they run their own templating engine, called “liquid”, that gives you a bunch of awesome little functions so you can create themes.

Theme files end in ‘.liquid’ and themes are arranged in 5 folders:

  • Snippets – holds all of your include files
  • Templates – holds the template files, like the homepage, single product page, categories, etc etc
  • Config – shop specific data and custom theme settings that clients can change
  • Assets – (an unfortunate) dump of all your JS, CSS and images
  • Layout – holds the “base” file of your site (your header and footer in one file)

Shopify does come with an internal editor, but like every other internal editor, you probably don’t want to use it.  Liquid tags use the basic Ruby syntax and also allow for some decent logic and basic operators. Tags are discerned by double curly braces at the beginning and end:

{{ product.title }}

Guess what that displays? Pff, I told you it was easy!

You can find a fantastic cheat sheet of Shopify’s tags here. I’m told the wiki is terrible, so be forewarned there. Logic works very similar to PHP, for example, a basic if/else statement:

{% if product.available %}
  This product is available
{% else %}
  Sorry, this product is not available
{% endif %}

The names of the template files are easy to figure out – index.liquid for the homepage, product.liquid for the product detail page. You can also set up a “page” for a certain area of content you want to use the WYSIWYG and output it with an include.

The only negative I see from a developer standpoint is the fact that there is no FTP access. How do you get your code live, you ask? You must zip the entire theme up and upload it. I am so not shitting you. That’s terrible. So you pretty much need to code it in flat HTML/CSS and get it working locally before you start adding actual Shopify functions to it. Otherwise, you’ll be forced to zip it up and upload it for every single tiny change. Or, use the inline editor I guess. Terrible.

Thankfully, Shopify has realised how ridiculous that is and they’re working on an awesome app that’ll act like git for Shopify themes – you’ll have the normal theme files locally and every time you make a change to them, it’ll upload (or sync) to the live version. I hope they hurry with this.

Advanced Stuff

Shopify allows for some pretty advanced theming. Just like in WordPress, you can set up option panels for your clients so they can edit things like colours and background images. You can also have alternate layouts for different pages.

There were a bunch of little “hacks” Keir taught us as well. For example, if you don’t want to use Shopify’s cart or product pages, you can get around that. He’s currently doing something similar on WordPress. Shopify offers alternate add to cart or cart permalinks for this. You can also set up quick product widgets that all you to embed products offsite in an iframe.

Surprisingly enough, Keir mention that there’s actually no template file for the products or collections landing pages. It just outputs a funky list. Which is weird. Thankfully, you can target this by adding in list-collections and list-products if statements to override the list.

You can also have product specific templates by using the product handles (their version of permalinks or slugs) in if statements.

For Developers and Designers

What’s in it for us? Besides looking like a fantastic service to offer to your clients (and easy for you to actually implement designs in), Shopify has a huge community around it. You can create and sell themes, custom apps or sign up for a referral program. The referral program gives you 20% of all fees charged to Shopify every month. Apps and themes are a 70/30 split.

If you’ve done several awesome themes already, you can also be listed in their Experts section – which I’m told gets a ton of traffic from potential clients.

But the coolest service of all – and one I think is pretty unique – you can for their free Parteners account that allows you to build out themes on their platform without having to pay for an account. That is just fantastic.

End Thoughts

Shopify looks so awesome – I can’t wait to try it out for myself. I’m already thinking about swapping over for a client project I’ve already quoted on using WooCommerce.

Have you used Shopify before? I’m interested in hearing how you thought it was in terms of developing for.