( 0 Review )

Featured

Shopify Theme Development: Online Store 2.0 + TailwindCSS

$49.99

( 0 Review )

Course Level

Intermediate

Total Hour

15h 10m 56s

Video Tutorials

82

$49.99

Course content

82 Lessons15h 10m 56s

Introduction

Welcome To The Course!
1:10

What is Online Store 2.0?
3:59

What is Shopify Liquid?
8:43

Setting up your partners account

Installing Local Development Tools

Getting Started

Creating a Responsive Navigational Bar

JSON Templates

Customer

Bonus Lessons

3D Models

Description

This course is last updated on May 15, 2022

Shopify just recently updated their Shopify online experience and now they call it “Online Store 2.0”.

With this update, Shopify merchants can now customize their entire online store using sections & blocks. This opened a lot of doors not just for Shopify app developers but also for Shopify theme developers because now, you can add cool sections and blocks to the most commonly used pages like products page, collections page, blog page, etc.

If you’re a Shopify theme developer and you don’t know yet how to create a Shopify theme for Online Store 2.0, then this is the best time to learn because Shopify is now accepting Shopify themes to be listed on their Shopify Theme Store!

This means you can make money by selling your Shopify themes! So are you interested to learn more?

In this course, we’re going to learn how to create a Shopify theme for Online Store 2.0 using Shopify CLI with the help of TailwindCSS to design a cool online store.

In this course you will learn:

How to set up your development store
Using TailwindCSS to design a Shopify theme
Online Store 2.0 (JSON Templates)
Shopify CLI
Schema Settings
Search Engine Optimization (SEO) for pages like articles, products, etc.
Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
Customer Templates

If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!

Changelog

May 15, 2022

Added/Updated lessons
Added/Updated resources/links

April 29, 2022

Added/Updated lessons in Bonus lessons chapter
Updated resources/links

February 25, 2022

Created a chapter “Bonus lessons”
Added/Updated lessons in Bonus lessons chapter

January 14, 2022

Added/Updated lessons in Customer chapter
Added/Updated lessons in Introduction chapter

January 04, 2022

Updated Getting started chapter
Updated lessons in Customer chapter
Updated resources

What to learn?

Learn about the new Online Store 2.0 and the new theme architecture of Shopify Learn how to use Shopify CLI for theme development Liquid Programming (Tags, Objects, & Filters) Shopify Theme Development How to use TailwindCSS in Shopify Theme Development

Requirements

You must know the basics of HTML, CSS, & JavaScript
You must know how the basics of Node or npm
You must know your way around Shopify even just for a little

Target Audience

Beginner to Intermediate Shopify developers
Students who wants to learn how to create Shopify themes using TailwindCSS
Shopify merchants who wants to learn about liquid programming
Web Developers who want to learn about Shopify theme architecture

Instructor

4.44 /5

Bernard Polidario

7 Courses

Hello! My name is Bernard, a Shopify Developer and I'm the guy you see blabbing nonsense on WeeklyHow's YouTube channel. Currently, I'm working as a full-time Instructor at WeeklyHow though you can also say that I'm a full-time Udemy Instructor.

Write a review

App Development

Web Development

Find your desired course

Select Your Favourite Category And Start Learning.

App Development

Web Development

Shopify Theme Development: Online Store 2.0 + TailwindCSS

Intermediate

15h 10m 56s

82

Login

Login

Course content

Introduction

Welcome To The Course!1:10

What is Online Store 2.0?3:59

What is Shopify Liquid?8:43

Setting up your partners account

Creating a Shopify Partners Account2:52

Creating Shopify Development Stores2:31

Installing Local Development Tools

Installing Visual Studio Code4:09

Installing NodeJS2:37

Installing Shopify CLI2:07

Getting Started

Creating The Shopify Theme with Shopify CLI4:52

Installing TailwindCSS7:29

For Those You Had Problems with TailwindCSS In The Previous Lesson13:54

Creating a Responsive Navigational Bar

The Navigational Bar23:49

The Dropdown Menus7:29

The Problem With Nested Menus5:43

The Mobile Menu18:13

Fixing Missing Menus in 404 Page5:45

JSON Templates

[404]: Learning about JSON Templates12:52

[404]: Settings Schema2:54

[404]: Designing The 404 Page7:25

[Article]: Creating Blog Posts7:25

[Article]: JSON Templates6:43

[Article]: Settings Schema19:08

[Article]: Designing The Article Page14:34

[Article]: Comments Section12:52

[Article]: Search Engine Optimization (SEO) #111:24

[Article]: Search Engine Optimization (SEO) #211:24

[Blog]: JSON Template12:56

[Blog]: Setting Schema3:25

[Blog]: Designing The Blog Page9:31

[Blog]: Paginations17:21

[Cart]: JSON Template3:06

[Cart]: Making a Working Cart Page30:40

[Cart]: Making a Test Order for Development Stores4:32

[Cart]: Schema Blocks9:07

[Collection]: JSON Template9:40

[Collection] – Designing The Collection Page9:00

