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

Create a Shopify partners account to manage your apps, themes, and stores from a single dashboard, then add a store and connect a private app for theme kit development.

Connect your local development to Shopify with Theme Kit, generate API credentials, and create a new theme that auto-syncs with your store using theme watch.

Compare bughouse with vanilla JavaScript and Jaquie, explain Shopify file structure, and show how Vue.js enables modular, maintainable themes by leveraging sections, snippets, and render over include.

Publish and preview your theme, then import a product CSV to load paintings with size and color variants. Create manual or automated collections using conditions on price, title, or tags.

learn to customize the shopify collection page by editing collection.liquid, looping through collection.products to show product titles and prices, and render a product card snippet.

Learn to build a Shopify homepage with reusable sections, focusing on a hero image section defined by a schema with image picker settings, controlled via the theme customizer.

Explore building a Shopify product page with liquid variables, including selecting the current variant, displaying the featured image, and configuring the add-to-cart form using snippets and structured markup.

Learn to integrate Bughouse with Vue.js into a Shopify product page by replacing the add to cart form, loading via CDN, and mounting a data-driven component.

Learn to add to cart with Vue.js in a Shopify theme, using Axios for product data, and implement add-to-cart methods within a headless cmf store using Liquid and Bughouse.

Learn to replace the standard Shopify select with a custom dropdown, map color and size options via the Ajax API, manage selected variants, and add to cart.

Style the product page with liquid and sass tweaks, reset styles, and responsive grids; customize the add-to-cart form and product options while refining the header and typography.

Style the header and presets by removing default button styling, defining font faces and variables, and building responsive header rules with phone, tablet, and desktop breakpoints.

Style a collection page by building liquid driven product cards and images in a swiper carousel, with mobile breakpoints and per product IDs for swiping.

Enhance the product card on the collection page with hover arrows, navigation assets, and a hover toggle from price to sizes, plus a circular add button built with before/after selectors.

Style the product page with a swiper gallery and responsive grid. Refine the add-to-cart button and product option selectors for the mini cart.

Learn how to implement a responsive mini-cart in bughouse with a reactive API, updating cart state, item count, and header display, including add-to-cart and automatic close behavior.

Style and interactivity for a header mini-cart: implement toggle open, slide-in from the right, render items with image, title, and price, and plan future features.

Build a functional mini cart in a Shopify theme with Liquid and Vue.js, including a quantity selector, ajax updates, money formatting, a close button, and a checkout link.

Explore building and styling the hero image and rich text sections in a Shopify theme, including dynamic blocks and presets to deliver a polished add-to-cart experience and clean empty-state design.

Explore building an image with text section in a Shopify theme using liquid, including image, title, description settings, responsive grid layouts, and the reverse image option for layout flexibility.

This lecture explains building a logo list section with section blocks in Shopify Liquid, defining block schemas, rendering each block's logo image and link, and using presets and max blocks.

Implement a responsive menu drawer to toggle the main and footer menus in a Shopify theme, including privacy policy, refund policy, and terms of service. Learn Liquid templates and navigation.

Apply a cross-browser shadow to the footer menu and implement transitions for hover effects, then convert the footer into a customizable Shopify section with social link blocks.

Implement hover interactions for the menu and cart with cues and transitions. Refine typography using font smoothing and integrate header and cart arrow svg icons via snippets and liquid files.

Leverage the lighthouse test to assess performance, accessibility, best practices, and SEO. Optimize images and enhance menu interactions to improve live deployment quality.

Tim NetSol introduces three methods for finding freelance clients and directs you to his site for a free course on becoming a freelance programmer.

Explore how to land high-value Shopify and e-commerce gigs by evaluating Upwork flaws, using remote job boards like We Work Remotely, and emphasizing your expertise to win expert freelance roles.

Use LinkedIn posts to find freelance Shopify gigs, emphasizing referrals and direct outreach over job boards. Craft targeted messages, optimize your profile, and leverage connections to land contract work.

Discover how to land freelance gigs by joining targeted Slack groups, filtering by size and category, and leveraging referrals for Shopify, WordPress, or React projects.