SuperHi FM

Search:

Catalog Cart About Sign in

ADVANCEDCOURSE

Shopify 1.0 Theme Development

Build completely custom e-commerce websites using HTML, CSS & Sass, Javascript and Shopify's templating language Liquid.

Joseph Bergdoll

Taught by

Joseph Bergdoll

Fitra

Fitra

Lesson 01

Welcome and Week Overview

Lesson 02

Why Shopify?

Lesson 03

Setting Up First Store

Wellby

Wellby

Lesson 01

Intro + Week Overview

Lesson 02

Exploring our Designs

Lesson 03

Importing Products from a CSV File

InHouse – Part 1

InHouse – Part 1

Lesson 01

Intro + Week Overview

Lesson 02

Exploring our Designs

Lesson 03

Setting up the new store with imported data

InHouse – Part 2

InHouse – Part 2

Lesson 01

Recap + Week Intro

Lesson 02

Setting up the Line Item Quantity Picker

Lesson 03

Updating the quantity via the Ajax API

Get access to Shopify Theme Development

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Joseph Bergdoll

Joseph Bergdoll

Teacher

With support from...

Rik Lomas

Rik Lomas

Founder + CEO

Course structure

Chapter 01

Fitra

Lesson 01
Welcome and Week Overview
Lesson 02
Why Shopify?
Lesson 03
Setting Up First Store
Lesson 04
Creating our first theme
Lesson 05
Exploring our Design and Technical Blueprint
Lesson 06
Setting up our first product
Lesson 07
Beginning Development
Lesson 08
Getting Product Data
Lesson 09
Outputting Product Data and hooking up the Cart Form
Lesson 10
Marking up Index.liquid
Lesson 11
Matching the Add to Cart form to our Designs
Lesson 12
Using Locales and Translations for static text
Lesson 13
Marking up the Cart Button
Lesson 14
Exploring the Cart
Lesson 15
Marking Up The Cart Page
Lesson 16
Marking up the Empty Cart state
Lesson 17
Introduction to Stylesheets
Lesson 18
Saving Sass Variables and Base Styles
Lesson 19
Basic Homepage Styling
Lesson 20
Homepage Grid Layouts
Lesson 21
Styling the Image Area
Lesson 22
Styling the Info Area
Lesson 23
Tightening up the homepage
Lesson 24
Styling the Cart Icon
Lesson 25
Styling the Empty Cart
Lesson 26
Styling the Filled Cart
Lesson 27
Changing the Product Image with JavaScript
Lesson 28
Creating the 404 page and pointing unstyled templates to it
Lesson 29
Adding Webfonts
Lesson 30
Responsive Design Homework
Lesson 31
Week 1 + Project Summary

Chapter 02

Wellby

Lesson 01
Intro + Week Overview
Lesson 02
Exploring our Designs
Lesson 03
Importing Products from a CSV File
Lesson 04
Setting up static assets and dynamic content
Lesson 05
Introducing Link Lists
Lesson 06
Marking up Theme.liquid
Lesson 07
Setting up the Homepage Collection
Lesson 08
Marking up Index.liquid
Lesson 09
Marking up Product-Card.liquid
Lesson 10
Marking up Product.liquid
Lesson 11
Switching from a Dropdown Select to Radio Buttons
Lesson 12
Adding the Quantity Component
Lesson 13
Making the Quantity Component Functional
Lesson 14
Hooking into the Quantity Change Event
Lesson 15
Dynamically Adjusting and Validating the Add to Cart Form
Lesson 16
Cleaning up the JavaScript
Lesson 17
Finishing the Add to Cart form Markup
Lesson 18
Marking up the Cart + Line Item
Lesson 19
Beginning styles for theme, header + footer
Lesson 20
Styling Index + Product Card
Lesson 21
Styling the Product Page + Add to Cart Form
Lesson 22
Styling the Cart Page + Line Items
Lesson 23
Introducing the Ajax API
Lesson 24
Preparing the Mini Cart and Cart Contents
Lesson 25
Adding products using the Ajax API
Lesson 26
Making the Mini Cart Functional with Ajax
Lesson 27
Styling the Mini Cart
Lesson 28
Opening and Closing the Mini Cart
Lesson 29
Marking up and Styling the Page.liquid + 404.liquid
Lesson 30
QAing the Site
Lesson 31
Web fonts + Responsive
Lesson 32
Week + Project Summary

