Shopify for Designers Workshop

Shopify for Designers - Nottingham 12.03.2014

@shopify #shopifyu

Who am I?

@keirwhitaker [email protected] keirwhitaker.com

What is Shopify?

Easy to use theme based hosted ecommerce platform

Founded 2006 Ottawa, Canada ~350 employees

90,000+ stores 2012 $742m GMV 2013 $1.5bn GMV

Shopify Payments POS

100% Free for Designers to use

Build a Business for Designers

Opportunities for Designers

Shopify Partners

Shopify Experts

Sign up to the Partner Programme bit.ly/1lOPsAg

Example Stores

A Book Apart

United Pixel Workers

Whipping Post

Greats Brand

Pure Fix Cycles

Best Made Co.

Hard Graft

Big Cup Little Cup

Hiut Denim

Online Admin

Dashboard

Ecommerce

Blogs & Pages

Themes, Apps & Settings

App Store

shopify.com/apps

80/20 Revenue Share

Theme Store

shopify.com/themes

In 2012 50% of theme designers made $20k+ (many made
$100k+)

70/30 Revenue Share

Key Concepts

Products

Product Admin

Collections

purefixcycles.com/collections

purefixcycles.com/collections/50mm-wheelsets

Collections Admin

Filtering Collections

Product Tags

purefixcycles.com/collections/drivetrain/parts+white

Features

Image resizing Navigation lists CDN for all assets Page templates
Redirect module Discount engine Gift cards

Themes

HTML CSS JS Liquid

assets -- site.css.liquid -- site.js.liquid config layout -- theme.liquid snippets
-- footer.liquid -- header.liquid templates -- 404.liquid -- article.liquid -- blog.liquid -- cart.liquid -- collection.liquid -- index.liquid -- list-collections.liquid -- page.liquid -- product.liquid -- search.liquid

/thisisntarealurl → 404.liquid /blogs/<blog-name>/<article-id-handle> → article.liquid /blogs/<blog-name> → blog.liquid /cart
→ cart.liquid /collections → list-collections.liquid /collections/<collection-handle> → collection.liquid /collections/<collection-handle>/<tag> → collection.liquid / → index.liquid /pages/<page-handle> → page.liquid /products → list-collections.liquid /products/<product-handle> → product.liquid /search?q=<search-term> → search.liquid

Birthday Suit

Liquid

Output ! {{ product.title }} ! {{ product.description }} !
{{ product.handle }}

Filters ! {{ product.title | upcase }} ! {{ '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 }}

Logic ! {% if product.available %} Show Add to cart
button here {% else %} Display message! {% endif %}

Loops ! {% for image in product.images %} <img src="{{
image | product_img_url: 'medium' }}" /> {% endfor %}

Layouts ! <html> <head> {{ content_for_header }} <title>{{ shop.name }}
- {{ page_title }}</title> {{ 'screen.css' | asset_url | stylesheet_tag }} </head> <body> {{ content_for_layout }} </body> </html>

product.liquid

theme.liquid

header.liquid

Theme Settings

settings.html

Theme Settings ! <img src="{{ 'home-page-hero-small.jpg' | asset_url }}">

Workflow

Partners Dashboard - Dev Shops

Sublime Text 2 + Liquid Syntax

apps.shopify.com/desktop-theme-editor

Upload via admin

Time for a break

Task 1 Products & Collections

Login to your dashboard and create a dev shop

Add 3 products

Add more than one product image to each product

Add a variant to each product

Create two collections, add a collection image and description and
finally add your products to them

Task 2 Liquid

upload “shopify- birthday-suit” to your dev shop and activate it

Using the online theme editor add in the name &
description of your store (using the variable "shop") to the footer in theme.liquid

Using Liquid add code to output the "collection image" for
each collection list-collections.liquid

Using Liquid add code to output the "featured image" in
product.liquid

Now change this to add in the first image in
a “large” format and the rest as thumbnails

Task 3 Snippets

Create a new snippet called product- ***.liquid ! *** =
one of your products

Copy in the contents of product.liquid and change one element

Add in a liquid logic statement to check for your
products handle and show your new snippet if true

Thank You - Questions? [email protected] / @keirwhitaker

Shopify for Designers Workshop

Shopify for Designers Workshop

More Decks by Keir Whitaker

Other Decks in Technology

Featured

Transcript