Create Shopify App – Master Shopify CLI, App Bridge, Polaris

Course Curriculum

Chapter 1: Introduction

Lecture 1: Creating a Shopify partners account

Chapter 2: Installing and understanding the Shopify CLI

Lecture 1: Installing the Shopify CLI

Lecture 2: Creating a Shopify Store

Lecture 3: Connecting the Shopify CLI to our Shopify Store

Chapter 3: Creating a Shopify App and installing in our Development Store

Lecture 1: Installing our Shopify App

Lecture 2: Understand some of the Shopify template files created for us by the Shopify CLI

Chapter 4: Using the Shopify CLI to create new product to our development store

Lecture 1: Adding products to our Shopify Developer Store

Chapter 5: Shopify Polaris, what is it and how it can help us

Lecture 1: An Introduction to Polaris

Chapter 6: Creating a modal to select and save selected Shopify products from the store

Lecture 1: Creating a Modal Popup on our Shopify App to display the products

Lecture 2: Saving our Select Products to state and displaying in our Shopify App

Chapter 7: Making our Shopify selection modal and table more attractive and functional

Lecture 1: Displaying the selected products on our Shopify App

Lecture 2: Displaying an Empty State when no products where selected

Chapter 8: Trust me, it is not you it is NGrok

Lecture 1: Too many connections NGrok error

Chapter 9: How to pre-select products before open the model in Shopify

Lecture 1: Displaying the selected products on our Shopify App

Chapter 10: Adding images to our Shopify products

Lecture 1: Adding image to our Shopify products and displaying on our app

Chapter 11: Creating a table to display the selected products using Shopify Polaris

Lecture 1: Creating a nice products table in our Shopify App

Lecture 2: Keeping the selected products select on our Modal

Lecture 3: Breaking the index file into smaller components

Chapter 12: Storing the selected products using store.js

Lecture 1: Installing Store-Js and passing shopOrigin to the components

Lecture 2: Saving products to the local storage on the client

Chapter 13: Ditching NGROK to use Local tunnel, no more time or number of connection limits

Lecture 1: Setting up Local Tunnel instead NGrok (so much better now)

Chapter 14: Adding new navigation tabs on our Shopify Admin page

Lecture 1: Add Client Router to our Shopify Application

Lecture 2: Creating a new route on Next.js

Lecture 3: Adding Navigation to our Shopify App

Chapter 15: Creating our own Session Storage in Shopify using CustomSessionStorage

Lecture 1: Creating our own Session Storage using CustomSessionStorage

Lecture 2: Saving and Reading the Session from disk and return a Session Object

Lecture 3: Load the session for the file to the ACTIVE_SHOPIFY_SHOPS variable

Chapter 16: Installing and Installing Script Tags in Shopify the Frontend part

Lecture 1: Creating the install banner page in Shopify

Lecture 2: Toggle the value of our Script Tag to Install or Unistall

Chapter 17: Installing and Installing Script Tags in Shopify the Backend part

Lecture 1: Creating new routers on our Shopify App Server Side

Lecture 2: Testing the routers on our Shopify App Server Side using Postman

Lecture 3: Creating all the necessary end points to Add, Delete and Read a Scipt Tag

Lecture 4: Adding the ScriptTag in Shopify

Chapter 18: Making Rest request from our Shopify Admin panel to our server

Lecture 1: Making a request from Shopify to our backend using Axios

Chapter 19: Adding new scopes to our Shopify application and installing our Script Tags

Lecture 1: Adding SCOPES to read and write script tags

Lecture 2: Saving our script tag with Shopify.

Lecture 3: Confirming that our Script Tag is installed

Lecture 4: Shopify Update – Invalid API key or access token

Chapter 20: Creating a useAxios custom hook to help us with the Axios requests

Lecture 1: Refactoring Axios and headers setup to useAxios

Chapter 21: Using Shopify own rest client instead Axios on the server

Lecture 1: Using the Shopify Rest Client to make a request to Shopify

Chapter 22: Displaying install or uninstall depending if the Script Tag is already installed

Lecture 1: Searching for the installed Script Tags on Shopify

Lecture 2: Making a request to get Script Tags from the frontend to our back end

Lecture 3: Implementing the get script tags on the server

Lecture 4: Checking if the Script Tag is installed with Shopify.

Chapter 23: Implementing the delete/uninstall of a Script Tag

Lecture 1: Passing the Script Tag Id back to the frontend

Lecture 2: Calling the delete script tag endpoint

Lecture 3: Calling our backend with the Script Tag Id to delete

Lecture 4: Deleting our Script tag with Shopify

Chapter 24: Manually adding our Liquid Pages and Scripts to the Storefront

Lecture 1: Manually creating our banner-app liquid file

Lecture 2: Rendering the banner app on the main Shopify page

Lecture 3: Conditionally render the Banner if the Script Tag is installed

Lecture 4: Testing the conditional render of the banner-app

Chapter 25: Programatically adding our Liquid Pages to the Store

Lecture 1: Removing our manually added Liquid code from the store and add to the server

Lecture 2: Adding scopes to read and write Shopify themes

Lecture 3: Creating a helper file to check with a Axios instance with Shopify information

Chapter 26: Getting the Shopify Main Theme ID from the Store

Lecture 1: Adding the Rest Request to get the themes from Shopify

Lecture 2: Testing the request to get the main theme ID from Shopify

Chapter 27: Adding our Liquid Code into the Layout Theme Liquid file

Lecture 1: Getting our Shopify Layout Theme Liquid file

Lecture 2: Read the content of our Liquid file using node file system fs

Lecture 3: Modifying out Layout Theme Liquid with our snippet

Lecture 4: Small fixes and testing the fetch and add snippet into the liquid page

Lecture 5: Uploading our new Layout Theme Liquid page to Shopify

Chapter 28: Uploading a new Snippet Liquid page programatically to Shopify

Lecture 1: Upload the Liquid Snippet to Shopify

Lecture 2: Re-installing the app and the Script tags and testing our app