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.

Read more about the course

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.

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

Join premium to watch
Go to premium
# Title Duration
1 What we will be building 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

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

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)zerotomastery.io

Category: Vue
Duration 27 hours 56 minutes 34 seconds
Testing Vue.js Components

Testing Vue.js Componentsvueschool.io

Category: Vue
Duration 1 hour 6 minutes 20 seconds
Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPAlaraveldaily.com

Category: Vue, Laravel
Duration 1 hour 50 minutes 29 seconds
Advanced Vue Component Design

Advanced Vue Component Designadamwathan

Category: Vue
Duration 3 hours 57 minutes 19 seconds
Material UI with Vuetify and Vue.js

Material UI with Vuetify and Vue.jsvueschool.io

Category: Vue
Duration 1 hour 40 minutes 10 seconds
Full-Stack Vue with GraphQL - The Ultimate Guide

Full-Stack Vue with GraphQL - The Ultimate Guideudemy

Category: MongoDB, GraphQL, Vue
Duration 9 hours 52 minutes 3 seconds