( 0 Review )

Featured

Shopify Theme Development: Online Store 2.0 + TailwindCSS

$49.99

( 0 Review )

Course Level

Intermediate

Total Hour

12h 19m 55s

Video Tutorials

66

$49.99

Course content

66 Lessons12h 19m 55s

Introduction

Welcome To The Course!
1:10

What is Online Store 2.0?
3:59

Setting up your partners account

Installing Local Development Tools

Getting Started

Creating a Responsive Navigational Bar

JSON Templates

Customer

Description

This course is last updated on December 02, 2021

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

December 02, 2021

Added/Updated lessons in Customer chapter

November 23, 2021

Created chapters to lesson and added a new lesson in Customer chapter
Added/Updated lessons in Navigational bar chapter

November 15, 2021

Added/Updated lessons in Customer chapter

November 02, 2021

Created Customer chapter
Added/Updated lessons
Update course description

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

12h 19m 55s

66

Login

Login

Course content

Introduction

Welcome To The Course!1:10

What is Online Store 2.0?3:59

Setting up your partners account

Creating a Shopify Partners Account2:51

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

Creating a Responsive Navigational Bar

The Navigational Bar23:49

The Dropdown Menus13:21

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 Schema13:21

[404]: Designing The 404 Page23:49

[Article]: Creating Blog Posts13:21

[Article]: JSON Templates4:39

[Article]: Settings Schema19:08

[Article]: Designing The Article Page18:13

[Article]: Comments Section5:43

[Article]: Search Engine Optimization (SEO) #17:25

[Article]: Search Engine Optimization (SEO) #213:21

[Blog]: JSON Template00:12:56

[Blog]: Setting Schema00:3:25

[Blog]: Designing The Blog Page00:9:31

[Blog]: Paginations00:17:21

[Cart]: JSON Template00:3:06

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

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

[Cart]: Schema Blocks00:9:07

[Collection]: JSON Template00:9:40

[Collection] – Designing The Collection Page00:9:00

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

[Collection]: Creating Schema Settings00:3:06

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

[Index] – Liquid To JSON Template00:3: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 Page00:2:52

[Product] – JSON Template00:4:09

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

[Product] – Rendering The Product Medias00:13:16

[Product] – Creating Product Media Carousels00:14:10

[Product] – Creating The Product Form24:26

Let’s Fix Our Code00:6:09

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

[Product] – The JavaScript Side of Product Template00:22:55

[Search] – Creating The Search Bar00:11:17

[Search] – Rendering Products in Search Results00:13:03

Customer

[Customer] – Login Page00:22:22

[Customer] – Registration Page00:12:50

[Customer] – Testing Forgot Your Password Form00:01:17

[Customer] – Reset Password Form00:11:43

[Customer] – Guest Login00:06:55

Select Your Favourite
Category And Start Learning.

Welcome To The Course!
1:10

What is Online Store 2.0?
3:59

Creating a Shopify Partners Account
2:51

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

The Navigational Bar
23:49

The Dropdown Menus
13:21

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
13:21

[404]: Designing The 404 Page
23:49

[Article]: Creating Blog Posts
13:21

[Article]: JSON Templates
4:39

[Article]: Settings Schema
19:08

[Article]: Designing The Article Page
18:13

[Article]: Comments Section
5:43

[Article]: Search Engine Optimization (SEO) #1
7:25

[Article]: Search Engine Optimization (SEO) #2
13:21

[Blog]: JSON Template
00:12:56

[Blog]: Setting Schema
00:3:25

[Blog]: Designing The Blog Page
00:9:31

[Blog]: Paginations
00:17:21

[Cart]: JSON Template
00:3:06

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

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

[Cart]: Schema Blocks
00:9:07

[Collection]: JSON Template
00:9:40

[Collection] – Designing The Collection Page
00:9:00

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

[Collection]: Creating Schema Settings
00:3:06

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

[Index] – Liquid To JSON Template
00: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
00:2:52

[Product] – JSON Template
00:4:09

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

[Product] – Rendering The Product Medias
00:13:16

[Product] – Creating Product Media Carousels
00:14:10

[Product] – Creating The Product Form
24:26

Let’s Fix Our Code
00:6:09

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

[Product] – The JavaScript Side of Product Template
00:22:55

[Search] – Creating The Search Bar
00:11:17

[Search] – Rendering Products in Search Results
00:13:03

[Customer] – Login Page
00:22:22

[Customer] – Registration Page
00:12:50

[Customer] – Testing Forgot Your Password Form
00:01:17

[Customer] – Reset Password Form
00:11:43

[Customer] – Guest Login
00:06:55

[Customer] – Account Page
00:28:52

[Customer] – Order Page #1
00:28:51

[Customer] – Order Page #2
00:09:51

[Customer] – Order Page #3
00:18:13

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

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