Master Shopify Theme Development in URDU

**Topics:** Create the development store with a partners account, local setup (VS Code, Git, Shopify CLI), pull Shopify theme to local, create GitHub branch and sync the store theme to track changes, & Introduction to Shopify theme architecture (Layout, Templates, Sections, Blocks).

**Assignment:** Create a Shopify Partners account and your first development store. Set up your local development environment. Pull a default Shopify theme to your local machine, initialize a Git repository, and push it to GitHub, syncing it with your Shopify store. Navigate the file structure of the default theme.

**Topics:** Understanding section and block schema, how blocks are rendered on the page, and exploring specific examples like the product page, header, and collection page.

**Assignment:** Analyze the schema of existing sections and blocks within your pulled theme. Identify how data is structured and how blocks are called and rendered on different page types (e.g., product.json, collection.json). Try modifying a simple setting in a section schema and observe its effect.

**Topics:** Comprehensive Shopify Liquid crash course, focusing on various Liquid objects available on different pages with practical examples.

**Assignment:** Practice using Liquid objects (e.g., `product`, `collection`, `customer`, `cart`) and filters (`money`, `img_url`, `size`) in different theme files. Create a new snippet and include it in a template, passing data using Liquid variables.

**Topics:** Understanding and implementing Metafields and Metaobjects for real-world projects.

**Assignment:** Create custom metafields for products (e.g., “Care Instructions”, “Material”). Then, create a metaobject to store structured data like “Key Features” for a product. Display these metafields and metaobject data on your product page using Liquid.

**Topics:** Creating real, practical sections and blocks for theme development practice.

**Assignment:** Design and code a new, custom section from scratch for your homepage. This section should have at least one block type, and both the section and the block should include various settings (e.g., text, image picker, color picker).

**Topics:** Comprehensive review of Week 1 concepts and dedicated Q&A session. Consolidate your understanding by working on a practice project.

**Assignment:** Work on creating a “Featured Products” section that dynamically displays products from a chosen collection. Ensure it uses Liquid to iterate through products and displays relevant information (image, title, price). Be ready to ask any lingering questions during the Q&A.

**Topics:** Introduction to JavaScript debugging, finding breakpoints, DOM breakpoints, effective console logs, and locating the exact JavaScript responsible for specific interactivity within a Shopify theme. Learn to read JavaScript code line by line.

**Assignment:** Using your browser’s developer tools, identify and debug JavaScript on an existing Shopify theme. Set breakpoints, step through code, and use console logs to understand how elements like image carousels or dropdown menus are controlled by JavaScript.

**Topics:** Introduction to the Section Rendering API with practical, real-world project examples.

**Assignment:** Implement dynamic section loading using the Section Rendering API. For instance, create a “Load More Products” button on a collection page that fetches and appends more product results without a full page reload, utilizing the Section Rendering API.

**Topics:** Introduction to the Cart API with hands-on, real-world project development.

**Assignment:** Implement an “Add to Cart” functionality using the Cart API that updates a mini-cart or cart drawer dynamically without a full page refresh. Also, implement quantity updates and item removal within this mini-cart using the Cart API.

**Topics:** Introduction to Web Components and their application in Shopify theme development for building reusable UI elements.

**Assignment:** Create a custom web component for a product variant selector. This component should encapsulate the logic for changing product images and prices based on selected variants, demonstrating reusability and isolated functionality.

**Topics:** Understanding and implementing predictive search and filtering functionalities in a Shopify theme.

**Assignment:** Build a basic predictive search overlay that suggests products as a user types. Additionally, implement simple collection filters based on product tags or vendors, using JavaScript to dynamically update the displayed products without a full page reload.

**Topics:** Comprehensive review of Week 2 concepts and dedicated Q&A session. Consolidate your understanding by working on a practice project.

**Assignment:** Combine your knowledge of the Section Rendering API and Cart API to enhance your product page. Implement a custom “Buy Now” button that adds an item to the cart and immediately redirects to checkout, or updates a cart drawer and then allows for quick checkout.

**Topics:** Starting your custom Shopify theme by creating the homepage, including a dynamic featured collection section.

**Assignment:** Set up your blank theme and build the core homepage. Implement a “Featured Collection” section that allows the merchant to select a collection and display its products on the homepage. Include options for layout (e.g., number of products, grid/carousel).

**Topics:** Creating the product page with image gallery, product information display, related products section, and an interactive “Add to Cart” button.

**Assignment:** Build out your custom product page. Implement a robust image gallery, display all product details (title, price, description, variants), and dynamically show related products based on collection or tags. Integrate a functional “Add to Cart” button that works with the Cart API.

**Topics:** Creating a functional cart drawer with quantity selectors and item deletion capabilities.

**Assignment:** Design and implement a slide-out cart drawer. Ensure it dynamically displays cart contents, allows users to adjust item quantities, and provides a “Remove” button for each item. All interactions should update the cart without reloading the page, leveraging the Cart API.

**Topics:** Creating an advanced mega menu for improved navigation within your Shopify theme.

**Assignment:** Develop a responsive mega menu for your theme’s header. This menu should display multiple columns of links, potentially including images or featured collections, when hovered over or clicked.

**Topics:** Creating the collection page for your custom theme, including functional filters.

**Assignment:** Build your custom collection page template. Implement robust filtering options based on product availability, price, vendor, or specific product tags. Ensure the filters dynamically update the displayed products without a full page reload, utilizing the Section Rendering API where appropriate.

**Topics:** Overview of the entire Week 3 project, final theme assembly, polishing, and a dedicated Q&A session for all remaining questions.

**Assignment:** Conduct a thorough review of your newly built Shopify theme. Ensure all functionalities are working as expected and address any bugs. Optimize your code and prepare your theme for deployment. Come prepared with any final questions for the instructor.