Skip to content
UdemyWeb DevelopmentPaid courseBeginner levelCertificate

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

icon
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

icon
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


icon
Udemy Discount

The discount is applied through our link. Open the course from here and Udemy's current promotional price is applied at checkout on most courses, no code to type.

Some courses are excluded from Udemy's promotions. If the price does not drop, clear your browser cookies and use the button again.

icon
Instructor Details

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!

icon
More courses by Working With Shopify

$54.99

icon
More Web Development courses

$19.99

$89.99

$89.99

$79.99

$10.99

$84.99

icon
Reviews

4.1

361 ratings on Udemy

Select a bar to show only those reviews.Select the bar again to show every rating.

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!

Showing all 10 reviews on CourseDuck

Read all 361 reviews on Udemy

icon
Quality Score

No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 82 / 100