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

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.

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.

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.

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.

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.

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.