C4DI Presentation: The Shopify Economy

Transcript

1. Shopify for Designers - Hull 31.07.2014 / @shopify / #shopifyu
2. @keirwhitaker keir@shopify.com keirwhitaker.com
3. What is Shopify?
4. Theme based hosted ecommerce platform 100% Free to Use for designers 110,000+ stores
5. Fully hosted easy to use ecommerce platform
6. Point of Sale & Payments
7. Features
8. Auto image resizing Navigation lists CDN for all assets Page & product templates Redirect module Discount engine Gift cards 24/7 Support
9. Partners & Experts
10. Unlimited Dev Shops 20% Revenue Share Partner Forums Help & Support Lead Generation
11. Shopify Experts
12. Theme & App Store
13. shopify.com/themes
14. shopify.com/apps
15. Themes: 80/20 ! Apps: 70/30
16. Example Stores
17. A Book Apart
18. United Pixel Workers
19. Greats Brand
20. Pure Fix Cycles
21. Best Made Co.
22. Hard Graft
23. Hiut Denim
24. Herb Lester
25. Key Concepts
26. Products
28. Collections
29. purefixcycles.com/collections
30. purefixcycles.com/collections/50mm-wheelsets
31. A Quick Theme Intro
32. HTML CSS JS Liquid Templates
33. 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
34. /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
35. Liquid
36. Output ! {{ product.title }} ! {{ product.description }} ! {{ product.handle }}
37. 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 }}
38. Logic ! {% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
39. Loops ! {% for image in product.images %} <img src="{{ image | product_img_url: 'medium' }}" /> {% endfor %}
40. Thank You - Questions? keir@shopify.com / @keirwhitaker