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)

Vue.js + Laravel: CRUD with SPA

Vue.js + Laravel: CRUD with SPAlaraveldaily.com

Category: Vue, Laravel
Duration 1 hour 50 minutes 29 seconds
Ethereum and Solidity: Build Dapp with VueJS

Ethereum and Solidity: Build Dapp with VueJSudemy

Category: Decentralized Applications (dApps) / 'Web 3', Vue
Duration 1 hour 45 minutes 9 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024Academind Pro

Category: JavaScript, Sql, HTML, CSS, Node.js, Vue
Duration 78 hours 51 minutes 55 seconds
Build a Server Rendered Vue.js App with Nuxt and Vuex

Build a Server Rendered Vue.js App with Nuxt and Vuexegghead

Category: Vue, Nuxt
Duration 33 minutes 40 seconds
The Complete Guide to Data Fetching in Nuxt

The Complete Guide to Data Fetching in Nuxtvueschool.io

Category: Vue, Nuxt
Duration 1 hour 32 minutes 52 seconds