Shopify for Designers Workshop

A4fe614b0340b92772f4b551b3185303?s=47 Keir Whitaker
March 14, 2014
Technology
1
83

Shopify for Designers Workshop

This deck from the Second Wednesday, 12th March 2014

A4fe614b0340b92772f4b551b3185303?s=128

Keir Whitaker

March 14, 2014
Tweet

More Decks by Keir Whitaker

See All by Keir Whitaker
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
0
33
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
1
190
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
1
93
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
2
82
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
0
38
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
0
30
A4fe614b0340b92772f4b551b3185303?s=48 keirwhitaker
0
52

Other Decks in Technology

See All in Technology
F0ec1a6cb9e7be1911ed97b6561ed5ac?s=48 k1nakayama
0
140
3f848c0c0b9a6603894e157da93e4655?s=48 sadayoshitada0919
0
430
2c5d0e677a23612dab91ed40a7384fda?s=48 chazuke4649
0
170
8434e5fcdb11033234455d4b2bfb6bb3?s=48 voyage_tech
0
310
B2a04c1ec959edba430bcb38ca6ffc81?s=48 corestate55
0
260
98234c645fe8c935edc0fec0186d28b8?s=48 garethr
1
710
2011382f0f10050fbb5f08e80e2bd125?s=48 akuwano
0
130
1def12864e30f8ea1a4d3bdd67cbb124?s=48 pitan
2
830
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
190
Cf18e42df2acc7a1fc1700bcd8e76487?s=48 syrusakbary
0
250
1dc713fe291d5746d6646e45391326a9?s=48 nottegra
0
190
D98ee74ffe0fafbdc83b23907dda3665?s=48 doublemarket
2
220

Featured

See All Featured
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
53
1.8k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
583
200k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
499
36k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
3
370
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
202
35k
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
87
3.2k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
60k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.2k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
550

Transcript

  1. Shopify for Designers - Nottingham 12.03.2014

  2. @shopify #shopifyu

  3. Who am I?

  4. @keirwhitaker keir@shopify.com keirwhitaker.com

  5. What is Shopify?

  6. Easy to use theme based hosted ecommerce platform

  7. Founded 2006 Ottawa, Canada ~350 employees

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

  9. Shopify Payments  POS

  10. 100% Free for Designers to use

  11. Build a Business for Designers

  12. Opportunities for Designers

  13. Shopify Partners

  14. Shopify Experts

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

  16. Example Stores

  17. A Book Apart

  18. United Pixel Workers

  19. Whipping Post

  20. Greats Brand

  21. Pure Fix Cycles

  22. Best Made Co.

  23. Hard Graft

  24. Big Cup Little Cup

  25. Hiut Denim

  26. Online Admin

  27. Dashboard

  28. Ecommerce

  29. Blogs & Pages

  30. Themes, Apps & Settings

  31. App Store

  32. shopify.com/apps

  33. shopify.com/apps

  34. 80/20 Revenue Share

  35. Theme Store

  36. shopify.com/themes

  37. shopify.com/themes

  38. In 2012 50% of theme designers made $20k+ (many made

    $100k+)

  39. 70/30 Revenue Share

  40. Key Concepts

  41. Products

  42. None
  43. None

  44. Product Admin

  45. Collections

  46. purefixcycles.com/collections

  47. purefixcycles.com/collections/50mm-wheelsets

  48. purefixcycles.com/collections/50mm-wheelsets

  49. Collections Admin

  50. Filtering Collections

  51. Product Tags

  52. purefixcycles.com/collections/drivetrain/parts+white

  53. Features

  54. Image resizing Navigation lists CDN for all assets Page templates

    Redirect module Discount engine Gift cards

  55. Themes

  56. HTML CSS JS Liquid

  57. 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

  58. /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

  59. Birthday Suit

  60. Liquid

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

    {{ product.handle }}

  62. 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 }}

  63. Logic ! {% if product.available %} Show Add to cart

    button here {% else %} Display message! {% endif %}

  64. Loops ! {% for image in product.images %} <img src="{{

    image | product_img_url: 'medium' }}" /> {% endfor %}

  65. 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>

  66. product.liquid

  67. theme.liquid

  68. header.liquid

  69. Theme Settings

  70. Theme Settings

  71. settings.html

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

  73. Workflow

  74. Partners Dashboard - Dev Shops

  75. Sublime Text 2 + Liquid Syntax

  76. apps.shopify.com/desktop-theme-editor

  77. Upload via admin

  78. Time for a break

  79. Task 1 Products & Collections

  80. Login to your dashboard and create a dev shop

  81. Add 3 products

  82. Add more than one product image to each product

  83. Add a variant to each product

  84. Create two collections, add a collection image and description and

    finally add your products to them

  85. Task 2 Liquid

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

  87. Using the online theme editor add in the name &

    description of your store (using the variable "shop") to the footer in theme.liquid

  88. Using Liquid add code to output the "collection image" for

    each collection list-collections.liquid

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

    product.liquid

  90. Now change this to add in the first image in

    a “large” format and the rest as thumbnails

  91. Task 3 Snippets

  92. Create a new snippet called product- ***.liquid ! *** =

    one of your products

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

  94. Add in a liquid logic statement to check for your

    products handle and show your new snippet if true

  95. Thank You - Questions? keir@shopify.com / @keirwhitaker