Shopify App Development For Beginners: Create Shopify Apps

Install node.js and ngrok to prepare for building Shopify apps. Authenticate ngrok, create a tunnel, and verify a public URL before the next lesson on app setup.

Sign up or sign in to Shopify, navigate to the apps menu, choose public app, fill the form, and obtain the API key and secret.

Choose a code editor, such as vs code, or sublime, and use the terminal to create a Shopify apps folder and prepare the project.

Initialize a Shopify app project by npm init, install react and next, configure dotenv and env vars, then build a koa-based server, run the server, install on a development store.

Install Polaris and Next.js, configure next.config.js for the Shopify API key, and set up a Polaris app with translations; downgrade to Next 10.0.5 and create a products page.

Encounter run-time errors in your Shopify app; fix by installing Engelke via npm, launching it to obtain a new URL, and updating the app's redirect URL accordingly.

Learn to list Shopify products with a rest api by installing Axios and color router, configuring headers with an access token, and fetching data for display.

Develop a reusable product list in React using Polaris, wire state and props to display product images, titles, and descriptions, and enable item interactions for Shopify apps.

Learn to delete a product from a Shopify development store using rest API or Shopify Product API, with UI integration via Polaris and a confirmation modal.

Install script tags in your development store by building a script tags page, configuring navigation, and using a React Polaris interface to post to Shopify's script tag API.

Learn to prevent duplicate script tags in your Shopify development store by checking existing script tags via the database and conditionally posting with axios.

Learn to delete script tags in a Shopify app using a form to specify a script tag id and the uninstall script tag rest api.

Learn how GraphQL compares to REST and how to fetch product data with query and mutation in Shopify apps. Use selective fields and the GraphQL Explorer to test queries.

Install and configure GraphQL with Apollo and Shopify GraphQL proxy to fetch store data. Secure requests with middleware and build an RFQ data component that queries the shop name.

Learn to create a Shopify app subscription using GraphQL, including building a subscription mutation, configuring recurring pricing, and test charges that direct merchants to the billing page.

Learn how to create and complete draft orders in Shopify using GraphQL mutations, including draft order input, line items, and converting drafts to actual orders with product variants.

Learn to disable a Shopify app subscription by using Polaris to build a simple Autopage interface, configuring redirects to the billing page, and toggling subscription checks in the database.

Create custom orders by building a draft order workflow in a Shopify app, using Polaris components, React, and GraphQL mutations to create and complete draft orders.

Refactor the Shopify app server by moving routers into a dedicated server folder, creating a products module, and implementing get products and delete product logic to streamline testing.

redesign the orders page layout by splitting it into two sections inside cards—manual order creation and a product resource list—while implementing a graphql-based product fetch and preparing for variant queries.

Learn to build a draft order flow by sending selected product variants to a server, constructing a query string, and invoking a router endpoint.

Learn to create and register Shopify webhooks, especially the app installed event, to manage and delete stored data during installation and handle incoming webhook requests.

Create a storefront popup using the sweet alert library by updating Shopify theme liquid with the theme and assets APIs, adding a snippet in the snippets folder.

Fix router 404 not found by correcting the order and items handling, moving code to the bottom, and validating product, script, and order workflows in a Shopify app.

Design the index page with Polaris, replace messy divs with page, implement empty state and skeleton loading, and polish the two-column layout with skeleton body texts and thumbnail.

Replace empty product lists on the product page with skeleton components, including skeleton thumbnail and text, using Polaris layout sections to render loading states and show products.

Learn to manage Shopify script tag installation status by passing install status props, fetching script tag state with axios, and updating UI to show installed and disable the install button.

Create an orders page by mirroring the products list with skeleton loading using the thumbnail and body text, swap customers for products, and show the order button only after loading.

Learn when to use a database in your Shopify app, store tokens and merchant data responsibly, document features and usage for the App Store, and strengthen React skills through testing.

Create a new Shopify app with koa-shopify-auth v4, initialize a Next.js project, configure API keys and scopes, and integrate Polaris UI for a dev store.

Set up the Shopify App Bridge, configure GraphQL with Apollo, and migrate from old project files to a new Shopify app using provider, client router, and a GraphQL proxy.

Create a Shopify app with custom session storage using my sequel, implementing store and load callbacks to persist session data such as session id, domain id, and access token.