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.
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
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>
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 -->
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 %}