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
110
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
63
Grow your web design business with the Shopify Partner Program
keirwhitaker
1
230
C4DI Presentation: The Shopify Economy
keirwhitaker
1
310
A Pragmatists Guide to Making your Side Projects Pay
keirwhitaker
3
160
An Afternoon with Shopify - Brooklyn, October 2013
keirwhitaker
0
64
Building Online Businesses
keirwhitaker
0
89
From side project to business (is easier than you think)
keirwhitaker
0
75
Other Decks in Technology
See All in Technology
Github Copilot エージェントモードで試してみた
ochtum
0
110
rubygem開発で鍛える設計力
joker1007
2
220
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
290
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
470
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
220
How Community Opened Global Doors
hiroramos4
PRO
1
120
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
300
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
Kotlin Coroutine Mechanisms: A Surprisingly Deep Rabbithole
amanda_hinchman
2
100
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
KATA
mclloyd
30
14k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
Designing Experiences People Love
moore
142
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Documentation Writing (for coders)
carmenintech
72
4.9k
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