WeeklyHowMy courses

Courses / Course

Shopify Theme Development: Shopify CLI 3.0 + Online Store 2.0 + TailwindCSS

Shopify just recently updated their Shopify online experience which they call “Online Store 2.0”. With this update, Shopify…

★★★★★ 4.8 (4 reviews)93 lessonsIntermediate level16h 50m of video

What you'll 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

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:

  1. How to set up your development store using Shopify CLI 3.x 🆕
  2. Using TailwindCSS to design a Shopify theme
    • Create navigational bar
    • Create collection page
    • Create product page
    • Create 3D model viewer
    • Create customer page
    • Create cart page
    • and more!
  3. Online Store 2.0 (JSON Templates)
  4. Shopify CLI
  5. Shopify GitHub Integration
  6. Project management
  7. Schema Settings
  8. Search Engine Optimization (SEO) for pages like articles, products, etc.
  9. Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)
  10. Customer Templates

If you think you’re ready to start, signup now, and let’s create the best Shopify theme together!

Changelog

November 23, 2025

  • Updated/added new lesson(s)

October 09, 2025

  • Updated/added new lesson(s)
  • Updated course title and description

November 24, 2024

  • Updated/added new lesson(s)
  • Updated course title and description

November 17, 2024

  • Updated/added new lesson(s)
  • Updated course description

February 24, 2022

  • Updated/added new lesson(s)
  • Updated course description

February 19, 2022

  • Updated/added new lesson(s)
  • Removed deprecated lesson(s)
  • Edited course description
  • Added new resource(s)
  • Updated metadatas

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

Who this course is for

  • 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

Course content

10 sections · 93 lessons

Introduction3 items⌄
  • Welcome To The Course!
  • What is Online Store 2.0?
  • What is Shopify Liquid?
Setting up your partners account2 items⌄
  • Creating a Shopify Partners Account
  • Creating Shopify Development Stores
Installing Local Development Tools5 items⌄
  • Resources to enjoy the course
  • Installing Visual Studio Code
  • Installing NodeJS
  • Installing Shopify CLI on Windows
  • Installing Shopify CLI on MacOS
Getting Started5 items⌄
  • 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 Bar5 items⌄
  • The Navigational Bar (Creating the menu links)
  • The Dropdown Menus (Creating childlinks)
  • The Mobile Menu (Creating the navigation for mobile devices)
  • Learning how to customize the header with Section Schema
  • How to show/hide customer login & register links
Theme Project Management2 items⌄
  • How to push Shopify Themes to your development stores
  • Getting started with Shopify GitHub intergration
JSON Templates41 items⌄
  • [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
Customer16 items⌄
  • [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 (Edit Addresses Modal)
  • [Customer] - Addresses Page (Set as default address)
  • [Customer] - Addresses Page (Deleting addresses)
  • [Customer] - Activate Account Page
Shopify CLI, Theme Check, AlpinJS & TailwindCSS7 items⌄
  • Fixing AlpineJS Blipping Issues
  • Fixing Shopify CLI Errors
  • Shopify Theme Check
  • Updating Shopify CLI
  • Upgrading to TailwindCSS v3
  • Fixing SwiperJS error and the media size
  • How To Fix Theme Cannot Be Previewed Error
3D Models7 items⌄
  • Using 3D models in Shopify
  • What even is this Model Viewer
  • Setting up the product model component
  • Setting up the product model modal window
  • Creating the 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

Student reviews

★★★★★ 4.8 from 4 reviews

  1. PixelPioneer

    ★★★★★

    Ok, first off, I bbought this course along with the Liquid programming course Bernard has and I would say that before taking this BIG course, you should definitely take the liquid course first because some of the objects or tags in this theme development won't be explained thoroughly. As a software eng. myself, it was much easier for me to grasp what bernard was saying so if you're new to programming, learn liquid first. Overall, I like the course :D

  2. webdevrhere

    ★★★★★

    Such a helpful course. The course covers a wide range of topics related to Shopify theme development which I really like compared to other courses. The only thing I don't like is the fact that the lessons are a bit unorganized but it is still followable. I talked to Bernard about this and he promised to update it and I think he's doing it. I'll write another review once I finish the course. :)

  3. writhewrote

    ★★★★★

    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!

  4. shirajesh

    ★★★★★

    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!