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
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
SSMRunbook作成の勘所_20241120
koichiotomo
3
160
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
SRE×AIOpsを始めよう！GuardDutyによるお手軽脅威検出
amixedcolor
0
150
強いチームと開発生産性
onk
PRO
35
11k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
AGIについてChatGPTに聞いてみた
blueb
0
130
日経電子版のStoreKit2フルリニューアル
shimastripe
1
110
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
870
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
450
Lambdaと地方とコミュニティ
miu_crescent
2
370

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
334
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Scaling GitHub
holman
458
140k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
97
Faster Mobile Websites
deanohume
305
30k
It's Worth the Effort
3n
183
27k
Art, The Web, and Tiny UX
lynnandtonic
297
20k

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