Shopify Theme Development: Online Store 2.0 + TailwindCSS

About Course

Shopify just recently updated their Shopify online experience which they call “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 Shopify CLI 3.0
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

January 25, 2022

Updated/created new lesson(s)
Removed deprecated lesson(s)
Added new resource(s)

December 03, 2022

Updated/created new lesson(s) for Shopify CLI 3.0
Updated course description

Course Content

Introduction

Welcome To The Course!
01:10
What is Online Store 2.0?
03:59
What is Shopify Liquid?
08:43

Setting up your partners account

Installing Local Development Tools

Getting Started

Creating a Responsive Navigational Bar

JSON Templates

[404]: Learning about JSON Templates
12:52
[404]: Settings Schema
02:54
[404]: Designing The 404 Page
07:25
[Article]: Creating Blog Posts
04:39
[Article]: JSON Templates
06:43
[Article]: Settings Schema
19:08
[Article]: Designing The Article Page
14:34
[Article]: Comments Section
37:31
[Article]: Search Engine Optimization (SEO) #1
11:24
[Article]: Search Engine Optimization (SEO) #2
14:07
[Blog]: JSON Template
12:56
[Blog]: Setting Schema
03:25
[Blog]: Designing The Blog Page
09:31
[Blog]: Paginations
17:21
[Cart]: JSON Template
03:06
[Cart]: Making a Working Cart Page
30:40
[Cart]: Making a Test Order for Development Stores
04:32
[Cart]: Schema Blocks
09:07
[Collection]: JSON Template
09:40
[Collection] – Designing The Collection Page
09:00
[Collection]: Creating The Product Card Snippet File
05:19
[Collection]: Creating Schema Settings
03:06
[Collection]: Creating That Zoom Effect on Hover
02:39
[Index] – Liquid To JSON Template
03:25
[Index] – Featured Collection
17:34
[List Collections] – Creating a Working List Collections Page
17:18
[Page] – JSON Template
05:26
[Page] – Rendering The Page Content
01:51
[Page] – Designing The Page
02:18
[Custom Section] – Contact Form
21:51
[Page] – Contact Page
02:51
[Product] – JSON Template
04:09
[Product] – Creating The Necessary Products For Testing
08: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
06: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

Shopify CLI, Theme Check, AlpinJS & TailwindCSS
This chapter is for the technical issue(s) of Shopify Theme Development. Errors and solutions related to making Shopify themes will be found here.

3D Models

Student Ratings & Reviews

5.0

Total 2 Ratings

2 Ratings

0 Rating

writhewrote

6 days ago

Just starting this course. I have also purdchased his course at udemy and I noticed there is a bunch of differences between them. I appreciate that. That means if you pruchase the course here, you still get something. I also appreciate the updates he do in his courses. Thanks bernard, looking forward for more!

shirajesh

3 months ago

Amazing course! I'm completly new to shopify development and this course taught me the basics of liquid and shopify themes sctructures. Cannot wait for more of your lessons Bernard! Thank you!

About Course

What Will You Learn?

Course Content

Introduction

Welcome To The Course!

What is Online Store 2.0?

What is Shopify Liquid?

Setting up your partners account

Creating a Shopify Partners Account

Creating Shopify Development Stores

Installing Local Development Tools

Resources to enjoy the course

Installing Visual Studio Code

Installing NodeJS

Installing Shopify CLI on Windows

Installing Shopify CLI on MacOS

Getting Started

Creating The Shopify Theme with Shopify CLI

Signing in to a development store using Shopify CLI

VSCode Extensions to make your development faster

Installing TailwindCSS to Shopify theme projects

Fixing Shopify CLI errors with .shopifyignore

Creating a Responsive Navigational Bar

The Navigational Bar (Creating the menu links)

The Dropdown Menus (Creating childlinks)

The Mobile Menu (Creating the navigation for mobile devices)

Fixing Missing Menus in 404 Page

JSON Templates

[404]: Learning about JSON Templates

[404]: Settings Schema

[404]: Designing The 404 Page

[Article]: Creating Blog Posts

[Article]: JSON Templates

[Article]: Settings Schema

[Article]: Designing The Article Page

[Article]: Comments Section

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

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

[Blog]: JSON Template

[Blog]: Setting Schema

[Blog]: Designing The Blog Page

[Blog]: Paginations

[Cart]: JSON Template

[Cart]: Making a Working Cart Page

[Cart]: Making a Test Order for Development Stores

[Cart]: Schema Blocks

[Collection]: JSON Template

[Collection] – Designing The Collection Page

[Collection]: Creating The Product Card Snippet File

[Collection]: Creating Schema Settings

[Collection]: Creating That Zoom Effect on Hover

[Index] – Liquid To JSON Template

[Index] – Featured Collection

[List Collections] – Creating a Working List Collections Page

[Page] – JSON Template

[Page] – Rendering The Page Content

[Page] – Designing The Page

[Custom Section] – Contact Form

[Page] – Contact Page

[Product] – JSON Template

[Product] – Creating The Necessary Products For Testing

[Product] – Rendering The Product Medias

[Product] – Creating Product Media Carousels

[Product] – Creating The Product Form

Let’s Fix Our Code

[Product] – Creating Schema Blocks for the Product Form

[Product] – The JavaScript Side of Product Template

[Search] – Creating The Search Bar

[Search] – Rendering Products in Search Results

Customer

[Customer] – Login Page

[Customer] – Registration Page

[Customer] – Testing Forgot Your Password Form

[Customer] – Reset Password Form

[Customer] – Guest Login

[Customer] – Account Page

[Customer] – Order Page #1

[Customer] – Order Page #2

[Customer] – Order Page #3

[Customer] – Addresses Page (Creating the interface)

Shopify CLI, Theme Check, AlpinJS & TailwindCSS
This chapter is for the technical issue(s) of Shopify Theme Development. Errors and solutions related to making Shopify themes will be found here.