Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Shopify for Designers Workshop
Search
Keir Whitaker
March 14, 2014
Technology
1
93
Shopify for Designers Workshop
This deck from the Second Wednesday, 12th March 2014
Keir Whitaker
March 14, 2014
Tweet
Share
More Decks by Keir Whitaker
See All by Keir Whitaker
DotYork Workshop
keirwhitaker
0
46
Grow your web design business with the Shopify Partner Program
keirwhitaker
1
210
C4DI Presentation: The Shopify Economy
keirwhitaker
1
230
A Pragmatists Guide to Making your Side Projects Pay
keirwhitaker
3
130
An Afternoon with Shopify - Brooklyn, October 2013
keirwhitaker
0
55
Building Online Businesses
keirwhitaker
0
64
From side project to business (is easier than you think)
keirwhitaker
0
67
Other Decks in Technology
See All in Technology
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
KTC_DBRE.pdf
_awache
0
290
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
XRミーティング 2024-03-20
1ftseabass
PRO
0
100
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
Tohoku.Tech #1 「Cursorを使ったRaspberry Piの開発」by ねこまた
jun2882
0
250
Challenges - Open Farming Hackdays 2024
loleg
0
560
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
660
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
How to name files
jennybc
62
92k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Unsuck your backbone
ammeep
661
56k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Side Projects
sachag
451
41k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
Practical Orchestrator
shlominoach
180
9.7k
Optimizing for Happiness
mojombo
369
69k
Transcript
Shopify for Designers - Nottingham 12.03.2014
@shopify #shopifyu
Who am I?
@keirwhitaker
[email protected]
keirwhitaker.com
What is Shopify?
Easy to use theme based hosted ecommerce platform
Founded 2006 Ottawa, Canada ~350 employees
90,000+ stores 2012 $742m GMV 2013 $1.5bn GMV
Shopify Payments POS
100% Free for Designers to use
Build a Business for Designers
Opportunities for Designers
Shopify Partners
Shopify Experts
Sign up to the Partner Programme bit.ly/1lOPsAg
Example Stores
A Book Apart
United Pixel Workers
Whipping Post
Greats Brand
Pure Fix Cycles
Best Made Co.
Hard Graft
Big Cup Little Cup
Hiut Denim
Online Admin
Dashboard
Ecommerce
Blogs & Pages
Themes, Apps & Settings
App Store
shopify.com/apps
shopify.com/apps
80/20 Revenue Share
Theme Store
shopify.com/themes
shopify.com/themes
In 2012 50% of theme designers made $20k+ (many made
$100k+)
70/30 Revenue Share
Key Concepts
Products
None
None
Product Admin
Collections
purefixcycles.com/collections
purefixcycles.com/collections/50mm-wheelsets
purefixcycles.com/collections/50mm-wheelsets
Collections Admin
Filtering Collections
Product Tags
purefixcycles.com/collections/drivetrain/parts+white
Features
Image resizing Navigation lists CDN for all assets Page templates
Redirect module Discount engine Gift cards
Themes
HTML CSS JS Liquid
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
/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
Birthday Suit
Liquid
Output ! {{ product.title }} ! {{ product.description }} !
{{ product.handle }}
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 }}
Logic ! {% if product.available %} Show Add to cart
button here {% else %} Display message! {% endif %}
Loops ! {% for image in product.images %} <img src="{{
image | product_img_url: 'medium' }}" /> {% endfor %}
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>
product.liquid
theme.liquid
header.liquid
Theme Settings
Theme Settings
settings.html
Theme Settings ! <img src="{{ 'home-page-hero-small.jpg' | asset_url }}">
Workflow
Partners Dashboard - Dev Shops
Sublime Text 2 + Liquid Syntax
apps.shopify.com/desktop-theme-editor
Upload via admin
Time for a break
Task 1 Products & Collections
Login to your dashboard and create a dev shop
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 it
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 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
Create a new snippet called product- ***.liquid ! *** =
one of your products
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
Thank You - Questions?
[email protected]
/ @keirwhitaker