Post on 17-Aug-2015
transcript
Shopify Theme BuildingSecond Wednesday Workshop - June 2015
Who am I?
Keir Whitaker keir@shopify.com keirwhitaker.com
@keirwhitaker
Before we begin
shopify.com/partners
shopify.com/grow
What is Shopify?
Theme based hosted ecommerce platform
used by 165,000+ stores
Platform?
2014 GMV $3,700,000,000
2014 $4.7 million paid to app developers
$4.2 million paid to theme developers 41,000 connections made between
merchants and Shopify Experts
shopify.com/2014
Example Stores
Online
Five Simple Steps
Smashing Magazine
Greats Brand
Herb Lester
Pure Fix Cycles
Best Made Co.
Holstee
For Merchants
Sell Everywhere Shopify mobile app Order management
Customer management Discount engine Reporting tools
Shipping and fulfilment Gift cards
70+ payment gateways 24/7 support
1000+ 3rd party apps
$29, $79, $179/month + transaction fees
( £19 / £53 / £121 )
New: Channels
Online Point of Sale Buy Button
Point of Sale (POS)
New: Buyable Pins
New: Buy Buttons
Pages & Blogs
The Shopify Blog
Pages
Approaches to Integration
Payments & Checkout
Shopify Payments
Basic: 2.4% + 20p Professional: 2.1% + 20p Unlimited: 1.8% + 20p
Responsive Checkout
Bogus Gateway
Notifications
Notifications
Receiptful
URL Redirects
Redirect old to new
For Designers
Flexible theme based system Sass support
Custom templates Timber framework
Mac theme sync tool / Ruby Gem Deploy from Git Repos (via Beanstalk)
Free workshops and tutorials All assets pushed to CDN
Unlimited dev shops (100% free sandboxes) Partner & Expert programmes & Forums
24/7 Partner Support 20% Revenue Share
and…
No cost to design & develop for you
HTML CSS
JavaScript Liquid*
* Much more on this later
Is Shopify Responsive?
YES* If you build your themes that way
Mobile August 2014 - mobile > desktop
33% total sales from a mobile device in 2014
Questions?
Key Concepts
Products
Collections
purefixcycles.com/collections
purefixcycles.com/collections/50mm-wheelsets
purefixcycles.com/collections/50mm-wheelsets
Filtering Collections
purefixcycles.com/collections/drivetrain/parts+white
Images
2 Types of Images Theme images & Product images
unmatchedstyle.com/news/mastering-images-in-shopify-themes.php
Themes
HTML CSS
JavaScript Liquid
assets -- site.css.liquid -- site.js.liquidconfig -- settings.htmllayout -- theme.liquidsnippets -- footer.liquid -- header.liquidtemplates -- 404.liquid -- article.liquid -- blog.liquid -- cart.liquid -- collection.liquid -- gift_card.liquid -- index.liquid -- list-collections.liquid -- page.liquid -- password.liquid -- product.liquid -- search.liquid
“micro templates”
url -> template
/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
Liquid
Link between a stores data and your
templates
uses dot syntax
objects and properties
shop.name product.handle product.images
cheat.markdunkley.com
Liquid Features
Liquid Output
Output
{{ product.title }}
{{ product.description }}
{{ product.handle }}
Liquid Filters
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 }}
{{ asset_url }}
Liquid Logic
Logic
{% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
Liquid Loops
Loops
{% for image in product.images %} <img src="{{ image | product_img_url: 'medium' }}" /> {% endfor %}
Liquid Layouts
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>
{{ content_for_header }}
{{ content_for_layout }}
product.liquid
theme.liquid
header.liquid
Liquid Snippets
AKA partials & includes
/snippets/header.liquid
<header> <h1>{{ shop.name }}</h1> </header>
{% include 'header' %}
the with parameter*
* this always confuses me
Layouts, micro templates & snippets
Layout
micro template
snippet
Theme Settings
Theme settings
config/settings_schema.json
{{ settings.shop_bg_color }}
Power Tips
Alternate templates
collections.*.liquid page.*.liquid
product.*.liquid
collections.*.liquid page.*.liquid
product.*.liquid
Template selector
Alternate views
/products/cool-kicks?view=*
product.*.liquid
/products/cool-kicks?view=list
product.list.liquid
/products/cool-kicks?view=list
product.list.liquidGrid & list view
/collections/computers?view=list
Workflow
Dev stores
Sublime Text 2 + Liquid Syntax
Upload via admin
Mac sync tool
Beanstalk & git
Break
Let’s build!
1. Create a dev store 2. Add products, variants and images 3. Create collections 4. Add products to collections 5. Upload a starter theme 6. Add shop variables to theme.liquid 7. Use Liquid to output collection images 8. Use Liquid to output featured images 9. Use Liquid to output product images of all sizes 10. Create a snippet and include it using Liquid logic 11. Create theme settings JSON file 12. Output theme settings in a micro template
Login to your dashboard and create
a dev shop
Task 1 Products & Collections
Add 3 products
Add more than one product image to
each product
Add a variant to each product
Create two collections, add a collection image
and description and finally add your
products to them
Task 2 Liquid
upload shopify-birthday-suit to your dev shop and activate
the theme
Using the online theme editor add in the name & description of your
store (using the variable shop) to the
footer in theme.liquid
Using Liquid add code to output the
collection image for each collection in
list-collections.liquid
Using Liquid add code to output the
featured image in product.liquid
Now change this to add in the first image in a large format and
the rest as thumbnails
Task 3 Snippets
Copy in the contents of product.liquid and change one element
Add in a liquid logic statement to check for your products
handle and show your new snippet if true
Break
The Shopify Economy
6 Ways to Make £€$ with Shopify
1. Store setup 2. Customisation 3. Design & Build 4. Theme store 5. App Store 6. Revenue share
Market your skills
Web Site Rescues
Shopify Plus Landing Page
shopify.com/grow
And finally…
First one of you to launch a store within 3 months
will get a year free on the Unlimited plan
Thank You keir@shopify.com shopify.com/partners @shopifypartners
keirwhitaker.com @keirwhitaker