Shopify Theme Development: Online Store 2.0 + TailwindCSS

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Before We Get Started

Lecture 3: What is Online Store 2.0?

Lecture 4: What is Shopify Liquid?

Chapter 2: Setting up your partners account

Lecture 1: Creating Shopify Partners Account

Lecture 2: Creating Development Stores

Chapter 3: Installing Local Development Tools For Shopify CLI

Lecture 1: Read before you continue!

Lecture 2: Installing VSCode in MacOS

Lecture 3: Installing NodeJS

Lecture 4: Installing Shopify CLI on Windows

Lecture 5: Installing Shopify CLI on MacOS

Chapter 4: Getting Started

Lecture 1: Creating The Shopify Theme Project using Shopify CLI

Lecture 2: Logging in to your development stores with Shopify CLI

Lecture 3: Installing TailwindCSS to Shopify theme projects

Lecture 4: Fixing Shopify CLI errors with .shopifyignore

Chapter 5: Creating The Responsive Navigational Bar

Lecture 1: The Navigational Bar (Creating the menu links)

Lecture 2: The Dropdown Menus (Creating sublinks)

Lecture 3: The Mobile Menu (Creating mobile menu window)

Lecture 4: Learning how to customize the header with Section Schema

Lecture 5: How to hide/show customer login & register links

Chapter 6: Shopify Theme Project Management

Lecture 1: Using GitHub integration with Shopify

Chapter 7: JSON Templates

Lecture 1: READ! THIS IS ABOUT THE FOLLOWING LESSONS!

Lecture 2: [404]: Learning about JSON Templates

Lecture 3: [404]: Settings Schema

Lecture 4: [404]: Designing The 404 Page

Lecture 5: [Article]: Creating Blog Posts

Lecture 6: [Article]: Liquid To JSON Template

Lecture 7: [Article]: Settings Schema

Lecture 8: [Article]: Designing The Article Page

Lecture 9: [Article]: Comments Section

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

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

Lecture 12: [Blog]: Liquid To JSON Template

Lecture 13: [Blog]: Setting Schema

Lecture 14: [Blog]: Designing The Blog Page

Lecture 15: [Blog]: Paginations

Lecture 16: [Cart]: Liquid To JSON Template

Lecture 17: [Cart]: Making a Working Cart Page

Lecture 18: [Cart]: Making a Test Order for Development Stores

Lecture 19: [Cart]: Schema Blocks

Lecture 20: [Collection]: Liquid To JSON Template

Lecture 21: [Collection] – Designing The Collection Page

Lecture 22: [Collection] – Creating The Product Card Snippet File

Lecture 23: [Collection] – Creating Schema Settings

Lecture 24: [Collection] – Creating That Zoom Effect on Hover

Lecture 25: [Index] – Liquid To JSON Template

Lecture 26: [Index] – Featured Collection

Lecture 27: [List Collections] – Creating a Working List Collections Page

Lecture 28: [Page] – Liquid To JSON Template

Lecture 29: [Page] – Rendering The Page Content

Lecture 30: [Page] – Designing The Page

Lecture 31: [Custom Section] – Contact Form

Lecture 32: [Page] – Contact Page

Lecture 33: [Product] – Liquid To JSON Template

Lecture 34: [Product] – Creating The Necessary Products For Testing

Lecture 35: [Product] – Rendering The Product Medias

Lecture 36: [Product] – Creating Product Media Carousels

Lecture 37: [Product] – Creating The Product Form

Lecture 38: Let's Fix Our Code

Lecture 39: [Product] – Creating Schema Blocks for the Product Form

Lecture 40: [Product] – The JavaScript Side of Product Template

Lecture 41: [Search] – Creating The Search Bar

Lecture 42: [Search] – Rendering Products in Search Results

Chapter 8: Customers

Lecture 1: [Customer] – Login Page

Lecture 2: [Customer] – Registration Page

Lecture 3: [Customer] – Testing Forgot Your Password Form

Lecture 4: [Customer] – Reset Password Form

Lecture 5: [Customer] – Guest Login

Lecture 6: [Customer] – Account Page

Lecture 7: [Customer] – Order Page #1

Lecture 8: [Customer] – Order Page #2

Lecture 9: [Customer] – Order Page #3

Lecture 10: [Customer] – Addresses Page (Creating the interface)

Lecture 11: [Customer] – Addresses Page (Creating The New Address Modal)

Lecture 12: [Customer] – Addresses Page (JavaScript Side of Customer Address Form)

Lecture 13: [Customer] – Addresses Page (Creating The Edit Address Modal)

Lecture 14: [Customer] – Addresses Page (Set as default address)

Lecture 15: [Customer] – Addresses Page (Deleting addresses)

Lecture 16: [Customer] – Activate Account Page

Chapter 9: Shopify CLI, Theme Check, AlpineJS

Lecture 1: Fixing AlpineJS Blipping Issue

Lecture 2: Fixing Shopify CLI Errors

Lecture 3: Using Theme Check

Lecture 4: Fixing SwiperJS error and the media size

Chapter 10: Learning about 3D Models in Shopify themes

Lecture 1: Using 3D Models in Shopify

Lecture 2: What is Model Viewer?

Lecture 3: Setting up the product model custom element

Lecture 4: Setting up the product model modal window

Lecture 5: Creating JavaScript of <product-model> custom element

Lecture 6: Writing the CSS style of the Model Viewer to maximize its size

Lecture 7: Using the Model Viewer UI Feature of Shopify