Shopify Theme Development 3.0: Build Shopify Themes [2025]

Name: Shopify Theme Development 3.0: Build Shopify Themes [2025]
Rating: 3.9 (30 reviews)

Build fully custom Shopify themes with Shopify CLI 3.0 using HTML, CSS, JavaScript, JSON, and Liquid.

Created byAnkit Khand

Last updated 5/2025

English

English [Auto],

What you'll learn

Build Shopify themes from scratch using CLI 3.0, Liquid, HTML, CSS, JavaScript, and JSON for full customisation.
Design dynamic layouts with interactive carousels, hover effects, banners, and responsive grids.
Create advanced product pages featuring custom variants, selectors, AJAX updates, and seamless user interaction.
Develop interactive carts with real-time updates, quantity adjustments, and item removal for smooth checkout.
Implement custom search features to help customers find products easily and improve store navigation.
Use metafields and JSON templates to make adaptable themes suited to various store needs.
Gain career-ready Shopify skills through hands-on projects and build a portfolio to impress clients.
Integrate APIs and automate features to enhance functionality and improve user experience in your store.
Complete real-world projects to showcase your skills in designing high-quality, professional Shopify themes.

Course content

8 sections • 43 lectures • 8h 33m total length

Introduction0:54
Assets

Top Shipping Bar Section12:40
In this video, we’re going to start off by diving right into Shopify theme development, starting with building a custom Header Shipping Bar using HTML, CSS, JavaScript, and Liquid—the core tools you need to create dynamic, professional Shopify themes. Whether you're new to Shopify development or looking to sharpen your skills, this tutorial will guide you step-by-step through coding and customisation.
We’ll begin by previewing the default Shopify Dawn theme and gradually replace the basic header with our custom section to display important announcements like shipping offers. You’ll learn how to create and customise new sections in Shopify’s theme editor, define schema settings, and apply custom CSS to make the layout good. As we go, you’ll see how to integrate Liquid code to dynamically pull data from Shopify’s admin panel and display it on the front end.
Chapter 1.2 Assets0:50
Students will have a solid understanding of how to enhance their Shopify theme by adding dynamic elements and organising assets effectively. They’ll learn how to work with Shopify’s Liquid templating language, specifically by using the {{ template.name }} syntax to dynamically display the name of the current page. This allows them to better understand and manage the structure of their themes as they continue to build.
Additionally, students will gain hands-on experience managing the assets folder. They’ll learn how to upload and organizs files, such as PNG images, into the Assets section, setting the foundation for customising their theme’s visual elements.
Chapter 1.3 Header Menu Section32:40
Chapter 1.3.1 Header Menu Section5:02
Here we student will create menu section
Chapter 1.4 Home Banner15:50
Chapter 1.5 Browse Collection Section28:29
Chapter 1.6.1 Product Category Section13:10
Chapter 1.6.2 Product Category Section9:43
Chapter 1.6.4 Product Category Section12:24
Chapter 1.6.3 Product Category Section23:46
Develop the product category section in Shopify themes by implementing price logic, assets, and styling through liquid snippets, enabling dynamic pricing and responsive design.
Chapter 1.7 Background Image Section13:09
Chapter 1.8 Explore Product17:47
Chapter 1.9 Footer Section12:00

