About any relevant courses or youtube video tutorials on shopify app development

Abhinav_O · December 14, 2025, 8:35pm

Hey guys, is there any updated courses/tutorials available for shopify app dev ?

Liam-Shopify · December 15, 2025, 10:10am

There have some changes recently with app dev tooling- so many of the existing courses could be out of date. What could be helpful might be to use an IDE like Cursor that has AI capabilities to walk you through tutorials like this on our docs: Build a Shopify app using React Router

You can prompt the AI to help you learn about the processes that are happening and show you how to implement different types of features that are possible to build. I’d also recommend using the Shopify Dev MCP too for help with this. That way instead of watching a tutorial you essentially have a personal tutor that shows you what is happening in your own environment, where you can ask questions about any code, and direct your own learning experience.

Liam-Shopify · December 15, 2025, 10:38am

For example, this could be used as a model that you could follow in Cursor:

Shopify App Development: Zero to App Store

A comprehensive learning course for developers with JavaScript, React, HTML, CSS, and hosting experience who want to build Shopify apps that provide real merchant value.

Course Overview

Duration	~4-6 weeks (self-paced)
Prerequisites	JavaScript, React, HTML/CSS, hosting experience
End Goal	Submit a functional app to the Shopify App Store

Module 1: Understanding the Shopify Ecosystem

2-3 days

1.1 Core Concepts

Before writing code, understand what you’re building for:

Merchants = Your users (store owners running businesses on Shopify)
Admin = The dashboard merchants use to manage their store
Storefront = The customer-facing online store
Extensions = UI you inject into Shopify surfaces (hosted by Shopify)
App Home = Your app’s main embedded page in the admin (hosted by you)

1.2 How Apps Fit In

┌─────────────────────────────────────────────────────────────┐
│                     SHOPIFY ADMIN                           │
│  ┌────────────────────────┐  ┌────────────────────────────┐ │
│  │    Your App Home       │  │   Admin UI Extensions      │ │
│  │   (React + Polaris)    │  │   (Shopify-hosted)         │ │
│  │   [Hosted by you]      │  │   [Blocks, Actions, etc.]  │ │
│  └────────────────────────┘  └────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
                          ▼
              ┌─────────────────────────┐
              │    GraphQL Admin API    │
              │   (Query/Mutate Data)   │
              └─────────────────────────┘

1.3 Learning Tasks

Create a Shopify Partner Account → partners.shopify.com
Create a Development Store (free sandbox store for testing)
Explore the Admin — Add products, create orders, understand the merchant perspective
Browse the App Store — Install 2-3 free apps to see what good apps look like

Key Documentation

Module 2: Development Environment Setup

1-2 days

2.1 Install Required Tools

# 1. Node.js (v18+ recommended)
node --version

# 2. Install Shopify CLI globally
npm install -g @shopify/cli@latest

# 3. Verify installation
shopify version

2.2 Scaffold Your First App

# Create a new app with Remix template (recommended)
shopify app init

# Follow prompts:
# - App name: "my-first-app"
# - Template: Remix (recommended)
# - Language: JavaScript or TypeScript

2.3 Connect and Run

cd my-first-app

# Start development server (creates tunnel automatically)
shopify app dev

# This will:
# - Prompt you to select your Partner org
# - Connect to your development store
# - Start a local server with hot reload
# - Open your app in the Shopify admin

2.4 Understand the Project Structure

my-first-app/
├── app/                    # Remix routes (your app pages)
│   ├── routes/
│   │   ├── app._index.jsx  # App home page
│   │   └── app.*.jsx       # Additional app routes
│   └── shopify.server.js   # Shopify authentication setup
├── extensions/             # UI extensions (admin, checkout, etc.)
├── shopify.app.toml        # App configuration file (crucial!)
├── package.json
└── .env                    # Environment variables

Key Documentation

Module 3: Building Your App UI with Polaris

3-4 days

Your app’s UI inside the Shopify admin uses Polaris, Shopify’s design system. This ensures your app feels native.

3.1 Polaris Fundamentals

Polaris provides React components that match Shopify’s look and feel:

// Example: Basic app page structure
import { Page, Layout, Card, Text, Button } from "@shopify/polaris";