Chapter 03

InHouse – Part 1

Lesson 01
Intro + Week Overview
Lesson 02
Exploring our Designs
Lesson 03
Setting up the new store with imported data
Lesson 04
Marking up the Header and Footer
Lesson 05
Introducing Theme Settings
Lesson 06
Introducing Currency Switching
Lesson 07
Setting up the store for multiple currencies
Lesson 08
Adding Shopify's currency settings to Settings_Schema
Lesson 09
Adding Shopify's Currencies Liquid snippet
Lesson 10
Creating and including the Currency Switch
Lesson 11
Refactoring the Currency Picker
Lesson 12
Debugging & Adding a Currency Blurb to the cart page
Lesson 13
Introduction to Theme Sections
Lesson 14
Evaluating the sections in Index
Lesson 15
Creating the Schema for the Slideshow Section
Lesson 16
Marking up the Index Slideshow Section
Lesson 17
Creating the Schema for the Content sections
Lesson 18
Marking up the Content Sections
Lesson 19
Introducing Complex Product Options
Lesson 20
Setting up the Add to Cart Form
Lesson 21
Using Liquid to create a JSON object of variant data
Lesson 22
Separating Product Options
Lesson 23
Validating or Invalidating the Add to Cart Form
Lesson 24
Adjusting the price based on Selected Variant
Lesson 25
Assigning and Retrieving the selected variant from the URL
Lesson 26
Hooking up the form to the Ajax API
Lesson 27
Creating the Mini Cart and Line Item Snippets
Lesson 28
Hooking up the mini cart to the Ajax API
Lesson 29
Week Summary + Homework

Chapter 04

InHouse – Part 2

Lesson 01
Recap + Week Intro
Lesson 02
Setting up the Line Item Quantity Picker
Lesson 03
Updating the quantity via the Ajax API
Lesson 04
Creating the Search Form component
Lesson 05
Getting Search Results
Lesson 06
Marking up the Search, Results, and 404 Page
Lesson 07
Marking up the Collection Page + Product Card
Lesson 08
Marking up the Line Item + Cart Contents
Lesson 09
Marking up the Product Page
Lesson 10
Getting dynamic color swatches
Lesson 11
Extending the Product Description using Liquid
Lesson 12
Inlining SVGs
Lesson 13
Introduction to Modular Stylesheets
Lesson 14
Setting up PrePros + Architecting Stylesheets
Lesson 15
Global Stylesheets + Live Reloading
Lesson 16
Base variables, styles, and mixins
Lesson 17
Header + Styleguide
Lesson 18
Footer Styles
Lesson 19
Styling the Collection Page + Product Card
Lesson 20
Styling the Product Page
Lesson 21
Styling the Collection List + Product More snippets
Lesson 22
Styling the cart, contents + mini cart
Lesson 23
Styling the Search, results, + 404 page
Lesson 24
Styling the Index Sections
Lesson 25
Hooking up Slideshows
Lesson 26
Putting it all together + Homework
Lesson 27
Self-Hosting Webfonts
Lesson 28
Customizing the Checkout
Lesson 29
Placing a test order
Lesson 30
Week Review + Course Recap

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

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

Requirements

A computer (Windows, Mac or Linux) with the latest version of Chrome installed and a broadband internet connection. You'll be good to go!

Target Audience

Anyone who is looking to build e-commerce platforms for themselves, friends, clients or for their job using the amazing Shopify platform. You can be new to Shopify but we would recommend some knowledge of HTML, CSS and Javascript before starting this course since it is advanced level. Taking our Foundation HTML, CSS + JS course and Javascript for Designers course will be sufficient.

In the first week of the course, we’ll talk about how to make Fitra, a store that sells just one single product, a smart watch.

In week 2, we’ll go from a single product store to a site that can handle a collection of products.

We'll start week 3 by talking about InHouse, a full e-commerce platform that includes multiple products and multiple options for each product, such as color, finish and upholstery, so that your customers have full control over the products they buy!

In the final week, we'll continue with InHouse. We’ll add in the ability to do currency switching, color swatch selection and everything else you’ll need to make a high-performing e-commerce store.

Joseph is the designer + developer behind [Extended Play](https://www.extendedplay.nyc/) — a New York City graphic design studio for culture and commerce. When he’s not designing and building interactive projects, he’s likely surrounded by cats, watching basketball or soccer, making pasta.