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
C4DI Presentation: The Shopify Economy
Search
Keir Whitaker
July 31, 2014
Technology
1
320
C4DI Presentation: The Shopify Economy
Keir Whitaker
July 31, 2014
Tweet
Share
More Decks by Keir Whitaker
See All by Keir Whitaker
DotYork Workshop
keirwhitaker
0
67
Grow your web design business with the Shopify Partner Program
keirwhitaker
1
230
A Pragmatists Guide to Making your Side Projects Pay
keirwhitaker
3
160
Shopify for Designers Workshop
keirwhitaker
1
110
An Afternoon with Shopify - Brooklyn, October 2013
keirwhitaker
0
64
Building Online Businesses
keirwhitaker
0
94
From side project to business (is easier than you think)
keirwhitaker
0
76
Other Decks in Technology
See All in Technology
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
社内お問い合わせBotの仕組みと学び
nish01
1
530
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
130
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1.1k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
6
3.9k
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
210
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
130
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
150
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
We Have a Design System, Now What?
morganepeng
53
7.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Being A Developer After 40
akosma
91
590k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Music & Morning Musume
bryan
46
6.8k
Designing for humans not robots
tammielis
254
26k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Transcript
Shopify for Designers - Hull 31.07.2014 / @shopify / #shopifyu
@keirwhitaker
[email protected]
keirwhitaker.com
What is Shopify?
Theme based hosted ecommerce platform 100% Free to Use for
designers 110,000+ stores
Fully hosted easy to use ecommerce platform
Point of Sale & Payments
Features
Auto image resizing Navigation lists CDN for all assets Page
& product templates Redirect module Discount engine Gift cards 24/7 Support
Partners & Experts
Unlimited Dev Shops 20% Revenue Share Partner Forums Help &
Support Lead Generation
Shopify Experts
Theme & App Store
shopify.com/themes
shopify.com/apps
Themes: 80/20 ! Apps: 70/30
Example Stores
A Book Apart
United Pixel Workers
Greats Brand
Pure Fix Cycles
Best Made Co.
Hard Graft
Hiut Denim
Herb Lester
Key Concepts
Products
None
Collections
purefixcycles.com/collections
purefixcycles.com/collections/50mm-wheelsets
A Quick Theme Intro
HTML CSS JS Liquid Templates
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
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 %}
Thank You - Questions?
[email protected]
/ @keirwhitaker