Building Online Businesses

A4fe614b0340b92772f4b551b3185303?s=47 Keir Whitaker
September 02, 2013

Building Online Businesses

A4fe614b0340b92772f4b551b3185303?s=128

Keir Whitaker

September 02, 2013
Tweet

Transcript

  1. Building Online Businesses Keir Whitaker / @keirwhitaker / keirwhitaker.com Tuesday,

    3 September 13
  2. shopify.com / @shopify Tuesday, 3 September 13

  3. viewportindustries.com / @viewportind Tuesday, 3 September 13

  4. Tuesday, 3 September 13

  5. readdigest.com Tuesday, 3 September 13

  6. Tuesday, 3 September 13

  7. The Back to Front Show backtofrontshow.com / @backtrofrontshow Tuesday, 3

    September 13
  8. Shopify 8 Faces Redesign Viewport Store Lessons Learned Tuesday, 3

    September 13
  9. Keir Whitaker / @keirwhitaker / keirwhitaker.com Shopify shopify.com / @shopify

    Tuesday, 3 September 13
  10. Founded 2006 Ottawa, Canada ~300 employees Tuesday, 3 September 13

  11. 65,000+ stores 2012 $742m GMV 2013 $1.5bn* GMV * projected

    2013 volume Tuesday, 3 September 13
  12. Easy to use theme based hosted ecommerce platform Tuesday, 3

    September 13
  13. New in 2013 Shopify Payments POS Tuesday, 3 September 13

  14. Scale, no problem! Tuesday, 3 September 13

  15. 10,320 in one hour Tuesday, 3 September 13

  16. API 2009 300+ apps 80/20 share Tuesday, 3 September 13

  17. Theme store 2010 70/30 share Tuesday, 3 September 13

  18. In 2012 50% of theme designers made $20k+ and several

    made $100k+ Tuesday, 3 September 13
  19. Shopify Partners earn either 200% per referral or 20% of

    each bill Tuesday, 3 September 13
  20. Shopify Experts $18m in 18 months Free to join Tuesday,

    3 September 13
  21. A Book Apart Tuesday, 3 September 13

  22. United Pixel Workers Tuesday, 3 September 13

  23. Best Made Co. Tuesday, 3 September 13

  24. The Heads of State Tuesday, 3 September 13

  25. Has Bean Coffee Tuesday, 3 September 13

  26. Easy Theming Tuesday, 3 September 13

  27. HTML CSS JS (optional) Liquid Tuesday, 3 September 13

  28. No prescribed markup Your design Your CSS Your store Tuesday,

    3 September 13
  29. ~ 15 templates per theme Tuesday, 3 September 13

  30. 6 Features of Liquid Tuesday, 3 September 13

  31. 1: Output Tuesday, 3 September 13

  32. {{ product.title }} {{ product.description }} {{ product.handle }} Tuesday,

    3 September 13
  33. 2: Filters Tuesday, 3 September 13

  34. {{ product.title | upcase }} {{ 'logo.png' | asset_url |

    img_tag: 'Site Logo' }} Tuesday, 3 September 13
  35. {{ product.title | upcase }} {{ 'logo.png' | asset_url |

    img_tag: 'Site Logo' }} Tuesday, 3 September 13
  36. 3: Logic Tuesday, 3 September 13

  37. {% if product.available %} Show Add to cart button here

    {% else %} Display message! {% endif %} Tuesday, 3 September 13
  38. {% if product.available %} Show Add to cart button here

    {% else %} Display message! {% endif %} Tuesday, 3 September 13
  39. 4: Loops Tuesday, 3 September 13

  40. {% for image in product.images %} <img src="{{ image |

    product_img_url: 'medium' }}" /> {% endfor %} Tuesday, 3 September 13
  41. {% for image in product.images %} <img src="{{ image |

    product_img_url: 'medium' }}" /> {% endfor %} Tuesday, 3 September 13
  42. 5: Layouts Tuesday, 3 September 13

  43. <html> <head> {{ content_for_header }} <title>{{ shop.name }} - {{

    page_title }}</title> {{ 'screen.css' | asset_url | stylesheet_tag }} </head> <body> {{ content_for_layout }} </body> </html> Tuesday, 3 September 13
  44. <html> <head> {{ content_for_header }} <title>{{ shop.name }} - {{

    page_title }}</title> {{ 'screen.css' | asset_url | stylesheet_tag }} </head> <body> {{ content_for_layout }} </body> </html> Tuesday, 3 September 13
  45. 6: Helpers Tuesday, 3 September 13

  46. {{ 'screen.css' | asset_url | stylesheet_tag }} { 'logo.png' |

    asset_url | img_tag: 'Site Logo' }} Tuesday, 3 September 13
  47. {{ 'screen.css' | asset_url | stylesheet_tag }} { 'logo.png' |

    asset_url | img_tag: 'Site Logo' }} Tuesday, 3 September 13
  48. 100% FREE to develop on Shopify shopify.com/partners Tuesday, 3 September

    13
  49. Keir Whitaker / @keirwhitaker / keirwhitaker.com Shopify For Designers shopify.com/fordesigners

    Tuesday, 3 September 13
  50. Tuesday, 3 September 13

  51. Tuesday, 3 September 13

  52. Tuesday, 3 September 13

  53. paravelinc.com Tuesday, 3 September 13

  54. Early mobile sketch Tuesday, 3 September 13

  55. Early product page sketch Tuesday, 3 September 13

  56. Early home page sketch Tuesday, 3 September 13

  57. Home page browser mockup Tuesday, 3 September 13

  58. Product page browser mockup Tuesday, 3 September 13

  59. Collection listing browser mockup Tuesday, 3 September 13

  60. Collection listing browser mockup iteration Tuesday, 3 September 13

  61. Decision making sketch Tuesday, 3 September 13

  62. From sketch to browser mockup Tuesday, 3 September 13

  63. Collection listing browser mockup Tuesday, 3 September 13

  64. Home page browser mockup Tuesday, 3 September 13

  65. Mobile menu demo Tuesday, 3 September 13

  66. Pen & Paper Basecamp GitHub Heroku Tuesday, 3 September 13

  67. 8 Basecamp messages 84 comments Tuesday, 3 September 13

  68. “With Elliot, we didn’t really log formal rounds of iteration.

    We probably have some Github commits that could show the evolution but that part of the process was delightfully sloppy with little regard for archiving.” Trent Walton on the process Tuesday, 3 September 13
  69. “With Elliot, we didn’t really log formal rounds of iteration.

    We probably have some Github commits that could show the evolution but that part of the process was delightfully sloppy with little regard for archiving.” Trent Walton on the process Tuesday, 3 September 13
  70. Responsive! Tuesday, 3 September 13

  71. body { font: 100%/1.5 "ff-unit- slab-web", "Georgia", "Times New Roman",

    serif; font-weight: 300; color: #666666; } Tuesday, 3 September 13
  72. body { font: 100%/1.5 "ff-unit- slab-web", "Georgia", "Times New Roman",

    serif; font-weight: 300; color: #666666; } Tuesday, 3 September 13
  73. @media (min-width: 700px) @media (min-width: 850px) @media (min-width: 1100px) @media

    (min-width: 1400px) @media (min-width: 1680px) Tuesday, 3 September 13
  74. “The Paravel guys are professional whilst still being great fun

    to work with, and the finished product is exceptional. I had no idea what they’d produce when I commissioned them, but I knew it would be something great, which it is.” Elliot Jay Stocks on collaboration Tuesday, 3 September 13
  75. From PHP to Shopify Tuesday, 3 September 13

  76. ★ Created a layout file ★ Converted .php pages to

    specific Shopify templates ★ Created CSS for buttons based on the anchor styles ★ Created a development shop to sync with Tuesday, 3 September 13
  77. Shopify theme structure Tuesday, 3 September 13

  78. ★ index.liquid ★ collection.liquid ★ product.liquid ★ cart.liquid Tuesday, 3

    September 13
  79. Replacing Loops Tuesday, 3 September 13

  80. Only show latest issue Tuesday, 3 September 13

  81. {% for product in collection.magazines.product limit: 1 %} Output product

    details here {% endfor %} Tuesday, 3 September 13
  82. {% for product in collection.magazines.product limit: 1 %} Output product

    details here {% endfor %} Tuesday, 3 September 13
  83. Desktop Theme Editor Tuesday, 3 September 13

  84. Total time: 1.5 days Tuesday, 3 September 13

  85. Problems! Tuesday, 3 September 13

  86. 1: No product pages Tuesday, 3 September 13

  87. collection.liquid Tuesday, 3 September 13

  88. {% if collection.handle == 'magazines' %} {% include 'collection-magazines' %}

    {% elsif collection.handle == 'posters' %} {% include 'collection-posters' %} {% else %} {% include 'collection-default' %} {% endif %} Tuesday, 3 September 13
  89. {% if collection.handle == 'magazines' %} {% include 'collection-magazines' %}

    {% elsif collection.handle == 'posters' %} {% include 'collection-posters' %} {% else %} {% include 'collection-default' %} {% endif %} Tuesday, 3 September 13
  90. {% for product in collection.products %} <form action="/cart/add" method="post"> <input

    type="submit" name="add" id="add" value="Buy {{ variant.title }}" class="button"> <input type="hidden" value="{{variant.id}}" name="id"> </form> {% endfor %} Tuesday, 3 September 13
  91. {% for product in collection.products %} <form action="/cart/add" method="post"> <input

    type="submit" name="add" id="add" value="Buy {{ variant.title }}" class="button"> <input type="hidden" value="{{variant.id}}" name="id"> </form> {% endfor %} Tuesday, 3 September 13
  92. 2: Buy latest issue hero Tuesday, 3 September 13

  93. index.liquid Tuesday, 3 September 13

  94. Theme settings page Tuesday, 3 September 13

  95. {% if settings.home_hero_text_url and settings.home_hero_text %} <a href="{{ settings.home_hero_text_url }}">

    {{ settings.home_hero_text }} </a> {% endif %} Tuesday, 3 September 13
  96. {% if settings.home_hero_text_url and settings.home_hero_text %} <a href="{{ settings.home_hero_text_url }}">

    {{ settings.home_hero_text }} </a> {% endif %} Tuesday, 3 September 13
  97. jQuery(function($) { $('a.blackflag').on('click', function(e) { e.preventDefault(); var form = $('<form>').attr({

    method: 'post', action: '/cart/add', enctype: 'multipart/form-data' ! ! ! ! }); $('<input>').attr({ type: 'text', name: 'id', value: '{{ settings.home_hero_variant_id }}' }).appendTo(form); ! ! ! form.appendTo($('body')); form.submit(); }); Tuesday, 3 September 13
  98. jQuery(function($) { $('a.blackflag').on('click', function(e) { e.preventDefault(); var form = $('<form>').attr({

    method: 'post', action: '/cart/add', enctype: 'multipart/form-data' ! ! ! ! }); $('<input>').attr({ type: 'text', name: 'id', value: '{{ settings.home_hero_variant_id }}' }).appendTo(form); ! ! ! form.appendTo($('body')); form.submit(); }); Tuesday, 3 September 13
  99. 3: Big images Tuesday, 3 September 13

  100. “We absolutely had to minimize file size for images, especially

    with the home page. We’ve used picturefill.js multiple times in the past, including an adapted version for the Microsoft homepage.” Trent Walton on picturefill.js Tuesday, 3 September 13
  101. Theme settings page Tuesday, 3 September 13

  102. <div data-picture data-alt="8 Faces Magazine"> <div data-src="{{ 'home-page-hero-small.jpg' | asset_url

    }}"></div> <div data-src="{{ 'home-page-hero-medium.jpg' | asset_url }}" data-media="(min-width: 500px)"></div> <div data-src="{{ 'home-page-hero.jpg' | asset_url }}" data-media="(min-width: 1100px)"></div> <noscript> <img src="{{ 'home-page-hero-small.jpg' | asset_url }}"> </noscript> </div> Tuesday, 3 September 13
  103. <div data-picture data-alt="8 Faces Magazine"> <div data-src="{{ 'home-page-hero-small.jpg' | asset_url

    }}"></div> <div data-src="{{ 'home-page-hero-medium.jpg' | asset_url }}" data-media="(min-width: 500px)"></div> <div data-src="{{ 'home-page-hero.jpg' | asset_url }}" data-media="(min-width: 1100px)"></div> <noscript> <img src="{{ 'home-page-hero-small.jpg' | asset_url }}"> </noscript> </div> Tuesday, 3 September 13
  104. Improvements Tuesday, 3 September 13

  105. Includes for picturefill.js Tuesday, 3 September 13

  106. {% for product in collection.magazines.products %} Output product details here

    {% include 'picturefill' with product %} {% endfor %} Tuesday, 3 September 13
  107. {% for product in collection.magazines.products %} Output product details here

    {% include 'picturefill' with product %} {% endfor %} Tuesday, 3 September 13
  108. <div data-picture data-alt="8 Faces Magazine"> <div data-src="{{ picturefill.featured_image | product_img_url:

    'small' }}"></div> <div data-src="{{ picturefill.featured_image | product_img_url: 'medium' }}" data-media="(min-width: 500px)"></div> <div data-src="{{ picturefill.featured_image | product_img_url: 'original' }}" data-media="(min-width: 1100px)"></div> <noscript> <img src="{{ picturefill.featured_image | product_img_url: 'small' }}"> </noscript> </div> Tuesday, 3 September 13
  109. <div data-picture data-alt="8 Faces Magazine"> <div data-src="{{ picturefill.featured_image | product_img_url:

    'small' }}"></div> <div data-src="{{ picturefill.featured_image | product_img_url: 'medium' }}" data-media="(min-width: 500px)"></div> <div data-src="{{ picturefill.featured_image | product_img_url: 'original' }}" data-media="(min-width: 1100px)"></div> <noscript> <img src="{{ picturefill.featured_image | product_img_url: 'small' }}"> </noscript> </div> Tuesday, 3 September 13
  110. Total time: 2.5 days Tuesday, 3 September 13

  111. readdigest.com Tuesday, 3 September 13

  112. cart.liquid Tuesday, 3 September 13

  113. {% item.variant.id == 346188649 or item.variant.id == 346188733 %} <td>

    ! <a href="http://readdigest.com"> ! ! {{ item.title }} ! </a> </td> {% endif %} Tuesday, 3 September 13
  114. {% item.variant.id == 346188649 or item.variant.id == 346188733 %} <td>

    ! <a href="http://readdigest.com"> ! ! {{ item.title }} ! </a> </td> {% endif %} Tuesday, 3 September 13
  115. FetchApp Tuesday, 3 September 13

  116. readdigest.com Tuesday, 3 September 13

  117. Lessons Learned Tuesday, 3 September 13

  118. It’s easier than you think Tuesday, 3 September 13

  119. The days of banks, merchant accounts, & payment gateways are

    (almost) gone! Tuesday, 3 September 13
  120. There’s no bigger buzz than watching the sales come in!

    Tuesday, 3 September 13
  121. But wait... Tuesday, 3 September 13

  122. There are things you need to consider Tuesday, 3 September

    13
  123. Shipping Tuesday, 3 September 13

  124. Customers not clients Tuesday, 3 September 13

  125. Support Tuesday, 3 September 13

  126. Refunds, returns & damaged goods Tuesday, 3 September 13

  127. VAT! Tuesday, 3 September 13

  128. Accounting Tuesday, 3 September 13

  129. ★ Shopify ★ FetchApp ★ Stripe ★ Xero ★ TextExpander

    ★ Help Scout Tuesday, 3 September 13
  130. Keir Whitaker / @keirwhitaker / keirwhitaker.com Thank You keirwhitaker.com /

    @keirwhitaker viewportindustries.com / @viewportind backtofrontshow.com / @backtofrontshow shopify.com / @shopify Tuesday, 3 September 13