
Build a headless e-commerce storefront with Shopify data using React, featuring a custom cart and checkout. Utilize the Shopify Buy SDK and Chakra UI for rapid development.
Set up a React project for a Shopify headless storefront by cleaning the source, configuring the context API, and initializing the Shopify client to fetch data.
Logo url: https://cdn.shopify.com/s/files/1/0472/5705/9496/files/Logologo_1.svg?v=1610055540
Background color: #FFA8E2
Build a functional cart and checkout experience in a React + Shopify storefront, adding items, managing line items, and styling with Chakra UI for a two-column product layout.
Implement an empty cart state and responsive sizing, center the empty message, and refine navigation with a home link, a working menu, and a cart item badge showing line items.
background color: "#FF38BD"
Footer background color: backgroundColor="#FFA8E2"
Footer image src: https://cdn.shopify.com/s/files/1/0472/5705/9496/files/Bath_Bomb_-_Product-5_-_trans_1.png?v=1610123549
Hero image src: https://cdn.shopify.com/s/files/1/0472/5705/9496/files/Bath_Bomb_-_Product-4_-_nobg_1.png?v=1610055851.jpg
Button color: "#FF38BD"
Background color: "#FFA8E2"
First image: https://cdn.shopify.com/s/files/1/0472/5705/9496/files/premium-bath-bombs.jpg?v=1610066758
Second Image: https://cdn.shopify.com/s/files/1/0472/5705/9496/files/bath-bomb-and-candle.jpg?v=1610066758
Text: I'm baby kale chips twee skateboard tattooed, DIY iPhone ugh mixtape tumeric unicorn narwhal. Iceland shoreditch authentic, sartorial vegan twee flannel banh mi bushwick retro farm-to-table single-origin coffee.
Improve the home page by styling the product section with relative and absolute positioning, add a dynamic RichText component for titles and descriptions, and plan SEO updates and Next.js enhancements.
Explore SEO and CSS animations with Animist to customize effects, improve metadata with Helmet React, and transition from Create React App to Next.js or Gatsby for better SEO.
Finish this course to build a headless Shopify storefront with Next.js or Gatsby, featuring a cart and checkout, plus deploying with webhooks and Contentful-driven image management.
"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