Shopify for Designers Workshop

This deck from the Second Wednesday, 12th March 2014

Transcript

1. Shopify for Designers - Nottingham 12.03.2014
2. @shopify #shopifyu
3. Who am I?
4. @keirwhitaker keir@shopify.com keirwhitaker.com
5. What is Shopify?
6. Easy to use theme based hosted ecommerce platform
7. Founded 2006
   Ottawa, Canada
   ~350 employees
8. 90,000+ stores
   2012 $742m GMV
   2013 $1.5bn GMV
9. Shopify Payments
   POS
10. 100% Free for Designers to use
11. Build a Business for Designers
12. Opportunities for Designers
13. Shopify Partners
14. Shopify Experts
15. Sign up to the Partner Programme bit.ly/1lOPsAg
16. Example Stores
17. A Book Apart
18. United Pixel Workers
19. Whipping Post
20. Greats Brand
21. Pure Fix Cycles
22. Best Made Co.
23. Hard Graft
24. Big Cup Little Cup
25. Hiut Denim
26. Online Admin
27. Dashboard
28. Ecommerce
29. Blogs & Pages
30. Themes, Apps & Settings
31. App Store
32. shopify.com/apps
33. shopify.com/apps
34. 80/20 Revenue Share
35. Theme Store
36. shopify.com/themes
37. shopify.com/themes
38. In 2012 50% of theme designers made $20k+ (many made $100k+)
39. 70/30 Revenue Share
40. Key Concepts
41. Products
44. Product Admin
45. Collections
46. purefixcycles.com/collections
47. purefixcycles.com/collections/50mm-wheelsets
48. purefixcycles.com/collections/50mm-wheelsets
49. Collections Admin
50. Filtering Collections
51. Product Tags
52. purefixcycles.com/collections/drivetrain/parts+white
53. Features
54. Image resizing Navigation lists CDN for all assets Page templates Redirect module Discount engine Gift cards
55. Themes
56. HTML CSS JS Liquid
57. assets -- site.css.liquid -- site.js.liquid config layout -- theme.liquid snippets -- footer.liquid -- header.liquid templates -- 404.liquid -- article.liquid -- blog.liquid -- cart.liquid -- collection.liquid -- index.liquid -- list-collections.liquid -- page.liquid -- product.liquid -- search.liquid
58. /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
59. Birthday Suit
60. Liquid
61. Output ! {{ product.title }} ! {{ product.description }} ! {{ product.handle }}
62. 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 }}
63. Logic ! {% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
64. Loops ! {% for image in product.images %} <img src="{{ image | product_img_url: 'medium' }}" /> {% endfor %}
65. 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>
66. product.liquid
67. theme.liquid
68. header.liquid
69. Theme Settings
70. Theme Settings
71. settings.html
72. Theme Settings ! <img src="{{ 'home-page-hero-small.jpg' | asset_url }}">
73. Workflow
74. Partners Dashboard - Dev Shops
75. Sublime Text 2 + Liquid Syntax
76. apps.shopify.com/desktop-theme-editor
77. Upload via admin
78. Time for a break
79. Task 1 Products & Collections
80. Login to your dashboard and create a dev shop
81. Add 3 products
82. Add more than one product image to each product
83. Add a variant to each product
84. Create two collections, add a collection image and description and finally add your products to them
85. Task 2 Liquid
86. upload “shopify- birthday-suit” to your dev shop and activate it
87. Using the online theme editor add in the name & description of your store (using the variable "shop") to the footer in theme.liquid
88. Using Liquid add code to output the "collection image" for each collection list-collections.liquid
89. Using Liquid add code to output the "featured image" in product.liquid
90. Now change this to add in the first image in a “large” format and the rest as thumbnails
91. Task 3 Snippets
92. Create a new snippet called product- ***.liquid ! *** = one of your products
93. Copy in the contents of product.liquid and change one element
94. Add in a liquid logic statement to check for your products handle and show your new snippet if true
95. Thank You - Questions? keir@shopify.com / @keirwhitaker