React + Shopify (Headless CMS): Build a Custom Storefront (Udemy.com)
Headless Shopify Storefront using the Shopify API, React Hooks, Context, and Chakra UI (Faster than Shopify Themes)
Created by: Working With Shopify
Last updated February 2022
What you will learn
- How to Create a Shopify Storefront (Theme) using React and Chakra-UI
- How to Create a Headless Shopify Storefront
- Connecting to Shopify Buy SDK
- Using Chakra UI to quickly build custom storefronts
- Shopify Partners Account and Dashboard
- React Context
- How to build dynamic components
- Managing State
How it compares
Against the other 815 rated Udemy courses in Web Development on CourseDuck:
- Rating4.1 out of 5higher than 7% of them
- Reviews361#340 of 816 by number of reviews
- Length3 hoursshorter than 79% of them
- Last updatedFebruary 2022earlier than 77% of them
Course Description
"This course was well thought out. He doesn’t skip any details it is put together very well. I feel confident enough to go out and build my headless Shopify sites."
Learn how to build a custom Shopify Storefront with React (Hooks and functional components) using the Shopify Buy SDK.
Build a Custom Shopify Storefront using React (Headless CMS)
The long awaited Custom Shopify Storefront course is finally ready!
I am so happy to be releasing it after getting tons of requests from everyone for this course!
Start creating some beautiful, blazing fast, custom storefronts using the Shopify Headless CMS! Headless ecommerce is definitely the way of future development and allows for both flexibility and security.
We will be starting off with all of the basic setup so that if you are in rush, you can learn everything to get you started in the first hour. After that, we will continue to build out the website using Chakra UI and easily make it responsive and beautiful.
Topics covered:
- Shopify Partners Account and Dashboard
- Connecting to Shopify Buy SDK
- Creating a React Application
- Using Chakra UI to quickly build custom storefronts
- How to build dynamic components
- Styling a full e-commerce store
- Creating a slide out Cart and Menu components
- Creating a Shopify Checkout URL
- Using local Storage to persist the cart data
- Discussing Next.js, Gatsby, Contentful, SEO, Webhooks, and deployment
- React Context
- Section Structure
- Visual Portfolio Piece
- CSS Animations
- Managing State
- Persistent Cart
- localStorage
- E-Commerce Security
Instructor Details
- 4.1 Rating
361 Reviews
Working With Shopify
Working With Shopify is a Toronto, Canada based education community focused on creating high quality e-learning courses for Shopify Developers, Designers, Agencies, Merchants, and anyone else working with the Shopify platform.
We have a passion for breaking down tough topics and teaching it.
Sign up and join us on this amazing adventure!
More courses by Working With Shopify
Become a Shopify Expert: Create Epic Ecommerce Experiences (2021)
4.3 (251 Reviews)
Provider: Udemy
Time: 5.6h
$54.99
More Web Development courses
Python Fullstack Mastery: Build Modern Web Apps with Django (2025)
5.0 (165 Reviews)
Provider: Udemy
Time: 35h
$19.99
NgRx Signal store for Angular - The missing guide (2026)
4.9 (436 Reviews)
Provider: Udemy
Time: 11.3h
$89.99
Vue 3: Create a Mobile & Desktop App (with Quasar 2 & Pinia) (2024)
4.9 (177 Reviews)
Provider: Udemy
Time: 7.6h
$79.99
Build a URL Shortener App with ASP.NET: Step by Step (2026)
4.9 (100 Reviews)
Provider: Udemy
Time: 9.6h
$10.99
The Complete Elixir and Phoenix Bootcamp (2021)
4.8 (7,773 Reviews)
Provider: Udemy
Time: 17.4h
$84.99
Reviews
By Lee Gramling on 10/29/2024
Do not buy this course, it is unusable and outdated. I watched enough and could not progress and cannot get a refund. If you look in the Announcement section, there is a note from the author from 1year ago that so many people complained that he created a new course, which is not part of this course or on Udemy. I was very hopeful to learn this material.
By David Stocker on 2/10/2023
Functionality first. Some minor differences between the React version the instructor uses and the latest that I'm using, but I like using the latest and discovering the differences, so I expect to be flexible and make modifications as needed.
By Andrew J Fleming on 7/1/2022
It's an ideal course for learning the basics of setting up a Shopify store using React as your frontend framework. I was already very familiar with React and the dependencies that are commonly used with it but the React concepts that are used in the project are digestible for beginner React users. The instructor uses the useContext React hook for state management which I think was a good move; It'd be possible to use Redux instead but, because that's such a complex tool I think introducing it in this course would distract from the focus of the course which is learning the Shopify API. The instructor uses the Chakra UI CSS framework. I decided not to use this for my project, instead using Material UI but, new developers may value an intro to Chakra UI; again the focus of this course is learning the Shopify API and so you can use whatever styling technology you like to achieve the look and feel of your ecommerce site while the product data managed by the Shopify CMS.
By Laurice Howard on 12/17/2021
Great course thoroughly explained and easy to understand for someone with beginning experience in React. I'm hoping for a course that goes a little more in depth because some of the API calls and ID's needed for them get a little tricky. Overall excellent course to get you started.
By Jonathan Martinez on 11/23/2021
This was a good course and I learned a lot from it. There were a few things that threw me off. I think mixing class based components with functional components for a true beginner would be confusing. This felt like more of an intermediate course to me simply for the fact that there is use of React Hooks, Destructuring, Promises, and Array Methods.
By Beau buxton on 11/9/2021
Really awesome course with a brilliant topic. Would be 5 stars but some more explanation in areas would be nice as well as some more advanced things so this can really be a storefront, such as handling collections, variants and quantity selection. Instructor is also super easy to follow as well.
By Gourav Auluck on 9/21/2021
This course was my first time using the Shopify API and I thought this course was a great gateway into starting to work with the Shopify platform. Explanations were great, the tutorials were great as well. Would love to see a course that involves building out a storefront in Next.js and also one working with Liquid since those are things I'm looking to learn as well. Awesome job!!
By Joshua Butner on 5/20/2021
This was great and answered a lot of questions I had- more quickly than I could have answered them on my own. I would have liked to have seen session handling, Shopify account interfacing, and/or maybe some in-depth examples with common tools like Next.js or Apollo or Sanity. This course definitely met my expectations, though!
By Alusine Quinny Sesay on 1/23/2021
I didn't know anything about Shopify, but now has a grasp of it. I also love the way you introduced Chakra UI design in this course, one of the very reason I enrolled for it. I would recommend this course to anyone, you won't regret. I would however love to see you do something elaborate on Chakra UI, dealing with more Chakara UI component that you didn't teach in this course.
By Paul O'Reilly on 1/23/2021
This is a great course. It cover's everything you need to get started with the Shopify "shopify-buy" SDK and run a static site that only uses Shopify as a CMS and for checkout. I've been wanting to check this out for ever, and this course is a perfect introduction to that. Everything worked flawlessly. I also enjoyed the intro to Chakra UI, and i'll definitely be looking to use it in future projects. Thanks Very Much!
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 82 / 100







