Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)
Course description
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
Watch Online Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)
All Course Lessons (32)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsSimilar courses
What’s New in Nuxt 4: Key Updates for Nuxt.js Developers
Want to join the conversation?
Sign in to comment