Last week we had the privilege of attending one of the few workshops that Keir Whitaker delivered on how to use Shopify. You might recognise his name if you’ve ever listened to The Back to Front Show podcasts. Or if you know of – or indeed have read – Insites: The Book, which he co-wrote with Elliot Jay Stocks, formerly his partner at Viewport Industries. He’s also a regular attendee of one of the best web-related events I’ve ever had the chance to attend, MK Geek Night; a free event taking place every three months which attracts many of the better-known designers/developers from across the country and beyond.

What is Shopify?
Shopify is an e-commerce platform for the creation of online stores. Founded 8 years ago in Ottawa, Canada, it’s become the platform of choice of more than 100,000 active stores, and now employs about 420 people. Last year Shopify doubled its gross merchandise volume (or GMV) reaching $1.5bn.

Why use Shopify?
To answer that question we first need to think about the world of e-commerce. Traditionally, e-commerce platforms have not been particularly pretty. Their focus has been, and some would say rightfully so, the functionality of getting you through the process of choosing a product and paying for it online. There are loads of examples of really bad e-commerce sites; like arngren.net, where the clutter is such that you can’t even find any products you might be looking for. Why anyone would use this site, other than to show how bad it is, I have no idea.

One of Shopify’s unique selling points (USPs) is that it puts you in control of the design of your e-commerce platform, allowing you to choose among hundreds of well-crafted templates – or create your own, and make it fully responsive for the modern era.

It’s a completely ‘theme-based’ hosted commerce platform, meaning you don’t have to install anything on your machine. It has no dependencies or requirements (except for the need to have at least one layout defined) so, for the coders among you, you don’t need to install any javascript libraries or use any particular framework; and you can go ahead and write really bad code, if that rocks your boat, knowing that it won’t complain. (Although the rest of the world might.) Shopify also uses Liquid as the templating language, which is really easy to use and also degrades gracefully. It looks a bit like this:

<ul id=“products”>

{% for product in products %}

<li>

<h2>{{ product.title }}</h2>

Only {{ product.price | format_as_money }}

<p>{{ product.description | prettyprint | truncate: 200 }}</p>

</li>

{% endfor %}

</ul>

The double curly brackets are the key to outputting data. As you can see from these examples, you can manipulate data with all sorts of filters using the pipe (‘|’) character:

{{ product.title | up case }}

{{ ‘logo.png’ | asset_url | img_tag: ‘Site Logo’ }}

{{ ‘capitalize me’ | capitalize }}

{{ article.published_at | date:”%a, %b, %d, %y }}

{{ ‘style.css’ | asset_url | stylesheet_tag }}

It also uses dot syntax, which is a very simple way of specifying parameters for variables:

{% if product.available %}

Show Add to cart button here

{% else %}

Display message —not available

{% endif %}

A theme is basically built using HTML, CSS, JS and Liquid; though you could potentially do it all using just Liquid, generating markup or dynamically creating JavaScript or CSS files. You can also use Sass – check out Shopify Timber – though you can’t use @import, which means you can’t rely on helpers like Compass or Bourbon. Instead, there’s a Sass Mixins section that provides some of what you might be looking for in these helpers.

When you work with many products, things can easily get complicated. Shopify tries to simplify your product-management, allowing you to have ‘variants’ of your product (think different sizes, colours, etc.) This is very helpful when it comes to tracking products, or in situations when you might want to apply a discount to a particular product. It also makes it a breeze to create collections and filter them by type or tags, which helps you relate products too. You can even set your own criteria so that new products which follow that criteria get automatically added to collections.

Shopify’s User Interface was revamped very recently. The new one might remind you a bit of the WordPress admin interface, with the left column being your ‘toolbox’ where you can find all the features you need. (You can even build a blog with it…) There are also apps that extend the functionality of your shop by integrating with shipping providers, loyalty programmes, SEO, etc. All nicely bundled up in its own dedicated app store.

But these aren’t the only selling points that Shopify has to offer. For example, Shopify does all the transaction handling for you, and since last year, it “allows merchants to accept payments with VISA, MasterCard and AMEX credit cards without requiring a third party payment gateway” (from Wikipedia). And if you’re a designer you can even take fake payments to demonstrate functionality for a client, which is pretty nifty, in my opinion. You may also choose to join the Partner Programme and become a maker of Shopify shops; or even define yourself as an Expert in whatever field, so that clients might come looking for you. (A little bird tells me that there is a huge niche for Shopify photographers.) Many custom theme builds are going for $10-20k and there are even some theme designers making more than $100k, which doesn’t sound too bad to me at all.

Some example stores include A Book Apart, United Pixel Workers, Whipping Post, Pure Fix Cycles, Hiut Denim, and 8 Faces.

I must say, I went to the workshop only half-convinced about using Shopify as an e-commerce platform. But, having learnt more about what it has to offer, whether you’re a designer interested in ecommerce or you have a product to sell, Shopify is probably one of your best options to create a modern shop for the modern era.

Author: Yago de la Torre.