Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Business
E-Commerce
Shopify
Shopify Theme Development: Online Store 2.0 + TailwindCSS

Shopify Theme Development: Online Store 2.0 + TailwindCSS

Loại khoá học: E-Commerce

Learn how to create Shopify themes for Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS

image
50.000 VND
30 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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:

  1. How to set up your development store

  2. Using TailwindCSS to design a Shopify theme

  3. Online Store 2.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!

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

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!

Yêu cầu

  • You must know HTML, CSS, & JavaScript
  • You must know how to use Node or npm
  • You must know your way around Shopify

Nội dung khoá học

10 sections

Introduction

4 lectures
Introduction
01:44
Before We Get Started
01:10
What is Online Store 2.0?
03:59
What is Shopify Liquid?
08:43

Setting up your partners account

2 lectures
Creating Shopify Partners Account
02:51
Creating Development Stores
06:36

Installing Local Development Tools For Shopify CLI

5 lectures
Read before you continue!
00:35
Installing VSCode in MacOS
04:08
Installing NodeJS
02:36
Installing Shopify CLI on Windows
18:03
Installing Shopify CLI on MacOS
09:23

Getting Started

4 lectures
Creating The Shopify Theme Project using Shopify CLI
05:14
Logging in to your development stores with Shopify CLI
04:50
Installing TailwindCSS to Shopify theme projects
16:52
Fixing Shopify CLI errors with .shopifyignore
02:22

Creating The Responsive Navigational Bar

5 lectures
The Navigational Bar (Creating the menu links)
19:46
The Dropdown Menus (Creating sublinks)
13:32
The Mobile Menu (Creating mobile menu window)
23:47
Learning how to customize the header with Section Schema
16:03
How to hide/show customer login & register links
05:22

Shopify Theme Project Management

1 lectures
Using GitHub integration with Shopify
11:07

JSON Templates

42 lectures
READ! THIS IS ABOUT THE FOLLOWING LESSONS!
00:29
[404]: Learning about JSON Templates
12:52
[404]: Settings Schema
02:53
[404]: Designing The 404 Page
07:24
[Article]: Creating Blog Posts
04:38
[Article]: Liquid To JSON Template
06:43
[Article]: Settings Schema
19:08
[Article]: Designing The Article Page
14:34
[Article]: Comments Section
37:31
[Article]: Search Engine Optimization (SEO) #1
11:23
[Article]: Search Engine Optimization (SEO) #2
14:06
[Blog]: Liquid To JSON Template
12:55
[Blog]: Setting Schema
03:25
[Blog]: Designing The Blog Page
11:36
[Blog]: Paginations
17:20
[Cart]: Liquid To JSON Template
03:06
[Cart]: Making a Working Cart Page
30:40
[Cart]: Making a Test Order for Development Stores
04:32
[Cart]: Schema Blocks
09:07
[Collection]: Liquid To JSON Template
09:39
[Collection] - Designing The Collection Page
09:00
[Collection] - Creating The Product Card Snippet File
05:18
[Collection] - Creating Schema Settings
03:06
[Collection] - Creating That Zoom Effect on Hover
02:39
[Index] - Liquid To JSON Template
03:25
[Index] - Featured Collection
17:34
[List Collections] - Creating a Working List Collections Page
17:17
[Page] - Liquid To JSON Template
05:26
[Page] - Rendering The Page Content
01:51
[Page] - Designing The Page
02:17
[Custom Section] - Contact Form
21:50
[Page] - Contact Page
02:51
[Product] - Liquid To JSON Template
04:08
[Product] - Creating The Necessary Products For Testing
08:29
[Product] - Rendering The Product Medias
13:15
[Product] - Creating Product Media Carousels
14:09
[Product] - Creating The Product Form
24:25
Let's Fix Our Code
06:09
[Product] - Creating Schema Blocks for the Product Form
14:21
[Product] - The JavaScript Side of Product Template
22:54
[Search] - Creating The Search Bar
11:16
[Search] - Rendering Products in Search Results
13:02

