Shopify Theme Development for Web Designers and Developers

983 views
821 views

Published on

Presented by e-commerce consultancy, Growth Spark, this presentation provides an overview of the Shopify e-commerce platform and several 'challenges' to equip designers and developers with the basics of the Liquid theme framework. Originally presented in August 2014 in partnership with General Assembly, this 'workshop' was highly interactive and best done alongside an open browser - coding away in Shopify.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
983
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
11
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Shopify Theme Development for Web Designers and Developers

  1. 1. Creating Custom Shopify Themes presented at general assembly shopify & growth spark
  2. 2. ross beyeler Growth Spark Founder Shopify Design Ambassador
  3. 3. the team Growth Spark
  4. 4. Some of Our Shopify Work
  5. 5. Tonight’s Agenda
  6. 6. agenda Working with Shopify Workshop Setup Shopify Basics BREAK Customizing Shopify Challenge 1 Challenge 2 Challenge 3 Challenge 4 Q&A
  7. 7. share away! share with your friends  @shopify @growthspark #shopifyu
  8. 8. What is Shopify?
  9. 9. what is shopify? Easy to use, theme based hosted e-commerce platform Founded in 2006 ~350+ Employees 100,000+ stores $4B+ Customer Sales
  10. 10. Working with Shopify
  11. 11. Shopify is 100% free! For Designers and Developers working with shopify
  12. 12. working with shopify 50% of theme designers made $20k+ {many made $100k+}
  13. 13. Workshop Setup
  14. 14. Join the Partner Program bit.ly/sfwd-bos workshop setup
  15. 15. Setup your Shopify Dummy Store workshop setup
  16. 16. Download the Workshop Content bit.ly/sfwd-stuff workshop setup
  17. 17. Shopify Basics
  18. 18. shopify basics Managing Content
  19. 19. shopify basics Products Collections Pages Posts Navigation
  20. 20. shopify basics Managing Sales
  21. 21. shopify basics Customers Orders Discounts Gift Cards Reports
  22. 22. shopify basics Managing Settings
  23. 23. shopify basics Themes Apps Settings
  24. 24. Break Time! presented at general assembly shopify & growth spark
  25. 25. Customizing Shopify
  26. 26. customizing shopify Theme Structure
  27. 27. customizing shopify HTML CSS JS Liquid Theme structure
  28. 28. customizing shopify Theme structure 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
  29. 29. customizing shopify Theme structure /thisisntarealurl /blogs/<blog-name>/<article-id-handle> /blogs/<blog-name> /cart /collections /collections/<collection-handle> /collections/<collection-handle>/<tag> / /pages/<page-handle> /products /products/<product-handle> /search?q=<search-term> 404.liquid article.liquid blog.liquid cart.liquid list-collections.liquid collection.liquid collection.liquid index.liquid page.liquid list-collections.liquid product.liquid search.liquid
  30. 30. customizing shopify Liquid
  31. 31. customizing shopify Output {{ product.title }} {{ product.description }} {{ product.handle }}
  32. 32. customizing shopify 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 }}
  33. 33. customizing shopify Logic {% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
  34. 34. customizing shopify 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>
  35. 35. Shopify Challenges
  36. 36. Add Quantity Box to Product Detail Page challenge #1
  37. 37. challenge #1 Adding Quantity Box to Product Detail Page Go to http://bit.ly/add-quantity-box In the snippets folder, locate product.liquid. Copy/Paste snippet code from the workshop file
  38. 38. challenge #1 Snippet Code <label for=”quantity”>Qty: </label> <input min=”1” type=”number” id=”quantity” name=”quantity” value=”1” /> <style>#quantity { padding:5px; width:35px; border: 1px solid #555; }</style>
  39. 39. Add a Short Description to the Collections Page challenge #2
  40. 40. challenge #2 Add Short Description to Collections Page Resources: http://bit.ly/shopify-documents In the snippets folder, locate product-loop.liquid. Add the product description tag located in the workshop folder. <div class=”description”> {{ product.description }}
  41. 41. challenge #2 Add Short Description to Collections Page Resources: http://bit.ly/shopify-documents Now using a filter, shorten/truncate to X number of characters. <div class=”description”> {{ product.description | truncatewords: 50 }} </div>
  42. 42. Add Text on Hover challenge #3
  43. 43. challenge #3 Add Text on Hover Go to http://bit.ly/shopify-resource Locate the css and copy from the gist located in the workshop folder In the snippets folder, locate the product-loop.liquid page
  44. 44. 5 4 challenge #3 Adding Quantity Box to Product Detail Page Enclose your image tag within a div with the class of reveal. <div class=”reveal”>IMAGE TAG</div> What do you want to reveal on hover? Example: product title, product price
  45. 45. challenge #3 Snippet Code <div class=”hidden”> <div class=”caption”> <div class=”centered”> <p>{{ product.title }}</p> <p>{{ product.price | money }}</p> </div><!-- end of .centered --> </div><!-- end of .caption --> </div><!-- end of .hidden -->
  46. 46. Add a Stock Level Indicator challenge #4
  47. 47. challenge #4 Add a Stock Level Indicator To see the changes, go back to the products page and track inventory. Create a statement to show an alert when there is only one product left in the inventory {% for variant in product.variants %} {% if variant.inventory_quantity == 1 %} only {{variant.inventory_quantity}} left! {% endif %} {% endfor %}
  48. 48. presentation Download our Resources Guide http://growthspark.com/shopify/
  49. 49. Thank you! ross@growthspark.com / @growthspark any questions? the end!

×