IIRF Online > Business > eCommerce > Shopify > Shopify Theme Development: Online Store 2.0 + TailwindCSS
Shopify Theme Development: Online Store 2.0 + TailwindCSS by Udemy
Learn how to create Shopify themes for Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS
Course Highlights
- Learn about the new Online Store 2.0 and the new theme architecture of Shopify
- Shopify Theme Development
- Liquid Programming (Tags, Objects, & Filters)
- How to use TailwindCSS in Shopify Theme Development
- Create Shopify themes using Shopify CLI
- Create an advanced product page w/ product carousels on mobile, variant selectors, and more!
Curriculum
4 Topics
Introduction
Before We Get Started
What is Online Store 2.0?
What is Shopify Liquid?
2 Topics
Creating Shopify Partners Account
Creating Development Stores
5 Topics
Read before you continue!
Installing VSCode in MacOS
Installing NodeJS
Installing Shopify CLI on Windows
Installing Shopify CLI on MacOS
4 Topics
Creating The Shopify Theme Project using Shopify CLI
Logging in to your development stores with Shopify CLI
Installing TailwindCSS to Shopify theme projects
Fixing Shopify CLI errors with .shopifyignore
5 Topics
The Navigational Bar (Creating the menu links)
The Dropdown Menus (Creating sublinks)
The Mobile Menu (Creating mobile menu window)
Learning how to customize the header with Section Schema
How to hide/show customer login & register links
1 Topic
Using GitHub integration with Shopify
42 Topics
READ! THIS IS ABOUT THE FOLLOWING LESSONS!
[404]: Learning about JSON Templates
[404]: Settings Schema
[404]: Designing The 404 Page
[Article]: Creating Blog Posts
[Article]: Liquid To JSON Template
[Article]: Settings Schema
[Article]: Designing The Article Page
[Article]: Comments Section
[Article]: Search Engine Optimization (SEO) #1
[Article]: Search Engine Optimization (SEO) #2
[Blog]: Liquid To JSON Template
[Blog]: Setting Schema
[Blog]: Designing The Blog Page
[Blog]: Paginations
[Cart]: Liquid To JSON Template
[Cart]: Making a Working Cart Page
[Cart]: Making a Test Order for Development Stores
[Cart]: Schema Blocks
[Collection]: Liquid To 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] - Liquid To JSON Template
[Page] - Rendering The Page Content
[Page] - Designing The Page
[Custom Section] - Contact Form
[Page] - Contact Page
[Product] - Liquid To 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
16 Topics
[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)
[Customer] - Addresses Page (Creating The New Address Modal)
[Customer] - Addresses Page (JavaScript Side of Customer Address Form)
[Customer] - Addresses Page (Creating The Edit Address Modal)
[Customer] - Addresses Page (Set as default address)
[Customer] - Addresses Page (Deleting addresses)
[Customer] - Activate Account Page
4 Topics
Fixing AlpineJS Blipping Issue
Fixing Shopify CLI Errors
Using Theme Check
Fixing SwiperJS error and the media size
7 Topics
Using 3D Models in Shopify
What is Model Viewer?
Setting up the product model custom element
Setting up the product model modal window
Creating JavaScript of <product-model> custom element
Writing the CSS style of the Model Viewer to maximize its size
Using the Model Viewer UI Feature of Shopify
Shopify Theme Development: Online Store 2.0 + TailwindCSS
Related Shopify Courses
Thank You!
Your review has been submitted successfully.