/*

The Shopify Economy

A guest post from @Keirwhitaker !

The Shopify Economy

In late July I headed North to Hull (a surprisingly hard place to get to from my home town of Bath) to give a presentation on Shopify at the C4DI, in particular why there's never been a better time for designers and developers to start engaging with the Shopify community.

shopify-home

shopify-home

I've known Jon Moss, one half of the C4DI founding team, for a few years now having been introduced by a mutual friend. I was also privileged to participate in Jon's HD Live 2012 event. I hope that returns one day.

Since the inception of the C4DI I've been keen to visit and it was great to finally make the trip. Thanks to everyone who came along and asked some great questions. I hope you found it useful. What follows are the key points from my talk:

The commerce and Shopify landscape

  • The ecommerce landscape is rapidly evolving and online sales are growing rapidly year on year
  • Many web designers and developers are taking advantage of this to specialise in the area, many specifically with Shopify
  • Shopify now powers over 110,000 online businesses, a number that is growing month on month
  • Shopify enables online and offline business - today it's about commerce, not just ecommerce
  • The demand for knowledgable Shopify theme designers and developers is high and growing

Theme based and feature packed

  • Shopify is theme based meaning web designers and front-end developers can concentrate on design whilst Shopify handles all of the back-end administration and product management
  • Shopify is feature rich - out of the box you get 24/7 support, automatic image resizing, easy to manage navigation lists, all assets pushed to a global CDN (Content Delivery Network), multiple page and product templates, easy to use redirect module for migrating stores, flexible discount engine, gift card support and more.
  • Notable stores (and Keir's favourites) include:

Benefits beyond ease of use

  • The Shopify Partner Program is the gateway to designing themes and developing apps for use with Shopify. It's 100% free and allows Partners to create unlimited "dev shops" and gives access to Partner specific forums, help and support.
  • Shopify Experts is a free to join curated super-set of the Partner program providing qualified (application is possible after launching three stores) Partners with lead generation.
  • The Partner program offers all Partners a 20% revenue share on every store they bring to Shopify via their Partner referral link

Active theme and app store economy

  • Shopify has it's own theme and app store. Many designers are earning six figures per year via the theme store. The revenue share for themes is 70/30 in favour of the theme author if they handle all support queries or 50/50 if support is handled by Shopify. App developers receive 80% of revenue for apps via the app store.

Themes aren't hard to learn

  • Themes are made up of four key components:
    • HTML
    • CSS
    • JS (entirely optional)
    • Liquid
    • Liquid is a template language that allows designers to pull in data from a store directly into a template. Templates are agnostic and don't need to know anything about the store they are paired with - this makes them sellable via the theme store and reusable.
    • Themes are neatly organised into five relevantly named folders (assets, config, layouts, snippets and templates)
    • Template files have the .liquid extension but are editable using any standard text editor
    • Different templates are rendered depending on the URL requested
    • Shopify themes use a concept known as layouts which allows designers to put recurring elements of the site into one file. The individual templates located in the templates folder are rendered within this file in place of the {{ content_for_layout }} tag.

Liquid - an easy to learn and powerful template engine

liquid

liquid

  • Liquid has four main features
    • Output as denoted by the {{ }} delimiters. For example {{ shop.name }} will output the shop's name as defined in the admin. Output grabs data and replaces the tag with the content
    • Filters enable the content to be manipulated. The | (pipe) character denotes a filter in action. For example {{ shop.name | upcase }} will take the name of the shop and filter it by turning every character to uppercase. There are many useful filters to manipulate strings, monetary values as well as HTML helpers. The most important being the asset_url filter. This will return the path to a particular stores assets folder. This is essential as there's no way of knowing where your theme will be located within the Shopify network - the asset_url filter means this isn't a concern.
    • Logic constructs enable questions to be asked in a template. These follow normal programming conventions such as if, then and if, then, else. Logic is often used to conditionally show data dependant on stock levels or pricing. There are many other uses too.
    • Loop constructs allow us to output collections, for example a collection of images associated with a product. Loops are used extensive in Shopify - for outputting images, for outputting the contents of a particular product collection and more.

Useful articles

Get started

You can find more information about Shopify and how easy it is to get started on the Shopify Partners web site. You can also view the slides from the evening on Speaker Deck. Feel free to get in touch if you have any further questions. You can find me on Twitter.