DotYork Workshop

DotYork Workshop

Slides from my workshop on Wednesday 8th April 2015

A4fe614b0340b92772f4b551b3185303?s=128

Keir Whitaker

April 08, 2015
Tweet

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

  25. None
  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

  49. None
  50. None
  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