Shopify Theme Development for Web Designers and Developers
•
5 j'aime•1,352 vues
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.
Contenu connexe
En vedette
En vedette (10)
Similaire à Shopify Theme Development for Web Designers and Developers
Similaire à Shopify Theme Development for Web Designers and Developers (20)
Plus de Growth Spark
Plus de Growth Spark (8)
Dernier
Dernier (20)
Shopify Theme Development for Web Designers and Developers
- 1. Creating Custom Shopify Themes presented at general assembly shopify & growth spark
- 2. ross beyeler Growth Spark Founder Shopify Design Ambassador
- 4. Some of Our Shopify Work
- 10. Tonight’s Agenda
- 11. agenda Working with Shopify Workshop Setup Shopify Basics BREAK Customizing Shopify Challenge 1 Challenge 2 Challenge 3 Challenge 4 Q&A
- 12. share away! share with your friends @shopify @growthspark #shopifyu
- 13. What is Shopify?
- 14. what is shopify? Easy to use, theme based hosted e-commerce platform Founded in 2006 ~350+ Employees 100,000+ stores $4B+ Customer Sales
- 17. Shopify is 100% free! For Designers and Developers working with shopify
- 22. working with shopify 50% of theme designers made $20k+ {many made $100k+}
- 23. Workshop Setup
- 24. Join the Partner Program bit.ly/sfwd-bos workshop setup
- 26. Setup your Shopify Dummy Store workshop setup
- 28. Download the Workshop Content bit.ly/sfwd-stuff workshop setup
- 29. Shopify Basics
- 36. Break Time! presented at general assembly shopify & growth spark
- 43. customizing shopify Output {{ product.title }} {{ product.description }} {{ product.handle }}
- 44. 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 }}
- 45. customizing shopify Logic {% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
- 46. 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>
- 49. Add Quantity Box to Product Detail Page challenge #1
- 50. 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
- 51. 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>
- 52. Add a Short Description to the Collections Page challenge #2
- 53. 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 }}
- 54. 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>
- 55. Add Text on Hover challenge #3
- 56. 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
- 57. 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
- 58. 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 -->
- 59. Add a Stock Level Indicator challenge #4
- 60. 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 %}
- 61. presentation Download our Resources Guide http://growthspark.com/shopify/
- 62. Thank you! ross@growthspark.com / @growthspark any questions? the end!