Customers

16 lectures
[Customer] - Login Page
22:21
[Customer] - Registration Page
12:49
[Customer] - Testing Forgot Your Password Form
01:16
[Customer] - Reset Password Form
11:42
[Customer] - Guest Login
06:54
[Customer] - Account Page
28:51
[Customer] - Order Page #1
25:18
[Customer] - Order Page #2
09:50
[Customer] - Order Page #3
14:24
[Customer] - Addresses Page (Creating the interface)
14:20
[Customer] - Addresses Page (Creating The New Address Modal)
21:54
[Customer] - Addresses Page (JavaScript Side of Customer Address Form)
30:56
[Customer] - Addresses Page (Creating The Edit Address Modal)
13:55
[Customer] - Addresses Page (Set as default address)
07:23
[Customer] - Addresses Page (Deleting addresses)
14:25
[Customer] - Activate Account Page
17:30

Shopify CLI, Theme Check, AlpineJS

4 lectures
Fixing AlpineJS Blipping Issue
03:19
Fixing Shopify CLI Errors
02:09
Using Theme Check
14:36
Fixing SwiperJS error and the media size
05:44

Learning about 3D Models in Shopify themes

7 lectures
Using 3D Models in Shopify
04:28
What is Model Viewer?
02:49
Setting up the product model custom element
10:36
Setting up the product model modal window
06:57
Creating JavaScript of <product-model> custom element
19:08
Writing the CSS style of the Model Viewer to maximize its size
07:04
Using the Model Viewer UI Feature of Shopify
09:32

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Unity Mobile Game - Create an Addictive Idle Carrot Clicker

Unity Mobile Game - Create an Addictive Idle Carrot Clicker

80 VND
50.000 VND
The Complete Spring Boot Development Bootcamp

The Complete Spring Boot Development Bootcamp

90 VND
50.000 VND
Full Stack: React and Java Spring Boot - The Developer Guide

Full Stack: React and Java Spring Boot - The Developer Guide

110 VND
50.000 VND
.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

.NET 8 Microservices: DDD, CQRS, Vertical/Clean Architecture

100 VND
50.000 VND
JavaScript Algorithms and Data Structures Masterclass

JavaScript Algorithms and Data Structures Masterclass

185 VND
50.000 VND
The Ultimate React Course 2024: React, Next.js, Redux & More

The Ultimate React Course 2024: React, Next.js, Redux & More

130 VND
50.000 VND
The Complete Android 15 Course -Build 82 Apps [Java& Kotlin]

The Complete Android 15 Course -Build 82 Apps [Java& Kotlin]

110 VND
50.000 VND
Unreal Engine 5 C++: Học Làm Game Bắn Súng Online Trên Steam

Unreal Engine 5 C++: Học Làm Game Bắn Súng Online Trên Steam

25 VND
50.000 VND
Unreal Engine 5.4 PCG - Tạo Môi Trường Game bằng PCG

Unreal Engine 5.4 PCG - Tạo Môi Trường Game bằng PCG

65 VND
50.000 VND
NestJS Zero to Hero - Modern TypeScript Back-end Development

NestJS Zero to Hero - Modern TypeScript Back-end Development

80 VND
50.000 VND
Build a Backend REST API with Python & Django - Beginner

Build a Backend REST API with Python & Django - Beginner

95 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
The Complete JavaScript Course 2024: From Zero to Expert!

The Complete JavaScript Course 2024: From Zero to Expert!

185 VND
50.000 VND
iOS & Swift - The Complete iOS App Development Bootcamp

iOS & Swift - The Complete iOS App Development Bootcamp

185 VND
50.000 VND
Drone Programming with Python - Face Recognition & Tracking

Drone Programming with Python - Face Recognition & Tracking

65 VND
50.000 VND
Modern JavaScript From The Beginning 2.0 (2024)

Modern JavaScript From The Beginning 2.0 (2024)

105 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi