Development
Web Development
Shopify
Build a Shopify Theme From Scratch
4.5 (537 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,124 students enrolled

Build a Shopify Theme From Scratch

Learn how to create themes in Shopify
Bestseller
4.5 (537 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
2,124 students enrolled
Created by Jay Lee
Last updated 3/2018
English
English [Auto]
Preview this course
Build a Shopify Theme From Scratch
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 5 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build a Shopify Theme from scratch
  • Customize existing Shopify theme
Course content
Expand all 30 lectures 03:21:35
+ – Introduction
2 lectures 08:31

Explanation of what this course is going to cover and what it's not going to cover. This is a strictly theme-focused course. We will not be going over how to use Shopify itself, just how to theme it.

Introduction
Preview 05:16

Showing the finished Shopify store.

What We're Building
Preview 03:15
+ – Setup Development Tools
6 lectures 29:27
Setting Up Your Environment
04:03

Download the files provided in this lecture.

fashion-theme.zip: the theme file you'll upload to Shopify
fashion-html-template.zip: contains the HTML/CSS/JS markup that'll we'll be implementing
products_export.csv: upload this file to create the products we'll be using as our data throughout the course

Download Files
03:57
Collection and Navigation
05:17
Products and Theme Setup
05:10
Test Theme Kit to Ensure it Works
Preview 02:35
Add Styling and JavaScript Libraries
08:25
+ – Header and Menu
3 lectures 20:37
Add Header
04:50
Add Menu
04:38
Menu Schema
11:09
+ – Snippets and Templates
4 lectures 29:54
Page Snippet Parameter
06:54
About Page Template
08:43
Contact Page Info
08:28
Contact Form
05:49
+ – Finish Up Homepage
5 lectures 43:18
Homepage Carousel
05:55
Homepage Product Banners
10:46
Homepage Products
11:15
Footer
08:03
Footer Blocks
07:19
+ – Collection and Product Pages
7 lectures 55:46
Collection Page
05:05
Collection Page Accordion
13:46
Product Page
05:48
Variant Dropdowns
09:19
Product Variants
05:06
Cart Page
09:32
Product Description
07:10
+ – Cart and Wrap Up
3 lectures 14:02
Add Cart Button
03:34
Header Links
04:14

Finished files are provided in the downloadable materials of this lecture.

Conclusion
06:14
Requirements
  • Familiarity with the Shopify Admin Dashboard
  • Sublime Text 3
  • Shopify's Theme Kit Development Tool
  • Mac is being used for the course
Description

This course will teach you how to create a theme in Shopify.

We'll take an HTML template that has already been created for us and implement it into a fresh Shopify store. The goal is to teach developers/store owners how to create/customize their themes. Utilize Shopify's framework and start building your own pages.

We'll be using Shopify's Theme Kit to do our development and get it pushed up to your store. After going through this course, you'll be able to understand Shopify's framework and create your own theme.

The beautiful design we'll be using to convert HTML to Shopify is Aviato from Themefisher.

Who this course is for:
  • Frontend Developers who want to learn how to create a Shopify Theme
  • Shopify store owners who want to learn how to customize their theme