Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Online Businesses

Keir Whitaker
September 02, 2013
Technology
0
82

Building Online Businesses

Keir Whitaker

September 02, 2013
Tweet

More Decks by Keir Whitaker

See All by Keir Whitaker
DotYork Workshop
keirwhitaker
0
48
Grow your web design business with the Shopify Partner Program
keirwhitaker
1
230
C4DI Presentation: The Shopify Economy
keirwhitaker
1
270
A Pragmatists Guide to Making your Side Projects Pay
keirwhitaker
3
150
Shopify for Designers Workshop
keirwhitaker
1
100
An Afternoon with Shopify - Brooklyn, October 2013
keirwhitaker
0
59
From side project to business (is easier than you think)
keirwhitaker
0
71

Other Decks in Technology

See All in Technology
podman_update_2024-12
orimanabu
1
280
GitHub Copilot のテクニック集/GitHub Copilot Techniques
rayuron
37
15k
オプトインカメラ：UWB測位を応用したオプトイン型のカメラ計測
matthewlujp
0
180
大幅アップデートされたRagas v0.2をキャッチアップ
os1ma
2
540
Oracle Cloudの生成AIサービスって実際どこまで使えるの？ エンジニア目線で試してみた
minorun365
PRO
4
290
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
290
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
38k
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
UI State設計とテスト方針
rmakiyama
2
620
Wantedly での Datadog 活用事例
bgpat
1
520
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1.1k

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
327
38k
BBQ
matthewcrist
85
9.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Building Your Own Lightsaber
phodgson
103
6.1k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
Statistics for Hackers
jakevdp
796
220k
GitHub's CSS Performance
jonrohan
1030
460k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
For a Future-Friendly Web
brad_frost
175
9.4k
Adopting Sorbet at Scale
ufuk
73
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k

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