shopify theme building workshop
TRANSCRIPT
![Page 1: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/1.jpg)
Shopify Theme BuildingSecond Wednesday Workshop - June 2015
![Page 2: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/2.jpg)
Who am I?
![Page 4: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/4.jpg)
Before we begin
shopify.com/partners
![Page 5: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/5.jpg)
shopify.com/grow
![Page 6: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/6.jpg)
What is Shopify?
![Page 7: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/7.jpg)
Theme based hosted ecommerce platform
used by 165,000+ stores
![Page 8: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/8.jpg)
Platform?
![Page 9: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/9.jpg)
2014 GMV $3,700,000,000
![Page 10: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/10.jpg)
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
![Page 11: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/11.jpg)
Example Stores
![Page 12: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/12.jpg)
Online
![Page 13: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/13.jpg)
Five Simple Steps
![Page 14: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/14.jpg)
Smashing Magazine
![Page 15: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/15.jpg)
Greats Brand
![Page 16: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/16.jpg)
Herb Lester
![Page 17: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/17.jpg)
Pure Fix Cycles
![Page 18: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/18.jpg)
Best Made Co.
![Page 19: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/19.jpg)
Holstee
![Page 20: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/20.jpg)
For Merchants
![Page 21: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/21.jpg)
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
![Page 22: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/22.jpg)
$29, $79, $179/month + transaction fees
( £19 / £53 / £121 )
![Page 23: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/23.jpg)
New: Channels
![Page 24: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/24.jpg)
Online Point of Sale Buy Button
![Page 25: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/25.jpg)
Point of Sale (POS)
![Page 26: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/26.jpg)
New: Buyable Pins
![Page 27: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/27.jpg)
New: Buy Buttons
![Page 28: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/28.jpg)
![Page 29: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/29.jpg)
Pages & Blogs
![Page 30: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/30.jpg)
The Shopify Blog
![Page 31: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/31.jpg)
Pages
![Page 32: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/32.jpg)
Approaches to Integration
![Page 33: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/33.jpg)
Payments & Checkout
![Page 34: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/34.jpg)
Shopify Payments
Basic: 2.4% + 20p Professional: 2.1% + 20p Unlimited: 1.8% + 20p
![Page 35: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/35.jpg)
Responsive Checkout
![Page 36: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/36.jpg)
Bogus Gateway
![Page 37: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/37.jpg)
Notifications
![Page 38: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/38.jpg)
Notifications
![Page 39: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/39.jpg)
Receiptful
![Page 40: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/40.jpg)
URL Redirects
![Page 41: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/41.jpg)
Redirect old to new
![Page 42: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/42.jpg)
For Designers
![Page 43: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/43.jpg)
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
![Page 44: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/44.jpg)
and…
No cost to design & develop for you
![Page 45: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/45.jpg)
HTML CSS
JavaScript Liquid*
* Much more on this later
![Page 46: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/46.jpg)
Is Shopify Responsive?
![Page 47: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/47.jpg)
YES* If you build your themes that way
![Page 48: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/48.jpg)
Mobile August 2014 - mobile > desktop
33% total sales from a mobile device in 2014
![Page 49: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/49.jpg)
Questions?
![Page 50: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/50.jpg)
Key Concepts
![Page 51: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/51.jpg)
Products
![Page 52: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/52.jpg)
![Page 53: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/53.jpg)
![Page 54: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/54.jpg)
Collections
![Page 55: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/55.jpg)
purefixcycles.com/collections
![Page 56: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/56.jpg)
purefixcycles.com/collections/50mm-wheelsets
![Page 57: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/57.jpg)
purefixcycles.com/collections/50mm-wheelsets
![Page 58: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/58.jpg)
Filtering Collections
![Page 59: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/59.jpg)
purefixcycles.com/collections/drivetrain/parts+white
![Page 60: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/60.jpg)
Images
![Page 61: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/61.jpg)
2 Types of Images Theme images & Product images
![Page 62: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/62.jpg)
unmatchedstyle.com/news/mastering-images-in-shopify-themes.php
![Page 63: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/63.jpg)
Themes
![Page 64: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/64.jpg)
HTML CSS
JavaScript Liquid
![Page 65: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/65.jpg)
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
![Page 66: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/66.jpg)
“micro templates”
![Page 67: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/67.jpg)
url -> template
![Page 68: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/68.jpg)
/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
![Page 69: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/69.jpg)
Liquid
![Page 70: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/70.jpg)
Link between a stores data and your
templates
![Page 71: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/71.jpg)
uses dot syntax
![Page 72: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/72.jpg)
objects and properties
![Page 73: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/73.jpg)
shop.name product.handle product.images
![Page 74: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/74.jpg)
cheat.markdunkley.com
![Page 75: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/75.jpg)
Liquid Features
![Page 76: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/76.jpg)
Liquid Output
![Page 77: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/77.jpg)
Output
{{ product.title }}
{{ product.description }}
{{ product.handle }}
![Page 78: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/78.jpg)
Liquid Filters
![Page 79: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/79.jpg)
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 }}
![Page 80: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/80.jpg)
{{ asset_url }}
![Page 81: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/81.jpg)
Liquid Logic
![Page 82: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/82.jpg)
Logic
{% if product.available %} Show Add to cart button here {% else %} Display message! {% endif %}
![Page 83: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/83.jpg)
Liquid Loops
![Page 84: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/84.jpg)
Loops
{% for image in product.images %} <img src="{{ image | product_img_url: 'medium' }}" /> {% endfor %}
![Page 85: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/85.jpg)
Liquid Layouts
![Page 86: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/86.jpg)
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>
![Page 87: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/87.jpg)
{{ content_for_header }}
{{ content_for_layout }}
![Page 88: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/88.jpg)
product.liquid
![Page 89: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/89.jpg)
theme.liquid
![Page 90: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/90.jpg)
header.liquid
![Page 91: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/91.jpg)
Liquid Snippets
![Page 92: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/92.jpg)
AKA partials & includes
![Page 93: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/93.jpg)
/snippets/header.liquid
<header> <h1>{{ shop.name }}</h1> </header>
![Page 94: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/94.jpg)
{% include 'header' %}
![Page 95: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/95.jpg)
the with parameter*
* this always confuses me
![Page 96: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/96.jpg)
Layouts, micro templates & snippets
![Page 97: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/97.jpg)
Layout
micro template
snippet
![Page 98: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/98.jpg)
Theme Settings
![Page 99: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/99.jpg)
Theme settings
![Page 100: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/100.jpg)
config/settings_schema.json
![Page 101: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/101.jpg)
{{ settings.shop_bg_color }}
![Page 102: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/102.jpg)
Power Tips
![Page 103: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/103.jpg)
Alternate templates
![Page 104: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/104.jpg)
collections.*.liquid page.*.liquid
product.*.liquid
![Page 105: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/105.jpg)
collections.*.liquid page.*.liquid
product.*.liquid
Template selector
![Page 106: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/106.jpg)
Alternate views
![Page 107: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/107.jpg)
/products/cool-kicks?view=*
product.*.liquid
![Page 108: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/108.jpg)
/products/cool-kicks?view=list
product.list.liquid
![Page 109: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/109.jpg)
/products/cool-kicks?view=list
product.list.liquidGrid & list view
/collections/computers?view=list
![Page 110: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/110.jpg)
Workflow
![Page 111: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/111.jpg)
Dev stores
![Page 112: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/112.jpg)
Sublime Text 2 + Liquid Syntax
![Page 113: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/113.jpg)
Upload via admin
![Page 114: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/114.jpg)
Mac sync tool
![Page 115: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/115.jpg)
Beanstalk & git
![Page 116: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/116.jpg)
Break
![Page 117: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/117.jpg)
Let’s build!
![Page 118: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/118.jpg)
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
![Page 120: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/120.jpg)
Login to your dashboard and create
a dev shop
![Page 121: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/121.jpg)
Task 1 Products & Collections
![Page 122: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/122.jpg)
Add 3 products
![Page 123: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/123.jpg)
Add more than one product image to
each product
![Page 124: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/124.jpg)
Add a variant to each product
![Page 125: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/125.jpg)
Create two collections, add a collection image
and description and finally add your
products to them
![Page 126: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/126.jpg)
Task 2 Liquid
![Page 127: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/127.jpg)
upload shopify-birthday-suit to your dev shop and activate
the theme
![Page 128: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/128.jpg)
Using the online theme editor add in the name & description of your
store (using the variable shop) to the
footer in theme.liquid
![Page 129: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/129.jpg)
Using Liquid add code to output the
collection image for each collection in
list-collections.liquid
![Page 130: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/130.jpg)
Using Liquid add code to output the
featured image in product.liquid
![Page 131: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/131.jpg)
Now change this to add in the first image in a large format and
the rest as thumbnails
![Page 132: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/132.jpg)
Task 3 Snippets
![Page 133: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/133.jpg)
Copy in the contents of product.liquid and change one element
![Page 134: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/134.jpg)
Add in a liquid logic statement to check for your products
handle and show your new snippet if true
![Page 135: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/135.jpg)
Break
![Page 136: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/136.jpg)
The Shopify Economy
![Page 137: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/137.jpg)
6 Ways to Make £€$ with Shopify
![Page 138: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/138.jpg)
1. Store setup 2. Customisation 3. Design & Build 4. Theme store 5. App Store 6. Revenue share
![Page 139: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/139.jpg)
Market your skills
Web Site Rescues
Shopify Plus Landing Page
![Page 140: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/140.jpg)
shopify.com/grow
![Page 141: Shopify Theme Building Workshop](https://reader033.vdocuments.us/reader033/viewer/2022052603/55d1f893bb61eb681e8b464c/html5/thumbnails/141.jpg)
And finally…
First one of you to launch a store within 3 months
will get a year free on the Unlimited plan