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

Building Online Businesses

Keir Whitaker
September 02, 2013
Technology
0
67

Building Online Businesses

Keir Whitaker

September 02, 2013
Tweet

More Decks by Keir Whitaker

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

Other Decks in Technology

See All in Technology
少数チームで挑む： SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
120
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
340
反実仮想機械学習とは何か
usaito
PRO
7
2.2k
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
Postman v10リリース後を振り返る
nagix
0
130
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
120
現代CSSフレームワークの内部実装とその仕組み
poteboy
2
760
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
DevOpsメトリクスとアウトカムの接続にトライ！開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
200
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
AIQ株式会社　エンジニア向け会社紹介資料
aiqlab
0
370

Featured

See All Featured
Building Effective Engineering Teams - LeadDev
addyosmani
27
1.8k
GitHub's CSS Performance
jonrohan
1023
450k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
KATA
mclloyd
14
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Web Components: a chance to create the future
zenorocha
305
41k
How GitHub (no longer) Works
holman
304
140k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
4 Signs Your Business is Dying
shpigford
175
21k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The Language of Interfaces
destraynor
151
23k

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