Shopify for Designers Workshop

Shopify for Designers Workshop

This deck from the Second Wednesday, 12th March 2014

A4fe614b0340b92772f4b551b3185303?s=128

Keir Whitaker

March 14, 2014
Tweet

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

  42. None
  43. None
  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