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

Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required!

4.45 (135 reviews)
Udemy
platform
English
language
Web Development
category
1,599
students
6.5 hours
content
Sep 2021
last update
$64.99
regular price

What you will learn

How to create a Shopify theme from scratch with Vue. and Liquid

Advanced Liquid Techniques

Create a high quality Shopify Theme

Advanced Shopify Techniques using Vue and Liquid

Shopify Ajax API

Create a custom variant and option selector for products

Create a powerful Mini-Cart using Vue

How to implement Vue using a CDN in Shopify themes

Description

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


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.


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.



Content

Introduction

What we will be building
Inspiration

Preparation

Shopify Partners Account and Online Store
Theme Kit Connection
Why Vue.js?

Theme Basics

Adding Products and Collections
Collection Page
Homepage Section Schema
Product Page

Product Page in Depth

Adding Vue.js to Product Page
Adding to Cart with Vue.js
Custom Select Dropdown

SCSS for Shopify

Product Page Styling Basics
Styling Header and presets
Collection Page Styling
Product Card Styling
Product Page Styling

Mini-Cart

Mini-Cart Setup
Mini-Cart Styling
Mini-Cart Final Functionality

Home Page Sections

Hero Image and Rich Text Sections
Image with Text Section
Logo List Section (Section Blocks)

Using Navigations (Menus)

Menu Drawer
Footer Menu and Styling

Finishing Touches

Menu Interactions
Mobile Responsiveness
Next Steps

**BONUS** How to find freelance clients

Introduction
Custom Job Boards
Social Networks
Slack Groups

Screenshots

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0) - Screenshot_01Advanced Shopify Theme Development: Liquid + Vue.js (v3.0) - Screenshot_02Advanced Shopify Theme Development: Liquid + Vue.js (v3.0) - Screenshot_03Advanced Shopify Theme Development: Liquid + Vue.js (v3.0) - Screenshot_04

Reviews

Artur
June 24, 2023
It's a great work for starting/intermediate shopify developer. The content is a little outdated as author doesn't maintain it due to promoting hia own platform, but I think it's a shame, he has done a great work here and it should be continued. I found a lot of great tricks and some cool tools on this website, which is great and helps in every day work. The course is styling heavy, which is great, because you get to improve your css skills. It also covers liquid building, which is also very good. VueJS is cool thing, but I would argue a little excessive for so little project, yet again it's good to see how things can be done. Also React has more popularity, so VueJS seem to be pretty controversial pick. That being said, process is similar and it's good to have overview for different libraries and practicies. I like the style of teaching, voice and accent of author are great. The downside is lack of resources, source files, notes, links, lecture summaries - you have to do it yourself most of time. It's pretty sad there is no community behind this course, such as discord channel or at least kind of facebook group or forum. Overall solid work, I urge author to continue development of it, as it is still very valid, it already has nice number of students and it can be great competitotor on udemy market (it may not pay much, but it accumulates a lot of traffic and if course is maintained, the number of students will just grow so position in searches).
Rajendra
February 14, 2023
I was expecting the course to be more on VueJS & adding more functionalities built on VueJS. IMO, the course is more about CSS, somewhat on Shopify storefront & then little about vuejs (just only add to cart, mini cart does not explain about the advance theme development). I felt nothing advance about it :(
Otavio
January 11, 2023
Good course, Instead of focus in CDN, can be made directly of most companies uses Vue. Most of topics are covered, its good for this course knowledge in Stateless.
Emily
October 10, 2022
It was great for me as a javascript developer with knowledge of Vue as I wanted to learn more about Shopify. I'd definitely recommend this course
O&A
August 18, 2022
Thank you so much for the course and sharing your knowledge. I definitely picked up a few valuable tricks from this course, especially how to marry Vue and Liquid, and how to implement a store without Vuex or Pinia. Good one! One think I want to mention - there is too much CSS in this course. Could be a lot more efficient of just copying and pasting CSS, instead of typing it all up. but good for those who don't know css well.
Carlos
July 20, 2022
Good course, learning advanced liquid and how to create a headless ecom store. The last part to convert scss to css, that I was looking for 'cause I have several old themes have to update.
Alejandro
April 19, 2022
Good course, but it did not meet my expectations things that you should improve, to make it the best shopify course: - After installation, the template that is downloaded by default from themekit, has many files, that are not used throughout the course, it would be a good idea to add materials to work throughout the course: . A virgin template, related to the topic that we will work on throughout the course . Material like the images - hero's that we will use, in my case I had to capture screen and go one by one - Another point to improve is that I would have liked you to touch more deeply on how the hierarchy of the template is handled in shopify - I would have liked to see also, the handling of more shopify functions -I would like you to add a section in the Vue backend, for form validation, to make the theme a little more secure From there in the rest it is an excellent course, which I will repeat without a doubt !!! very simple and very funny
Carlos
March 11, 2022
Muito bom. Aulas com boa duração e boa didática do professor. Já consegui aplicar o que foi ensinado e ser remunerado por isto. Recomendo.
Mantas
January 3, 2022
Could be more detail about shopify's/liquid's ins and outs, It says advanced but its been nothing but basic yet
Oscar
December 20, 2021
Developers will find this is not an advanced course. There are only three sections covering Shopify features and the rest is about styling in SASS, which he ends up removing and using a website to convert it to regular CSS. He also doesn't follow best practices for styling. The last section is a waste of time. He could have simply added text with links.
Shayne
December 18, 2021
This course was exactly what I was looking for. I'm learning the building blocks to make reactive UIs for ecommerce.
Mate
November 1, 2021
I bought this course because I am building a theme for a client and had technical difficulties building a reactive UI. As I typically work with React, it is the framework I am most comfortable with. So my main goal was to use React, but after a lot of research I gave up on using it, because I didn't find any good way of using it with Liquid. With my React knowledge I can work with any other framework, but I am not as familiar with them as with React. This was also the case with Vue. I learned Vue 2 in the past, but I didn't know I could use it this way. So I tried to build my theme using vanilla JavaScript (with Rollup and Babel), but I quickly realized it is so much more effort without using any modern framework, because you have to manually do the things that a framework automatically does for you. And the more code you write, the more mistakes you make. So using Vue this way was definitely new and a great idea for me. Thank you for that! Now I will rewrite my theme's code using Vue. The only thing I gave only 4 stars is because I expected some more advanced coding, like quantity selector for the product section as well, handling not existing variants for certain option selections, a money filter that respects the currently set currency instead of hardcoding it and etc. These would have been very helpful for me. Apart from these, I think this is a very useful course for even more experienced developers who want to build a Shopify theme from scratch with stateful UI that is easy to maintain. Thank you again!
Khaled
September 10, 2021
This amazing course is THE GO-TO for Shopify theme development. Perfect for beginners who know general web-development, and a good refresher for those learnt in the Shopify field. A course for actual development and not the rearrangement of pre-built code: a treasure indeed. I particularly love this course because it is the only one so far to build everything from scratch. Others would explain what the already-made code found in the Dawn/Debut themes would do for the theme, or provide snippets the instructor made themselves behind the scenes. But this course sweeps all that under the rug and makes its own structure of development, explaining every inch of every step of the way. The best part? Whatever we've built in this course is super speedy, highly manageable, and reusable for reference or future development in new themes. For my personal approach to learning development, this course does a great job in remaining well structured, allowing for organized note-taking and easy referral to past lessons for any refreshers. I can't stress enough how much I appreciate someone taking the time needed to build a theme from scratch to show how everything fits together as one, whole project; it really helps when you have no idea where to start or where to go from learning the basics.
Luis
September 5, 2021
This is my third course on Shopify themes. This one if the best hands down. Great css and GREAT for those developers that have some knowledge of Vue.
Happy
July 6, 2021
Great course so far. The instructor is very clear and easy to understand the steps taken. Even if you have a later version of Shopify, you can still follow along pretty well, as they have updated a lot of out of the box functionality. The Vue introduction is great as well, very clear and easy to code along with.

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

3120282
udemy ID
5/12/2020
course created date
7/12/2021
course indexed date
Bot
course submited by