[Collection]: Creating The Product Card Snippet File5:19

[Collection]: Creating Schema Settings3:06

[Collection]: Creating That Zoom Effect on Hover2:39

[Index] – Liquid To JSON Template3:25

[Index] – Featured Collection17:34

[List Collections] – Creating a Working List Collections Page17:18

[Page] – JSON Template5:26

[Page] – Rendering The Page Content1:51

[Page] – Designing The Page2:18

[Custom Section] – Contact Form21:51

[Page] – Contact Page2:51

[Product] – JSON Template4:09

[Product] – Creating The Necessary Products For Testing8:30

[Product] – Rendering The Product Medias13:15

[Product] – Creating Product Media Carousels14:10

[Product] – Creating The Product Form24:26

Let’s Fix Our Code6:09

[Product] – Creating Schema Blocks for the Product Form14:22

[Product] – The JavaScript Side of Product Template22:54

[Search] – Creating The Search Bar11:17

[Search] – Rendering Products in Search Results13:02

Customer

[Customer] – Login Page22:22

[Customer] – Registration Page12:50

[Customer] – Testing Forgot Your Password Form1:16

Select Your Favourite
Category And Start Learning.

Welcome To The Course!
1:10

What is Online Store 2.0?
3:59

What is Shopify Liquid?
8:43

Creating a Shopify Partners Account
2:52

Creating Shopify Development Stores
2:31

Installing Visual Studio Code
4:09

Installing NodeJS
2:37

Installing Shopify CLI
2:07

Creating The Shopify Theme with Shopify CLI
4:52

Installing TailwindCSS
7:29

For Those You Had Problems with TailwindCSS In The Previous Lesson
13:54

The Navigational Bar
23:49

The Dropdown Menus
7:29

The Problem With Nested Menus
5:43

The Mobile Menu
18:13

Fixing Missing Menus in 404 Page
5:45

[404]: Learning about JSON Templates
12:52

[404]: Settings Schema
2:54

[404]: Designing The 404 Page
7:25

[Article]: Creating Blog Posts
7:25

[Article]: JSON Templates
6:43

[Article]: Settings Schema
19:08

[Article]: Designing The Article Page
14:34

[Article]: Comments Section
12:52

[Article]: Search Engine Optimization (SEO) #1
11:24

[Article]: Search Engine Optimization (SEO) #2
11:24

[Blog]: JSON Template
12:56

[Blog]: Setting Schema
3:25

[Blog]: Designing The Blog Page
9:31

[Blog]: Paginations
17:21

[Cart]: JSON Template
3:06

[Cart]: Making a Working Cart Page
30:40

[Cart]: Making a Test Order for Development Stores
4:32

[Cart]: Schema Blocks
9:07

[Collection]: JSON Template
9:40

[Collection] – Designing The Collection Page
9:00

[Collection]: Creating The Product Card Snippet File
5:19

[Collection]: Creating Schema Settings
3:06

[Collection]: Creating That Zoom Effect on Hover
2:39

[Index] – Liquid To JSON Template
3:25

[Index] – Featured Collection
17:34

[List Collections] – Creating a Working List Collections Page
17:18

[Page] – JSON Template
5:26

[Page] – Rendering The Page Content
1:51

[Page] – Designing The Page
2:18

[Custom Section] – Contact Form
21:51

[Page] – Contact Page
2:51

[Product] – JSON Template
4:09

[Product] – Creating The Necessary Products For Testing
8:30

[Product] – Rendering The Product Medias
13:15

[Product] – Creating Product Media Carousels
14:10

[Product] – Creating The Product Form
24:26

Let’s Fix Our Code
6:09

[Product] – Creating Schema Blocks for the Product Form
14:22

[Product] – The JavaScript Side of Product Template
22:54

[Search] – Creating The Search Bar
11:17

[Search] – Rendering Products in Search Results
13:02

[Customer] – Login Page
22:22

[Customer] – Registration Page
12:50

[Customer] – Testing Forgot Your Password Form
1:16

[Customer] – Reset Password Form
11:42

[Customer] – Guest Login
6:54

[Customer] – Account Page
28:51

[Customer] – Order Page #1
25:19

[Customer] – Order Page #2
9:51

[Customer] – Order Page #3
14:25

[Customer] – Addresses Page (Creating the interface)
14:20

[Customer] – Addresses Page (Creating The New Address Modal)
21:55

[Customer] – Addresses Page (JavaScript Side of Customer Address Form)
30:56

[Customer] – Addresses Page (Edit Addresses Modal)
13:56

[Customer] – Addresses Page (Set as default address)
7:24

[Customer] – Addresses Page (Deleting addresses)
14:25

[Customer] – Activate Account Page
17:31

Fixing AlpineJS Blipping Issues
3:20

Fixing Shopify CLI Errors
2:09

Shopify Theme Check
14:36

Updating Shopify CLI
00:6:03

Upgrading to TailwindCSS v3
10:15

Fixing SwiperJS error and the media size
5:45