export default function AppHome() {
  return (
    <Page title="My First App">
      <Layout>
        <Layout.Section>
          <Card>
            <Text as="h2" variant="headingMd">
              Welcome to your app!
            </Text>
            <Text as="p" tone="subdued">
              This is where you'll build merchant value.
            </Text>
            <Button variant="primary">Get Started</Button>
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

3.2 Essential Polaris Components to Learn

Category	Components
Layout	`Page`, `Layout`, `Card`, `Box`, `Stack`
Data Display	`DataTable`, `ResourceList`, `IndexTable`
Forms	`Form`, `TextField`, `Select`, `Checkbox`
Feedback	`Banner`, `Toast`, `Modal`, `Spinner`
Navigation	`AppProvider`, `Frame`, `Navigation`

3.3 App Bridge for Native Features

App Bridge gives you access to Shopify admin features:

import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

function MyComponent() {
  const app = useAppBridge();
  
  // Navigate within the admin
  const redirect = Redirect.create(app);
  redirect.dispatch(Redirect.Action.ADMIN_PATH, "/products");
  
  // Show resource picker
  const selection = await shopify.resourcePicker({ type: "product" });
}

3.4 Practice Exercise

Build an app home page that:

Shows a welcome banner
Has a form to input some settings
Displays a table with mock data
Includes a button that opens a modal

Key Documentation

Module 4: Working with the GraphQL Admin API

4-5 days

This is where the real power comes in. The Admin API lets you read and modify store data.

4.1 Key Concepts

Shopify uses GraphQL exclusively (REST is deprecated as of April 2025)
All requests need authentication (handled by Shopify CLI template)
Access scopes determine what data you can access

4.2 Making API Requests

The Remix template sets this up for you:

// In a Remix loader or action
import { authenticate } from "../shopify.server";

export async function loader({ request }) {
  const { admin } = await authenticate.admin(request);
  
  // Query products
  const response = await admin.graphql(`
    query {
      products(first: 10) {
        edges {
          node {
            id
            title
            status
            totalInventory
          }
        }
      }
    }
  `);
  
  const data = await response.json();
  return json({ products: data.data.products.edges });
}

4.3 Common Operations to Learn

Operation	What it does
Query Products	`products(first: 10) { ... }`
Query Orders	`orders(first: 10) { ... }`
Query Customers	`customers(first: 10) { ... }`
Create Discount	`discountCodeBasicCreate(...)`
Update Product	`productUpdate(input: {...})`
Create Metafield	`metafieldsSet(metafields: [...])`

4.4 Access Scopes

In shopify.app.toml, define what data your app needs:

[access_scopes]
scopes = "read_products,write_products,read_orders"

App Store Requirement: Only request scopes you actually need!

4.5 Practice Exercise

Build a feature that:

Fetches the store’s top 5 products by inventory
Displays them in an IndexTable
Allows clicking a product to view details
Has a button to add a tag to selected products

Key Documentation

Module 5: Webhooks — Responding to Store Events

2-3 days

Webhooks let your app react when things happen in the store.

5.1 How Webhooks Work

Store Event (Order Created) 
       ↓
Shopify sends POST to your webhook URL
       ↓
Your app processes the event

5.2 Subscribing to Webhooks

In shopify.app.toml:

[webhooks]
api_version = "2025-01"

  [[webhooks.subscriptions]]
  topics = ["orders/create"]
  uri = "/webhooks/orders-create"

Handle in your app:

// app/routes/webhooks.orders-create.jsx
import { authenticate } from "../shopify.server";

export async function action({ request }) {
  const { payload, shop } = await authenticate.webhook(request);
  
  console.log(`New order from ${shop}:`, payload.id);
  
  // Do something with the order...
  // e.g., send to fulfillment, update inventory, notify team
  
  return new Response();
}

5.3 Mandatory Compliance Webhooks

Required for App Store submission:

[[webhooks.subscriptions]]
topics = ["customers/data_request"]
uri = "/webhooks/customers-data-request"

[[webhooks.subscriptions]]
topics = ["customers/redact"]  
uri = "/webhooks/customers-redact"

[[webhooks.subscriptions]]
topics = ["shop/redact"]
uri = "/webhooks/shop-redact"

Key Documentation

Module 6: Extending Shopify with UI Extensions

3-4 days

Extensions let you add UI directly into Shopify surfaces (admin, checkout, etc.).

6.1 Types of Extensions

Extension Type	Where It Appears
Admin Actions	Buttons/modals on admin pages
Admin Blocks	Cards on resource pages (orders, products)
Theme App Extensions	Storefront theme blocks
Checkout Extensions	Custom UI in checkout flow

6.2 Creating an Admin Extension

# Add an admin action extension
shopify app generate extension

# Select: Admin action
# This creates: extensions/my-admin-action/

Extension code (uses Polaris web components):

// extensions/my-admin-action/src/ActionExtension.jsx
import { useEffect, useState } from "react";
import { 
  reactExtension,
  useApi,
  Button,
  Text,
} from "@shopify/ui-extensions-react/admin";

export default reactExtension("admin.product-details.action.render", () => {
  return <ProductAction />;
});

function ProductAction() {
  const { data } = useApi();
  const productId = data.selected[0]?.id;

  return (
    <>
      <Text>Do something with product {productId}</Text>
      <Button onPress={() => console.log("Clicked!")}>
        Run Action
      </Button>
    </>
  );
}

6.3 Theme App Extensions

Add blocks merchants can place in their storefront themes:

<!-- extensions/my-theme-block/blocks/announcement.liquid -->
<div class="announcement-bar" style="background: {{ block.settings.bg_color }}">
  {{ block.settings.message }}
</div>

{% schema %}
{
  "name": "Announcement Bar",
  "target": "section",
  "settings": [
    {
      "type": "text",
      "id": "message",
      "label": "Message"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background Color",
      "default": "#FFD700"
    }
  ]
}
{% endschema %}

Key Documentation

Module 7: Real-World App Project

5-7 days

Build a complete app that solves a real merchant problem.

Recommended Starter Project: “Product Notes App”

This app lets merchants add internal notes to products that aren’t visible to customers.

Features:

Admin embedded page listing products with notes
Admin action to quickly add notes from product pages
Uses metafields to store notes (custom data)
Search and filter products by note content
Webhook to archive notes when products are deleted

Why This App Is Good for Learning:

Uses core patterns (embedded app, extensions, API, webhooks)
Provides real merchant value (organized workflows)
Simple enough to complete in a week
Complex enough to demonstrate competence

Project Milestones

Day	Milestone
1-2	Set up project, build app home with product list
3-4	Implement note creation/editing with metafields
5	Add admin action extension for quick notes
6	Add search, filtering, and polish UI
7	Test thoroughly, fix bugs, document

Module 8: Preparing for App Store Submission

3-4 days

8.1 Technical Requirements Checklist

Requirement	Status
Uses GraphQL Admin API (not REST)	☐
Uses latest App Bridge	☐
OAuth authentication works	☐
TLS/SSL certificate valid	☐
Compliance webhooks implemented	☐
No user interface bugs	☐
Only necessary access scopes requested	☐
App loads in admin.shopify.com	☐

8.2 App Listing Requirements

You’ll need:

App Name (unique, 30 chars or less, brand-first)
App Icon (1200×1200px, PNG/JPEG)
App Card Subtitle (concise value proposition)
Screenshots (1600×900px, showing functionality)
Feature Video (optional but recommended, 2-3 min)
Pricing Details (free trial recommended)
Privacy Policy URL
Test Credentials (for reviewer to test your app)
Demo Screencast (showing setup and features)

8.3 Submission Process

Complete automated checks in Partner Dashboard
Provide testing instructions and credentials
Submit for review
Respond to reviewer feedback (usually 1-3 exchanges)
App approved → Published to App Store!

Key Documentation

Quick Reference: Essential Links

Resource	URL
Partner Dashboard	partners.shopify.com
Shopify.dev Docs	shopify.dev/docs/apps
Polaris Components	polaris.shopify.com
GraphQL Explorer	Available in Partner Dashboard
CLI Reference	shopify.dev/docs/api/shopify-cli
Community Forum	community.shopify.com/c/shopify-apps

Your Learning Path Summary

Week 1:  Ecosystem + Setup + Polaris basics
Week 2:  GraphQL API + Webhooks  
Week 3:  Extensions + Start building real app
Week 4:  Complete app + Testing + Submit to App Store

Pro Tips

Start with shopify app dev — It handles auth, tunneling, and hot reload automatically
Use the GraphQL explorer in Partner Dashboard to test queries before coding
Install the Shopify app on your phone to see the mobile merchant experience
Read rejection reasons — Common issues are documented, avoid them from day 1
Build for a problem you understand — Apps solving real pain points succeed

Common App Store Rejection Reasons to Avoid

Issue	How to Prevent
Missing compliance webhooks	Implement all 3 mandatory webhooks from day 1
Using deprecated REST API	Use GraphQL Admin API exclusively
Requesting unnecessary scopes	Only request what you actually use
App doesn’t load in new admin domain	Use latest App Bridge, test on admin.shopify.com
UI bugs or broken features	Test thoroughly on development store
Incomplete app listing	Follow listing guidelines, include demo video
No privacy policy	Create and link a privacy policy page

Glossary

Term	Definition
Partner Dashboard	Where you manage your apps, stores, and earnings
Development Store	Free sandbox store for testing (never expires)
Access Scopes	Permissions your app requests (e.g., read_products)
Metafields	Custom data you can attach to Shopify resources
App Bridge	JavaScript library for admin integration features
Polaris	Shopify’s React component library for admin UI
Embedded App	App that runs inside the Shopify admin iframe
Theme App Extension	Code that runs on the merchant’s storefront
Webhook	HTTP callback triggered by store events
OAuth	Authentication protocol for app installation

Next Steps After This Course

Advanced Extensions — Checkout UI, Functions (custom discounts/shipping)
Billing API — Charge merchants for your app
App Performance — Optimize for Lighthouse scores
Internationalization — Support multiple languages
Analytics — Track app usage and merchant success

Based on official Shopify documentation from shopify.dev

Topic		Replies	Views
App Development Extensions checkout-ui-ext	2	90	July 4, 2025
Building Shopify Apps with Shopify Academy App Bridge app-bridge	0	37	September 5, 2025
Accelerated access to Shopify Editions 25' new dev experience Dev Platform dev-dashboard	2	74	September 3, 2025
Early access: The re-engineered `shopify app dev` Changelog	0	64	May 21, 2025
A more powerful Dev Assistant on shopify.dev Changelog	0	9	December 10, 2025

About any relevant courses or youtube video tutorials on shopify app development

Shopify App Development: Zero to App Store

Course Overview

Module 1: Understanding the Shopify Ecosystem

1.1 Core Concepts

1.2 How Apps Fit In

1.3 Learning Tasks

Key Documentation

Module 2: Development Environment Setup

2.1 Install Required Tools

2.2 Scaffold Your First App

2.3 Connect and Run

2.4 Understand the Project Structure

Key Documentation

Module 3: Building Your App UI with Polaris

3.1 Polaris Fundamentals

3.2 Essential Polaris Components to Learn

3.3 App Bridge for Native Features

3.4 Practice Exercise

Key Documentation

Module 4: Working with the GraphQL Admin API

4.1 Key Concepts

4.2 Making API Requests

4.3 Common Operations to Learn

4.4 Access Scopes

4.5 Practice Exercise

Key Documentation

Module 5: Webhooks — Responding to Store Events

5.1 How Webhooks Work

5.2 Subscribing to Webhooks

5.3 Mandatory Compliance Webhooks

Key Documentation

Module 6: Extending Shopify with UI Extensions

6.1 Types of Extensions

6.2 Creating an Admin Extension

6.3 Theme App Extensions

Key Documentation

Module 7: Real-World App Project

Recommended Starter Project: “Product Notes App”

Features:

Why This App Is Good for Learning:

Project Milestones

Module 8: Preparing for App Store Submission

8.1 Technical Requirements Checklist

8.2 App Listing Requirements

8.3 Submission Process

Key Documentation

Quick Reference: Essential Links

Your Learning Path Summary

Pro Tips

Common App Store Rejection Reasons to Avoid

Glossary

Next Steps After This Course

Related topics