English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 122 Lectures (19h 41m) | 4.65 GB
Build completely custom e-commerce websites using HTML, CSS & Sass, Javascript and Shopify’s templating language Liquid.
In this course we’ll cover the basics of Shopify and how to get started with designing and building completely custom e-commerce websites using HTML, CSS, Sass, Javascript and Shopify’s templating language, Liquid. It also covers everything you need to know about theming.
Shopify is great for multi-page e-commerce sites for your own business, side project or to hand off to clients. Learn how to build your own themes from scratch, customize them around your features, and implement cart and payment functionality. You’ll learn how to build a full e-commerce website with homepage, collection page, product page, and search.
What you’ll learn
- Basics of Shopify’s ThemeKit, online Theme Editor and templating language Liquid
- Build a full e-commerce website with homepage, collection page, product page, blog and search
- How to turn your designs into custom themes
- How to work with collections of products with multiple variants
- How to set up a standard cart, a quick mini-cart with live updating using Ajax and checkout functionality
- Advanced functionality including site search, currency switching, color swatch selection, and Shopify Theme Sections
Table of Contents
1 Welcome and Week Overview
2 Why Shopify?
3 Setting Up First Store
4 Creating our first theme
5 Exploring our Design and Technical Blueprint
6 Setting up our first product
7 Beginning Development
8 Getting Product Data
9 Outputting Product Data and hooking up the Cart Form
10 Marking up Index.liquid
11 Matching the Add to Cart form to our Designs
12 Using Locales and Translations for static text
13 Marking up the Cart Button
14 Exploring the Cart
15 Marking Up The Cart Page
16 Marking up the Empty Cart state
17 Introduction to Stylesheets
18 Saving Sass Variables and Base Styles
19 Basic Homepage Styling
20 Homepage Grid Layouts
21 Styling the Image Area
22 Styling the Info Area
23 Tightening up the homepage
24 Styling the Cart Icon
25 Styling the Empty Cart
26 Styling the Filled Cart
27 Changing the Product Image with JavaScript
28 Creating the 404 page and pointing unstyled templates to it
29 Adding Webfonts
30 Responsive Design Homework
31 Week 1 + Project Summary
32 Intro + Week Overview
33 Exploring our Designs
34 Importing Products from a CSV File
35 Setting up static assets and dynamic content
36 Introducing Link Lists
37 Marking up Theme.liquid
38 Setting up the Homepage Collection
39 Marking up Index.liquid
40 Marking up Product-Card.liquid
41 Marking up Product.liquid
42 Switching from a Dropdown Select to Radio Buttons
43 Adding the Quantity Component
44 Making the Quantity Component Functional
45 Hooking into the Quantity Change Event
46 Dynamically Adjusting and Validating the Add to Cart Form
47 Cleaning up the JavaScript
48 Finishing the Add to Cart form Markup
49 Marking up the Cart + Line Item
50 Beginning styles for theme, header + footer
51 Styling Index + Product Card
52 Styling the Product Page + Add to Cart Form
53 Styling the Cart Page + Line Items
54 Introducing the Ajax API
55 Preparing the Mini Cart and Cart Contents
56 Adding products using the Ajax API
57 Making the Mini Cart Functional with Ajax
58 Styling the Mini Cart
59 Opening and Closing the Mini Cart
60 Marking up and Styling the Page.liquid + 404.liquid
61 QAing the Site
62 Web fonts + Responsive
63 Week + Project Summary
64 Intro + Week Overview
65 Exploring our Designs
66 Setting up the new store with imported data
67 Marking up the Header and Footer
68 Introducing Theme Settings
69 Introducing Currency Switching
70 Setting up the store for multiple currencies
71 Adding Shopify’s currency settings to Settings_Schema
72 Adding Shopify’s Currencies Liquid snippet
73 Creating and including the Currency Switch
74 Refactoring the Currency Picker
75 Debugging & Adding a Currency Blurb to the cart page
76 Introduction to Theme Sections
77 Evaluating the sections in Index
78 Creating the Schema for the Slideshow Section
79 Marking up the Index Slideshow Section
80 Creating the Schema for the Content sections
81 Marking up the Content Sections
82 Introducing Complex Product Options
83 Setting up the Add to Cart Form
84 Using Liquid to create a JSON object of variant data
85 Separating Product Options
86 Validating or Invalidating the Add to Cart Form
87 Adjusting the price based on Selected Variant
88 Assigning and Retrieving the selected variant from the URL
89 Hooking up the form to the Ajax API
90 Creating the Mini Cart and Line Item Snippets
91 Hooking up the mini cart to the Ajax API
92 Week Summary + Homework
93 Recap + Week Intro
94 Setting up the Line Item Quantity Picker
95 Updating the quantity via the Ajax API
96 Creating the Search Form component
97 Getting Search Results
98 Marking up the Search, Results, and 404 Page
99 Marking up the Collection Page + Product Card
100 Marking up the Line Item + Cart Contents
101 Marking up the Product Page
102 Getting dynamic color swatches
103 Extending the Product Description using Liquid
104 Inlining SVGs
105 Introduction to Modular Stylesheets
106 Setting up PrePros + Architecting Stylesheets
107 Global Stylesheets + Live Reloading
108 Base variables, styles, and mixins
109 Header + Styleguide
110 Footer Styles
111 Styling the Collection Page + Product Card
112 Styling the Product Page
113 Styling the Collection List + Product More snippets
114 Styling the cart, contents + mini cart
115 Styling the Search, results, + 404 page
116 Styling the Index Sections
117 Hooking up Slideshows
118 Putting it all together + Homework
119 Self-Hosting Webfonts
120 Customizing the Checkout
121 Placing a test order
122 Week Review + Course Recap
Resolve the captcha to access the links!