Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
Gatsby JS & Shopify: Gatsby ecommerce sites | Gatsby 2020
Intruduction & setup
Important: Before you begin this course
Course introduction (4:02)
Gatsby & Shopify Overview (5:29)
Set up Gatsby project (3:03)
Gatsby project starter files walkthrough (7:21)
Set up Shopify & importing example products (9:21)
Disable Shopify real-life payments + enable bogus payments (1:56)
Collections in Shopify (2:32)
Set up API keys in Shopify & connect to Gatsby (6:12)
Query Shopify data using GraphiQL (3:02)
Building the product pages
Query Shopify data from Gatsby & generate pages from product data (8:07)
Start building the product template (6:02)
Querying for a specific Product using page queries (7:07)
Introduction to styled components (11:05)
Building the image gallery
Introduction to images in Gatsby (5:14)
Creating the ImageGallery component (6:28)
Creating and rendering the ImageThumbnail components (6:11)
Implementing active thumbnail feature (5:16)
Dynamically querying data
Introduction to CartContext and calling the shopify API dynamically (9:06)
Rendering the product variants (4:50)
Rendering the variant price (5:37)
Implementing routing for variants (part 1) (7:45)
Implementing routing for variants (part 2) (4:20)
Change the image thumbnail on variant selection (2:26)
Hide variants if only 1 variant (1:04)
Building the cart functionality
Creating the ProductQuantityAdder component (part 1) (9:50)
Creating the ProductQuantityAdder component (part 2) (1:52)
Add logic to the ProductQuantityAdder (2:43)
Creating the Header component (5:25)
Implement the add to cart functionality (7:10)
Display the number of items and total price in header (3:19)
Building the 'Your Cart' page
Link to the cart page (5:16)
Creating the page and rendering our cart items (6:05)
Styling the cart items (7:45)
Adding the quantity adjuster buttons (7:55)
Adding the delete button (4:08)
Building the homepage
Adding collections data (5:08)
Querying collections from homepage (6:10)
Rendering collections grid (4:53)
Styling the collections tiles (6:06)
Styling the sale tile (6:35)
Rendering the featured products (5:09)
Styling the featured products grid (6:53)
Finishing the product tiles (8:54)
Building the all products page
Creating the all-products page and rendering the filters (5:27)
Styling the filters and creating the Checkbox component (9:30)
Creating the Category filter checkbox functionality (7:03)
Implement select / deselect multiple category filters (7:38)
Rendering products (10:57)
Creating the search functionality
Creating the search component (4:54)
Implementing the search filter via URL (7:43)
Add the search filter logic for the products (6:29)
Finishing touches
Implementing the checkout (8:44)
Add "shop now" buttons to the homepage collection tiles (4:49)
Add a homepage logo link (6:17)
SEO (4:38)
Deploy live site on Netlify
Deploy to netlify (4:04)
Automatic re-build whenever shopify content changes (2:51)
Extending auto rebuild - intro to faunadb (6:31)
Netlify functions (5:37)
Finishing up auto rebuild (21:06)
Query Shopify data from Gatsby & generate pages from product data
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock