Gatsby shopify

1. Introduction & Setup

1 Course introduction

2 Gatsby & Shopify Overview

3 Set up Gatsby project

4 Gatsby project starter files walkthrough

5 Set up Shopify & importing example products

6 Disable Shopify real-life payments + enable bogus payments

7 Collections in Shopify

8 Set up API keys in Shopify & connect to Gatsby

9 Query Shopify data using GraphiQL

2. Building the product pages

1 Query Shopify data from Gatsby & generate pages from product data

2 Start building the product template

3 Querying for a specific Product using page queries

4 Introduction to styled components

3. Building the image gallery

1 Introduction to images in Gatsby

2 Creating the ImageGallery component

3 Creating and rendering the ImageThumbnail components

4 Implementing active thumbnail feature

4. Dynamically querying data

1 Introduction to CartContext and calling the shopify API dynamically

2 Rendering the product variants

3 Rendering the variant price

4 Implementing routing for variants (part 1)

5 Implementing routing for variants (part 2)

6 Change the image thumbnail on variant selection

7 Hide variants if only 1 variant

5. Building the cart functionality

1 Creating the ProductQuantityAdder component (part 1)

2 Creating the ProductQuantityAdder component (part 2)

3 Add logic to the ProductQuantityAdder

4 Creating the Header component

5 Implement the add to cart functionality

6 Display the number of items and total price in header

6. Building the 'Your Cart' page

1 Link to the cart page

2 Creating the page and rendering our cart items

3 Styling the cart items

4 Adding the quantity adjuster buttons

5 Adding the delete button

7. Building the homepage

1 Adding collections data

2 Querying collections from homepage

3 Rendering collections grid

4 Styling the collections tiles

5 Styling the sale tile

6 Rendering the featured products

7 Styling the featured products grid

8 Finishing the product tiles

8. Building the all products pages

1 Creating the all-products page and rendering the filters

2 Styling the filters and creating the Checkbox component

3 Creating the Category filter checkbox functionality

4 Implement select deselect multiple category filters

5 Rendering products

10. Finishing touches

1 Implementing the checkout

2 Add shop now buttons to the homepage collection tiles

3 Add a homepage logo link

4 SEO

11. Deploy live site on Netlify

1 Deploy to netlify

2 Automatic re-build whenever shopify content changes

3 Extending auto rebuild - intro to faunadb

4 Netlify functions

5 Finishing up auto rebuild