Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Shopify Theme Development: Online Store 3.0 + TailwindCSS

Phát triển Giao diện Shopify: Cửa hàng trực tuyến 3.0 + TailwindCSS

Phát triển Giao diện Shopify: Cửa hàng trực tuyến 3.0 + TailwindCSS

Học cách tạo giao diện Shopify cho Cửa hàng trực tuyến 3.0 (Mẫu JSON) bằng Shopify CLI, Liquid và TailwindCSS

4.2
(1,630 đánh giá)
11,057 học viên
Giảng viên
Bernard Polidario
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 359.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
16.0 giờ video
90 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Ecommerce Development #Shopify #Tailwind Css #Web Development

Bạn sẽ học được gì

Tìm hiểu về Cửa hàng trực tuyến 3.0 và kiến trúc giao diện mới của Shopify
Phát triển Giao diện Shopify
Lập trình Liquid (Thẻ, Đối tượng và Bộ lọc)
Cách sử dụng TailwindCSS trong Phát triển Giao diện Shopify
Tạo giao diện Shopify bằng Shopify CLI
Tạo trang sản phẩm nâng cao với băng chuyền sản phẩm trên di động, bộ chọn biến thể và hơn thế nữa!

Yêu cầu

Bạn cần biết HTML, CSS và JavaScript
Bạn cần biết cách sử dụng Node hoặc npm
Bạn cần có hiểu biết cơ bản về Shopify

Đối tượng phù hợp

Dành cho "Nhà phát triển Shopify" từ Cơ bản đến Trung cấp, KHÔNG phải Nhà phát triển Web nói chung
Học viên muốn học cách tạo giao diện Shopify bằng Shopify CLI
Chủ cửa hàng Shopify muốn tìm hiểu về giao diện Shopify
Nhà phát triển Web muốn tìm hiểu về kiến trúc giao diện Shopify

Nội dung khóa học

10 phần • 90 bài giảng
1 Giới thiệu
2 Trước khi chúng ta bắt đầu
3 Cửa hàng trực tuyến 2.0 là gì?
4 Shopify Liquid là gì?
1 Tạo Tài khoản Đối tác Shopify
2 Tạo Cửa hàng Phát triển
1 Hãy đọc phần này trước khi tiếp tục!
2 Cài đặt VSCode trên MacOS
3 Cài đặt NodeJS
4 Cài đặt Shopify CLI trên Windows
5 Cài đặt Shopify CLI trên MacOS
1 Tạo Dự án Giao diện Shopify bằng Shopify CLI
2 Kết nối giao diện Shopify cục bộ với cửa hàng trực tuyến bằng Shopify CLI
3 Cài đặt TailwindCSS vào dự án giao diện Shopify
4 Sửa lỗi Shopify CLI với .shopifyignore
1 Thanh Điều hướng (Tạo liên kết menu)
2 Menu Thả xuống (Tạo liên kết phụ)
3 Menu Di động (Tạo cửa sổ menu di động)
4 Học cách tùy chỉnh đầu trang với Section Schema
5 Cách ẩn/hiện liên kết đăng nhập và đăng ký khách hàng
1 Sử dụng tích hợp GitHub với Shopify
1 HÃY ĐỌC! PHẦN NÀY LIÊN QUAN ĐẾN CÁC BÀI HỌC TIẾP THEO!
2 [404]: Tìm hiểu về Mẫu JSON
3 [404]: Settings Schema
4 [404]: Thiết kế Trang 404
5 [Bài viết]: Tạo Bài đăng Blog
6 [Bài viết]: Chuyển từ Liquid sang Mẫu JSON
7 [Bài viết]: Settings Schema
8 [Bài viết]: Thiết kế Trang Bài viết
9 [Bài viết]: Phần Bình luận
10 [Bài viết]: Tối ưu hóa Công cụ Tìm kiếm (SEO) #1
11 [Bài viết]: Tối ưu hóa Công cụ Tìm kiếm (SEO) #2
12 [Blog]: Chuyển từ Liquid sang Mẫu JSON
13 [Blog]: Setting Schema
14 [Blog]: Thiết kế Trang Blog
15 [Blog]: Phân trang
16 [Giỏ hàng]: Chuyển từ Liquid sang Mẫu JSON
17 [Giỏ hàng]: Tạo Trang Giỏ hàng Hoạt động
18 [Giỏ hàng]: Tạo Đơn hàng Thử nghiệm cho Cửa hàng Phát triển
19 [Giỏ hàng]: Schema Blocks
20 [Bộ sưu tập]: Chuyển từ Liquid sang Mẫu JSON
21 [Bộ sưu tập] - Thiết kế Trang Bộ sưu tập
22 [Bộ sưu tập] - Tạo Tệp Snippet Thẻ Sản phẩm
23 [Bộ sưu tập] - Tạo Schema Settings
24 [Bộ sưu tập] - Tạo Hiệu ứng Phóng to khi Di chuột
25 [Trang chủ] - Chuyển từ Liquid sang Mẫu JSON
26 [Trang chủ] - Bộ sưu tập Nổi bật
27 [Danh sách Bộ sưu tập] - Tạo Trang Danh sách Bộ sưu tập Hoạt động
28 [Trang] - Chuyển từ Liquid sang Mẫu JSON
29 [Trang] - Hiển thị Nội dung Trang
30 [Trang] - Thiết kế Trang
31 [Section Tùy chỉnh] - Biểu mẫu Liên hệ
32 [Trang] - Trang Liên hệ
33 [Sản phẩm] - Chuyển từ Liquid sang Mẫu JSON
34 [Sản phẩm] - Tạo Các Sản phẩm Cần thiết để Kiểm thử
35 [Sản phẩm] - Hiển thị Phương tiện Sản phẩm
36 [Sản phẩm] - Tạo Băng chuyền Phương tiện Sản phẩm
37 [Sản phẩm] - Tạo Biểu mẫu Sản phẩm
38 Hãy Sửa Code của Chúng ta
39 [Sản phẩm] - Tạo Schema Blocks cho Biểu mẫu Sản phẩm
40 [Sản phẩm] - Phía JavaScript của Mẫu Sản phẩm
41 [Tìm kiếm] - Tạo Thanh Tìm kiếm
42 [Tìm kiếm] - Hiển thị Sản phẩm trong Kết quả Tìm kiếm
1 [Khách hàng] - Trang Đăng nhập
2 [Khách hàng] - Trang Đăng ký
3 [Khách hàng] - Kiểm thử Biểu mẫu Quên Mật khẩu
4 [Khách hàng] - Biểu mẫu Đặt lại Mật khẩu
5 [Khách hàng] - Đăng nhập Khách
6 [Khách hàng] - Trang Tài khoản
7 [Khách hàng] - Trang Đơn hàng #1
8 [Khách hàng] - Trang Đơn hàng #2
9 [Khách hàng] - Trang Đơn hàng #3
10 [Khách hàng] - Trang Địa chỉ (Tạo giao diện)
11 [Khách hàng] - Trang Địa chỉ (Tạo Modal Địa chỉ Mới)
12 [Khách hàng] - Trang Địa chỉ (Phía JavaScript của Biểu mẫu Địa chỉ Khách hàng)
13 [Khách hàng] - Trang Địa chỉ (Tạo Modal Chỉnh sửa Địa chỉ)
14 [Khách hàng] - Trang Địa chỉ (Đặt làm địa chỉ mặc định)
15 [Khách hàng] - Trang Địa chỉ (Xóa địa chỉ)
16 [Khách hàng] - Trang Kích hoạt Tài khoản
1 Sửa lỗi AlpineJS Blipping
2 Sửa lỗi Shopify CLI
3 Sử dụng Theme Check
4 Sửa lỗi SwiperJS và kích thước phương tiện
1 Sử dụng Mô hình 3D trong Shopify
2 Model Viewer là gì?
3 Thiết lập phần tử tùy chỉnh mô hình sản phẩm
4 Thiết lập cửa sổ modal mô hình sản phẩm
5 Tạo JavaScript cho phần tử tùy chỉnh
6 Viết kiểu CSS cho Model Viewer để tối đa hóa kích thước
7 Sử dụng Tính năng Giao diện Model Viewer của Shopify

Giới thiệu khóa học

Shopify just recently updated their Shopify online experience and now they call it "Online Store 3.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

  2. Using TailwindCSS to design a Shopify theme

  3. Online Store 3.0 (JSON Templates)

  4. Shopify CLI

  5. Schema Settings

  6. Search Engine Optimization (SEO) for pages like articles, products, etc.

  7. Liquid language (Referencing asset files, loops, conditional statements, Shopify objects, filters, and many more)

  8. Customer pages


Frequently Asked Questions


Q: 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!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Ecommerce Development
Hiển thị tất cả khoá học Shopify
Hiển thị tất cả khoá học Tailwind Css
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