CF

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

6h 37m 49s
English
Paid

Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required!  Who is the course for? Anyone who is looking to build ecommerce themes for themselves, clients or to get an in demand job using the Shopify platform. Most Shopify themes are stuck in the past. Utilizing jQuery for dynamic content is from the past. This course throws jQuery out the window and replaces it with Vue.js. The most flexible and powerful JavaScript framework that allows us to create a Shopify theme from the future.

The theme built in this course utilizes the best practices for Shopify themes but adds an innovation piece where it is needed the most. The way we will be building this theme will allow for the best customer experience with the least maintenance.

Advanced topics include:

- How to build a fully functional Shopify Theme from Scratch

- Advanced Liquid Techniques

- Shopify Ajax API

- Create a powerful Mini-Cart using Vue.js

- Create a custom variant and option selector for products

- Build an Advanced Shopify Theme from the Future (Vue.js 3.0)

- How to implement Vue.js using a CDN in Shopify themes

Why Vue.js?

Vue.js is the only framework that allows for the kind of flexibility that is needed when building Shopify themes. We are able to inject Vue.js into the parts of the theme where we need it most and keep it away from where we don't need it. Vue.js is also easy to pick up and start using. There is no extensive setup required and no dependencies. It super lightweight and allows us to easily manage state within our theme.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 32 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 32 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What we will be building
All Course Lessons (32)
#Lesson TitleDurationAccess
1
What we will be building Demo
04:40
2
Inspiration
05:46
3
Shopify Partners Account and Online Store
02:27
4
Theme Kit Connection
09:12
5
Why Vue.js?
05:17
6
Adding Products and Collections
04:02
7
Collection Page
09:04
8
Homepage Section Schema
10:58
9
Product Page
09:33
10
Adding Vue.js to Product Page
09:33
11
Adding to Cart with Vue.js
12:23
12
Custom Select Dropdown
28:46
13
Product Page Styling Basics
11:10
14
Styling Header and presets
22:52
15
Collection Page Styling
21:05
16
Product Card Styling
15:39
17
Product Page Styling
21:46
18
Mini-Cart Setup
21:50
19
Mini-Cart Styling
23:11
20
Mini-Cart Final Functionality
25:43
21
Hero Image and Rich Text Sections
14:39
22
Image with Text Section
12:21
23
Logo List Section (Section Blocks)
14:17
24
Menu Drawer
15:12
25
Footer Menu and Styling
16:24
26
Menu Interactions
09:35
27
Mobile Responsiveness
20:16
28
Next Steps
02:41
29
Introduction
00:28
30
Custom Job Boards
08:09
31
Social Networks
04:03
32
Slack Groups
04:47
Unlock unlimited learning

Get instant access to all 31 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course does not require any prior experience. It is designed for beginners who are interested in building ecommerce themes for Shopify using Liquid, JavaScript, and Vue.js v3.0. Basic understanding of web development concepts may be beneficial, but is not mandatory.
What will I build during this course?
The course focuses on building a Shopify theme from scratch. Students will learn to create ecommerce themes using Liquid and Vue.js v3.0, incorporating features like custom select dropdowns, mini-carts, and dynamic product pages. The aim is to produce a theme that offers an excellent customer experience with minimal maintenance.
Who is the target audience for this course?
This course is intended for individuals who want to develop Shopify themes, either for personal use, client projects, or to gain skills for career advancement. It is particularly suitable for those looking to transition from older technologies like jQuery to modern frameworks like Vue.js.
How does this course compare in depth and scope to other Shopify theme development courses?
Unlike many Shopify theme development courses that rely on jQuery, this course leverages Vue.js v3.0, offering a modern approach to building themes. It covers both foundational elements and advanced features such as mini-cart functionalities and mobile responsiveness, making it suitable for a wide range of learners.
What specific tools and platforms will be used in this course?
The course uses Shopify Partners Account for setting up the online store environment. It also employs Theme Kit for theme development and Vue.js v3.0 for creating dynamic content, replacing older technologies like jQuery.
What topics are not covered in this course?
This course does not cover the use of older JavaScript libraries like jQuery for theme development, focusing instead on modern frameworks such as Vue.js. Additionally, it does not delve into backend development or non-Shopify ecommerce platforms.
What is the expected time commitment for this course?
The course consists of 32 lessons. While the total runtime is unspecified, students can expect to spend time on both instructional content and practical exercises. Time commitment may vary based on individual pace and prior experience.