Shopify Theme Development: Online Store 2.0 + Tailwindcss
Last updated 8/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 9.49 GB | Duration: 16h 18m
Last updated 8/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 9.49 GB | Duration: 16h 18m
Learn how to create Shopify themes for Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS
What you'll learn
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!
Requirements
You must know HTML, CSS, & JavaScript
You must know how to use Node or npm
You must know your way around Shopify
Description
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 storeUsing TailwindCSS to design a Shopify themeOnline Store 2.0 (JSON Templates)Shopify CLISchema SettingsSearch Engine Optimization (SEO) for pages like articles, products, etc.Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)Customer pagesFrequently Asked QuestionsQ: Is this course beginner-friendly?A: If you're new to Shopify theme development, YES. However, if you're entirely new to Web Development, then this course is NOT for you since I won't be explaining how HTML works, how CSS utilities works, what is JavaScript, etc. If you're entirely new to web development, I suggest learning it first before taking this course.Q: What operating system are we required to use?A: I have used MacOS in this course, so if you want to use a different OS, you can do that. However, make sure that you know your way around your system since yours is going to be different from mine (e.g. Terminal/Powershell/Shell)If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!
Overview
Section 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?
Section 2: Setting up your partners account
Lecture 5 Creating Shopify Partners Account
Lecture 6 Creating Development Stores
Section 3: Installing Local Development Tools For Shopify CLI
Lecture 7 Read before you continue!
Lecture 8 Installing VSCode in MacOS
Lecture 9 Installing NodeJS
Lecture 10 Installing Shopify CLI on Windows
Lecture 11 Installing Shopify CLI on MacOS
Section 4: Getting Started
Lecture 12 Creating The Shopify Theme Project using Shopify CLI
Lecture 13 Logging in to your development stores with Shopify CLI
Lecture 14 Installing TailwindCSS to Shopify theme projects
Lecture 15 Fixing Shopify CLI errors with .shopifyignore
Section 5: Creating The Responsive Navigational Bar
Lecture 16 The Navigational Bar (Creating the menu links)
Lecture 17 The Dropdown Menus (Creating sublinks)
Lecture 18 The Mobile Menu (Creating mobile menu window)
Lecture 19 Learning how to customize the header with Section Schema
Lecture 20 How to hide/show customer login & register links
Section 6: Shopify Theme Project Management
Lecture 21 Using GitHub integration with Shopify
Section 7: JSON Templates
Lecture 22 READ! THIS IS ABOUT THE FOLLOWING LESSONS!
Lecture 23 [404]: Learning about JSON Templates
Lecture 24 [404]: Settings Schema
Lecture 25 [404]: Designing The 404 Page
Lecture 26 [Article]: Creating Blog Posts
Lecture 27 [Article]: Liquid To JSON Template
Lecture 28 [Article]: Settings Schema
Lecture 29 [Article]: Designing The Article Page
Lecture 30 [Article]: Comments Section
Lecture 31 [Article]: Search Engine Optimization (SEO) #1
Lecture 32 [Article]: Search Engine Optimization (SEO) #2
Lecture 33 [Blog]: Liquid To JSON Template
Lecture 34 [Blog]: Setting Schema
Lecture 35 [Blog]: Designing The Blog Page
Lecture 36 [Blog]: Paginations
Lecture 37 [Cart]: Liquid To JSON Template
Lecture 38 [Cart]: Making a Working Cart Page
Lecture 39 [Cart]: Making a Test Order for Development Stores
Lecture 40 [Cart]: Schema Blocks
Lecture 41 [Collection]: Liquid To JSON Template
Lecture 42 [Collection] - Designing The Collection Page
Lecture 43 [Collection] - Creating The Product Card Snippet File
Lecture 44 [Collection] - Creating Schema Settings
Lecture 45 [Collection] - Creating That Zoom Effect on Hover
Lecture 46 [Index] - Liquid To JSON Template
Lecture 47 [Index] - Featured Collection
Lecture 48
- - Creating a Working List Collections Page
Lecture 49 [Page] - Liquid To JSON Template
Lecture 50 [Page] - Rendering The Page Content
Lecture 51 [Page] - Designing The Page
Lecture 52 [Custom Section] - Contact Form
Lecture 53 [Page] - Contact Page
Lecture 54 [Product] - Liquid To JSON Template
Lecture 55 [Product] - Creating The Necessary Products For Testing
Lecture 56 [Product] - Rendering The Product Medias
Lecture 57 [Product] - Creating Product Media Carousels
Lecture 58 [Product] - Creating The Product Form
Lecture 59 Let's Fix Our Code
Lecture 60 [Product] - Creating Schema Blocks for the Product Form
Lecture 61 [Product] - The JavaScript Side of Product Template
Lecture 62 [Search] - Creating The Search Bar
Lecture 63 [Search] - Rendering Products in Search Results
Section 8: Customers
Lecture 64 [Customer] - Login Page
Lecture 65 [Customer] - Registration Page
Lecture 66 [Customer] - Testing Forgot Your Password Form
Lecture 67 [Customer] - Reset Password Form
Lecture 68 [Customer] - Guest Login
Lecture 69 [Customer] - Account Page
Lecture 70 [Customer] - Order Page #1
Lecture 71 [Customer] - Order Page #2
Lecture 72 [Customer] - Order Page #3
Lecture 73 [Customer] - Addresses Page (Creating the interface)
Lecture 74 [Customer] - Addresses Page (Creating The New Address Modal)
Lecture 75 [Customer] - Addresses Page (JavaScript Side of Customer Address Form)
Lecture 76 [Customer] - Addresses Page (Creating The Edit Address Modal)
Lecture 77 [Customer] - Addresses Page (Set as default address)
Lecture 78 [Customer] - Addresses Page (Deleting addresses)
Lecture 79 [Customer] - Activate Account Page
Section 9: Shopify CLI, Theme Check, AlpineJS
Lecture 80 Fixing AlpineJS Blipping Issue
Lecture 81 Fixing Shopify CLI Errors
Lecture 82 Using Theme Check
Lecture 83 Fixing SwiperJS error and the media size
Section 10: Learning about 3D Models in Shopify themes
Lecture 84 Using 3D Models in Shopify
Lecture 85 What is Model Viewer?
Lecture 86 Setting up the product model custom element
Lecture 87 Setting up the product model modal window
Lecture 88 Creating JavaScript of custom element
Lecture 89 Writing the CSS style of the Model Viewer to maximize its size
Lecture 90 Using the Model Viewer UI Feature of Shopify
Beginner to Intermediate "Shopify developers" NOT web developers,Students who wants to learn how to create Shopify themes using Shopify CLI,Shopify merchants who wants to learn about Shopify themes,Web Developers who wants to learn about Shopify theme architecture