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
240
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
46
Grow your web design business with the Shopify Partner Program
keirwhitaker
1
210
A Pragmatists Guide to Making your Side Projects Pay
keirwhitaker
3
130
Shopify for Designers Workshop
keirwhitaker
1
95
An Afternoon with Shopify - Brooklyn, October 2013
keirwhitaker
0
55
Building Online Businesses
keirwhitaker
0
68
From side project to business (is easier than you think)
keirwhitaker
0
68
Other Decks in Technology
See All in Technology
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
320
Cypress or Playwright?
rainerhahnekamp
0
180
競技としてのKaggle、役に立つKaggle
yu4u
6
2.4k
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
1.1k
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
370
個人のAWSアカウントをマルチ運用してみた
miura55
2
200
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
470
Next.js に疲れた私は Vue3 に癒やされた
akagire
0
140
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
320
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
4.4k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Designing with Data
zakiwarfel
96
4.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Debugging Ruby Performance
tmm1
70
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
A Modern Web Designer's Workflow
chriscoyier
689
190k
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