Chapter 3.1 Product Page Introduction0:37
Explore how the product page follows the default template as we build a similar layout, clicking through sections to create a new page in this tutorial.
Chapter 3.2 Breadcrumb6:33
Chapter 3.2.1 Product Images4:02
Build the product images section in a Shopify theme, using a product top container with product media and info in a grid. Ensure image and price update when variants change.
Chapter 3.2.2 Product Images17:33
Chapter 3.3 Product Info28:24
Build a dynamic Shopify product page by coding a product info section with a slider, hidden fields, variant handling, price rendering, quantity controls, and collapsible blocks powered by third-party apps.
Chapter 3.3.1 Install Metafield App5:49
Chapter 3.3.2 CSS22:15
Chapter 3.3.3 Contd10:20
Develop interactive Shopify themes by implementing collapsible sections, script-driven meta fields, and dynamic price updates, with event handling, styling tweaks, and add-to-cart functionality.
Chapter 3.4 Variant Selector17:19
Chapter 3.4.1 Changing Price19:01
Handle variant changes to update price and inventory in a Shopify theme, including compare-at price display and UI updates. Reflect the selected variant in URL and adjust the add-to-cart state.
Chapter 3.4.2 Changing Product Variant Image6:40
Learn to update the product image when a user selects a variant by using the variant's featured media id and syncing the product image slider with data-media-id attributes.
Chapter 3.4.3 Quantity Selector7:53
Chapter 3.4.4 Quantity Selector0:23
When changing variants, reset the selected product quantity to one to ensure the add to cart function uses a valid quantity.

Chapter 4 Cart Template14:59
Create and customize a Shopify cart template by building cart sections and snippets in liquid, rendering cart items, handling empty carts, and implementing quantity, options, and total price.
Chapter 4.1 Cart Template CSS18:11
Chapter 4.2 Side Cart16:08
Build a side cart with an ajax add-to-cart flow, using fetch post requests to send product id, variant id, and quantity, then update the side cart content.
Chapter 4.3 Side Cart13:16
Chapter 4.4 Update Quantity0:58
Learn how to fix quantity update issues in Shopify theme development by aligning the json object name to quantity and ensuring dynamic updates after refresh, as shown in chapter 4.4.
Chapter 4.5 Remove Item6:59
Learn to implement price formatting and remove item functionality in the Shopify cart using Ajax and fetch, update the cart interface, and handle post requests.
Chapter 4.6 Update Cart Count3:51
Update the cart count by calling the update cart item function, fetch updated cart data, and refresh the dom with the new item count, including css margin tweaks.

Requirements

Basic knowledge of HTML, CSS, and JavaScript is recommended
Familiarity with Shopify or Liquid is helpful but not required. You’ll learn everything you need to know along the way!

Description

Step into the world of Shopify theme development with version 3.0 of Shopify CLI! Whether you're a developer, entrepreneur, or designer, this course is your gateway to mastering Shopify’s powerful platform and creating completely custom e-commerce themes. Using HTML, CSS, JavaScript, and Liquid, you’ll learn how to build feature-rich Shopify stores from scratch.

We’ll start with the basics, guiding you through the essentials of Shopify’s CLI, Theme Editor, and Liquid templating language. Then, you’ll learn how to build a fully functional e-commerce site, including homepages, collection pages, product pages, and search features. Plus, we’ll explore advanced techniques like implementing live-updating carts with AJAX, currency switching, color swatches, and more!

By the end of this course, you'll be equipped with the skills to create and customize themes for personal projects, clients, or even a Shopify career. Shopify Theme Development 3.0 is your all-in-one guide to designing and developing stunning e-commerce sites!

What you’ll learn:

How to use Shopify CLI 3.0, Theme Editor, JSON templates, and Liquid.
Build fully customized e-commerce websites with Shopify.
Create dynamic, AJAX-enabled carts and product displays.
Implement advanced theme features like live search, currency switching, and product variants.
Turn design ideas into functional Shopify themes.

Who this course is for:

Web developers interested in expanding their skills by learning Shopify theme development.
Entrepreneurs or store owners who want to customize their Shopify themes.
Freelancers or aspiring developers looking to build themes for clients and create a career in the Shopify ecosystem.

Shopify Theme Development 3.0: Build Shopify Themes [2025]

What you'll learn

Explore related topics

Course content

Course Introduction2 lectures • 1min

Setting up development store1 lecture • 9min

Chapter 113 lectures • 3hr 18min

Chapter 2 Collection Page5 lectures • 1hr 5min

Chapter 3 Product Page13 lectures • 2hr 27min

Chapter 4 Cart7 lectures • 1hr 14min

Chapter 5 Search1 lecture • 17min

Chapter 6 Finalise Product Page1 lecture • 4min

Requirements

Description

Who this course is for: