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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5 Hours | 2.48 GB

Learn Shopify App dev with React, Next.js, Node.js, Polaris, Shopify ScriptTag, Shopify Rest and GraphQL, App Bridge

Shopify is growing exponentially and this is the time for you to get your share of this pie and be free from the 9 am to 5 pm job

According to the Shopify Developers website, Shopify developers have the potential to make $272,000.00 a year, today there are more than 500.000 Shopify stores driving more than $40 billion worth of sales, and these store owners need your help to developed apps to make the life easier, and they are happy to pay, some even will contract freelancers to develop a custom solution for their store.

I start to develop Shopify apps back in 2018 for my partner store, we use to design and sell baby clothes using Printfy, however, the Printfy app at the time was terrible, even tho it would create new products for you it would create a new product for each size and color and of course, we want to be all one product with many variants (different sizes and colors), my partner and I would expend hours after creating each new print grouping and fixing the cloths until one day I had enough and I thought to myself, I’m a developer I can create an app to make this laborious job easy.

And so I start work on it, just to find out the many parts of the Shopify app is not well documented, after reading many documents and asking many questions on the Shopify forum and Slack I got it done, I told that was so cool I showed it at work where they also asked me to create a payment gateway for Shopify and so I did.

In this course, I will share everything I learned on my Shopify journey with you. And you will learn everything you need to know to be part of this trend, from creating a Shopify partners account, to create a fully functional app that will install and uninstall itself automatically on any Shopify Store.

Few topics we will learn:

  • How to create a Shopify partners account
  • How to install the Shopify CLI
  • How to create a Shopify store
  • How to populate your new Shopify Store using the Shopify CLI
  • How to create an embedded Shopify App using Shopify App Bridge
  • How to create a Shopify Admin UI that looks like just the Shopify UI using Polaris
  • How to fetch, display and select products from the store using Shopify Rest API
  • How to fetch, modify and upload changes on the Shopify Store pages
  • How to create new pages on the Shopify Store
  • How to create new pages using Liquid (Shopify proprietary language)
  • How to instal and unistal ScriptTags
  • How to check if a ScriptTag is installed before display your app in the StoreFront
  • How to use Shopify Webhooks
  • and much more

If you want to start your own business creating your own Shopify apps or working as a freelancer, this is the course for you.

Table of Contents

Introduction
1 Creating a Shopify partners account

Installing and understanding the Shopify CLI
2 Installing the Shopify CLI
3 Creating a Shopify Store
4 Connecting the Shopify CLI to our Shopify Store

Creating a Shopify App and installing in our Development Store
5 Installing our Shopify App
6 Understand some of the Shopify template files created for us by the Shopify CLI

Using the Shopify CLI to create new product to our development store
7 Adding products to our Shopify Developer Store

Shopify Polaris, what is it and how it can help us
8 An Introduction to Polaris

Creating a modal to select and save selected Shopify products from the store
9 Creating a Modal Popup on our Shopify App to display the products
10 Saving our Select Products to state and displaying in our Shopify App

Making our Shopify selection modal and table more attractive and functional
11 Displaying the selected products on our Shopify App
12 Displaying an Empty State when no products where selected

Trust me, it is not you it is NGrok
13 Too many connections NGrok error

How to pre-select products before open the model in Shopify
14 Displaying the selected products on our Shopify App

Adding images to our Shopify products
15 Adding image to our Shopify products and displaying on our app

Creating a table to display the selected products using Shopify Polaris
16 Creating a nice products table in our Shopify App
17 Keeping the selected products select on our Modal
18 Breaking the index file into smaller components

Storing the selected products using store.js
19 Installing Store-Js and passing shopOrigin to the components
20 Saving products to the local storage on the client

Ditching NGROK to use Local tunnel, no more time or number of connection limits
21 Setting up Local Tunnel instead NGrok (so much better now)

Adding new navigation tabs on our Shopify Admin page
22 Add Client Router to our Shopify Application
23 Creating a new route on Next.js
24 Adding Navigation to our Shopify App

Creating our own Session Storage in Shopify using CustomSessionStorage
25 Creating our own Session Storage using CustomSessionStorage
26 Saving and Reading the Session from disk and return a Session Object
27 Load the session for the file to the ACTIVE SHOPIFY SHOPS variable

Installing and Installing Script Tags in Shopify the Frontend part
28 Creating the install banner page in Shopify
29 Toggle the value of our Script Tag to Install or Unistall

Installing and Installing Script Tags in Shopify the Backend part
30 Creating new routers on our Shopify App Server Side
31 Testing the routers on our Shopify App Server Side using Postman
32 Creating all the necessary end points to Add, Delete and Read a Scipt Tag
33 Adding the ScriptTag in Shopify

Making Rest request from our Shopify Admin panel to our server
34 Making a request from Shopify to our backend using Axios

Adding new scopes to our Shopify application and installing our Script Tags
35 Adding SCOPES to read and write script tags
36 Saving our script tag with Shopify.
37 Confirming that our Script Tag is installed

Creating a useAxios custom hook to help us with the Axios requests
38 Refactoring Axios and headers setup to useAxios

Using Shopify own rest client instead Axios on the server
39 Using the Shopify Rest Client to make a request to Shopify

Displaying install or uninstall depending if the Script Tag is already installed
40 Searching for the installed Script Tags on Shopify
41 Making a request to get Script Tags from the frontend to our back end
42 Implementing the get script tags on the server
43 Checking if the Script Tag is installed with Shopify.

Implementing the deleteuninstall of a Script Tag
44 Passing the Script Tag Id back to the frontend
45 Calling the delete script tag endpoint
46 Calling our backend with the Script Tag Id to delete
47 Deleting our Script tag with Shopify

Manually adding our Liquid Pages and Scripts to the Storefront
48 Manually creating our banner-app liquid file
49 Rendering the banner app on the main Shopify page
50 Conditionally render the Banner if the Script Tag is installed
51 Testing the conditional render of the banner-app

Programatically adding our Liquid Pages to the Store
52 Removing our manually added Liquid code from the store and add to the server
53 Adding scopes to read and write Shopify themes
54 Creating a helper file to check with a Axios instance with Shopify information

Getting the Shopify Main Theme ID from the Store
55 Adding the Rest Request to get the themes from Shopify
56 Testing the request to get the main theme ID from Shopify

Adding our Liquid Code into the Layout Theme Liquid file
57 Getting our Shopify Layout Theme Liquid file
58 Read the content of our Liquid file using node file system fs
59 Modifying out Layout Theme Liquid with our snippet
60 Small fixes and testing the fetch and add snippet into the liquid page
61 Uploading our new Layout Theme Liquid page to Shopify

Uploading a new Snippet Liquid page programatically to Shopify
62 Upload the Liquid Snippet to Shopify
63 Re-installing the app and the Script tags and testing our app

Homepage