shopify theme development for web designers and developers
DESCRIPTION
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.TRANSCRIPT
Creating Custom Shopify Themes
presented at general assembly
shopify & growth spark
ross beyelerGrowth Spark Founder
Shopify Design Ambassador
the teamGrowth Spark
Some of Our Shopify Work
Tonight’s Agenda
agendaWorking with Shopify
Workshop SetupShopify Basics
BREAK
Customizing ShopifyChallenge 1Challenge 2Challenge 3Challenge 4
Q&A
share away!share with your friends
@shopify@growthspark
#shopifyu
What is Shopify?
what is shopify?Easy to use, theme based
hosted e-commerce platform
Founded in 2006
~350+ Employees
100,000+ stores
$4B+ Customer Sales
Working with Shopify
Shopify is 100% free!For Designers and Developers
working with shopify
working with shopify
50% of theme designers made $20k+{many made $100k+}
WorkshopSetup
Join the Partner Programbit.ly/sfwd-bos
workshop setup
Setup your Shopify Dummy Store
workshop setup
Download the Workshop Contentbit.ly/sfwd-stuff
workshop setup
Shopify Basics
shopify basics
Managing Content
shopify basics
Products
Collections
Pages
Posts
Navigation
shopify basics
Managing Sales
shopify basics
Customers
Orders
Discounts
Gift Cards
Reports
shopify basics
Managing Settings
shopify basics
Themes
Apps
Settings
Break Time!
presented at general assembly
shopify & growth spark
Customizing Shopify
customizing shopify
Theme Structure
customizing shopify
HTMLCSSJS
Liquid
Theme structure
customizing shopifyTheme structure
assets
site.css.liquidsite.js.liquid
config
layout
theme.liquid
snippets footer.liquidheader.liquid
templates
404.liquidarticle.liquidblog.liquidcart.liquid
collection.liquidindex.liquid
list-collections.liquidpage.liquid
product.liquidsearch.liquid
customizing shopifyTheme 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
customizing shopify
Liquid
customizing shopify
Output
{{ product.title }}
{{ product.description }}
{{ product.handle }}
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 }}
customizing shopify
Logic
{% if product.available %}Show Add to cart button here
{% else %}Display message!
{% endif %}
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>
Shopify Challenges
Add Quantity Box to Product Detail Page
challenge #1
challenge #1Adding 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
challenge #1Snippet 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>
Add a Short Description to the Collections Page
challenge #2
challenge #2Add 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 }}
challenge #2Add 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>
Add Text on Hover
challenge #3
challenge #3Add 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
5
4
challenge #3Adding 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
challenge #3Snippet 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 -->
Add a Stock Level Indicator
challenge #4
challenge #4Add 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 %}
presentationDownload our Resources Guide
http://growthspark.com/shopify/
