Create 10+ Real Projects With Javascript In Shopify

JavaScript for Shopify theme developers

What you'll learn

Understand how JavaScript works within Shopify themes

Use Shopify's Section Rendering API with JavaScript

Work with metafields and dynamic content using JS

Build custom Shopify features using vanilla JavaScript

Learn debugging techniques for Shopify JavaScript

Use Web Components for advanced UI elements in Shopify

Gain confidence working in Shopify’s Liquid + JS environment

Requirements

You are familiar with HTML, CSS, JavaScript and Liquid and know how to create basic sections and blocks in Shopify.

Description

This course focuses on JavaScript for Shopify theme developers.It includes the JavaScript concepts that help in Shopify theme development like:Section rendering API. Web Components. JavaScript debugging.JavaScript events.DOM break points.Debugging network calls.Cart API.I will cover all these topics using real world projects like:Creating free shipping progress bar.Creating product upsells in cart drawer based on the line item metafields.Creating sticky add to cart.Adding gift wrapping to product.Creating variant swatch images on PDP.Creating variant swatch images on the product cards.Updating the product page information on variant change using section rendering API.This course is Course for:Shopify theme developers who want to level up their JavaScript skillsFront-end developers transitioning into Shopify developmentFreelancers or agency developers building custom Shopify featuresDevelopers tired of relying on heavy apps for basic functionalityDevelopers who struggle with JavaScript in Shopify’s Liquid environmentAnyone who wants hands-on experience with real-world Shopify projectsJunior developers looking to build a strong portfolio of Shopify workShopify experts who want to add advanced interactivity to their themesIf you are ready to level-up your Shopify theme developement, you can enroll in this course and get comfortable with JavaScript in Shopify theme development.

Overview

Section 1: Creating the local environment

Lecture 1 Create the local environment

Section 2: Real world projects

Lecture 2 Create the free shipping progress bar

Lecture 3 (Assignment) Fixing the Shipping Progress Bar

Lecture 4 Creating Product Upsells in Card Drawer

Lecture 5 Sticky add to cart

Lecture 6 Fixing the Variant Selector in sticky add to cart

Lecture 7 Gift wrapping option (also delete gift wrap on deleting the actual item)

Lecture 8 Import the car products (import_the_products.csv) in your test store

Lecture 9 Create Image swatches on PDP

Lecture 10 Create the variant image swatches on the collection page

Lecture 11 Update the information on product page on variant change

Shopify theme developers who want to level up their JavaScript skills,Front-end developers transitioning into Shopify development,Freelancers or agency developers building custom Shopify features,Developers tired of relying on heavy apps for basic functionality,Developers who struggle with JavaScript in Shopify’s Liquid environment,Anyone who wants hands-on experience with real-world Shopify projects,Junior developers looking to build a strong portfolio of Shopify work