DotYork Workshop

Slides from my workshop on Wednesday 8th April 2015

Transcript

1. Shopify Theme Building DotYork Workshop - April 2015
2. Who am I?
3. Keir Whitaker keir@shopify.com keirwhitaker.com @keirwhitaker
4. Before we begin shopify.com/partners
5. What is Shopify?
6. Theme based hosted ecommerce platform used by 150,000+ stores
7. Platform?
8. 2014 GMV $3,700,000,000
9. 2014 $4.7 million paid to app developers $4.2 million paid to theme developers 41,000 connections made between merchants and Shopify Experts shopify.com/2014
10. Example Stores
11. Greats Brand
12. Pure Fix Cycles
13. Best Made Co.
14. Holstee
15. Calm The Ham
16. Herb Lester
17. For Merchants
18. Sell online, in store and on the move Shopify mobile app Order management Customer management Discount engine Reporting tools Shipping and fulfilment Gift cards 70+ payment gateways 24/7 support 600+ 3rd party apps (MailChimp, Facebook)
19. $29, $79, $179/month + transaction fees ( £19 / £53 / £121 )
20. New: Channels
21. Online Point of Sale Buy Button
22. Online
23. Point of Sale (POS)
24. New: Buy Buttons
26. Pages & Blogs
27. The Shopify Blog
28. Pages
29. Integration
30. Payments & Checkout
31. Shopify Payments Basic: 2.4% + 20p Professional: 2.1% + 20p Unlimited: 1.8% + 20p
32. Responsive Checkout
33. Bogus Gateway
34. Notifications
35. Notifications
36. Receiptful
37. URL Redirects
38. Redirect old to new
39. For Designers
40. Flexible theme based system Sass support Custom templates Timber framework Mac theme sync tool / Ruby Gem Deploy from Git Repos (via Beanstalk) Free workshops and tutorials All assets pushed to CDN Unlimited dev shops (100% free sandboxes) Partner & Expert programmes & Forums 24/7 Partner Support 20% Revenue Share
41. and… No cost to design & develop for you
42. HTML CSS JavaScript Liquid* * Much more on this later
43. Is Shopify Responsive?
44. YES * If you build your themes that way
45. Mobile August 2014 - mobile > desktop 33% total sales from a mobile device in 2014
46. Questions?
47. Key Concepts
48. Products
51. Collections
52. purefixcycles.com/collections
53. purefixcycles.com/collections/50mm-wheelsets
54. purefixcycles.com/collections/50mm-wheelsets
55. Filtering Collections
56. purefixcycles.com/collections/drivetrain/parts+white
57. Images
58. 2 Types of Images Theme images & Product images
59. unmatchedstyle.com/news/mastering- images-in-shopify-themes.php
60. Themes
61. HTML CSS JavaScript Liquid
62. assets -- site.css.liquid -- site.js.liquid config -- settings.html layout -- theme.liquid snippets -- footer.liquid -- header.liquid templates -- 404.liquid -- article.liquid -- blog.liquid -- cart.liquid -- collection.liquid -- gift_card.liquid -- index.liquid -- list-collections.liquid -- page.liquid -- password.liquid -- product.liquid -- search.liquid
63. “micro templates”
64. url -> template
65. /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
66. Liquid
67. Link between a stores data and your templates
68. uses dot syntax
69. objects and properties
70. shop.name product.handle product.images
71. cheat.markdunkley.com
72. Liquid Features
73. Liquid Output
74. Output {{ product.title }} {{ product.description }} {{ product.handle }}
75. Liquid Filters
76. 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 }}
77. {{ asset_url }}
78. Liquid Logic
79. Logic {% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
80. Liquid Loops
81. Loops {% for image in product.images %} <img src="{{ image | product_img_url: 'medium' }}" /> {% endfor %}
82. Liquid Layouts
83. 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>
84. {{ content_for_header }} {{ content_for_layout }}
85. product.liquid
86. theme.liquid
87. header.liquid
88. Liquid Snippets
89. AKA partials & includes
90. /snippets/header.liquid <header> <h1>{{ shop.name }}</h1> </header>
91. {% include 'header' %}
92. the with parameter* * this always confuses me
93. Layouts, micro templates & snippets
94. Layout micro template snippet
95. Theme Settings
96. Theme settings
97. config/settings_schema.json
98. {{ settings.shop_bg_color }}
99. Power Tips
100. Alternate templates
101. collections.*.liquid page.*.liquid product.*.liquid
102. collections.*.liquid page.*.liquid product.*.liquid Template selector
103. Alternate views
104. /products/cool-kicks? view=* product.*.liquid
105. /products/cool-kicks? view=list product.list.liquid
106. /products/cool-kicks? view=list product.list.liquid Grid & list view /collections/computers?view=list
107. Workflow
108. Dev stores
109. Sublime Text 2 + Liquid Syntax
110. Upload via admin
111. Mac sync tool
112. Beanstalk & git
113. Break
114. Let’s build!
115. 1. Create a dev store 2. Add products, variants and images 3. Create collections 4. Add products to collections 5. Upload a starter theme 6. Add shop variables to theme.liquid 7. Use Liquid to output collection images 8. Use Liquid to output featured images 9. Use Liquid to output product images of all sizes 10. Create a snippet and include it using Liquid logic 11. Create theme settings JSON file 12. Output theme settings in a micro template
116. Partner account shopify.com/partners
117. Login to your dashboard and create a dev shop
118. Task 1 Products & Collections
119. Add 3 products
120. Add more than one product image to each product
121. Add a variant to each product
122. Create two collections, add a collection image and description and finally add your products to them
123. Task 2 Liquid
124. upload shopify- birthday-suit to your dev shop and activate the theme
125. Using the online theme editor add in the name & description of your store (using the variable shop) to the footer in theme.liquid
126. Using Liquid add code to output the collection image for each collection in list-collections.liquid
127. Using Liquid add code to output the featured image in product.liquid
128. Now change this to add in the first image in a large format and the rest as thumbnails
129. Task 3 Snippets
130. Create a new snippet called product- ***.liquid *** = one of your products
131. Copy in the contents of product.liquid and change one element
132. Add in a liquid logic statement to check for your products handle and show your new snippet if true
133. Break
134. The Shopify Economy
135. 6 Ways to Make £€$ with Shopify
136. 1. Store setup 2. Customisation 3. Design & Build 4. Theme store 5. App Store 6. Revenue share
137. Market your skills Web Site Rescues Shopify Plus Landing Page
138. And finally… First one of you to launch a store within 3 months will get a year free on the Unlimited plan
139. Thank You keir@shopify.com shopify.com/partners @shopifypartners keirwhitaker.com @keirwhitaker