From shopify-commerce
Guides Shopify app development with Remix template: app types, OAuth flow, session tokens, App Bridge, webhooks, extensions, and embedded admin apps.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin shopify-commerceThis skill is limited to using the following tools:
**Fetch live docs**:
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Guides MCP server integration in Claude Code plugins via .mcp.json or plugin.json configs for stdio, SSE, HTTP types, enabling external services as tools.
Fetch live docs:
https://shopify.dev/docs/apps/build for app development overviewsite:shopify.dev app bridge for current App Bridge APIs and CDN versionsite:shopify.dev shopify-app-template-remix for Remix template patternssite:shopify.dev shopify-app-remix authenticate for authentication APIssite:github.com shopify shopify-app-template-remix for latest template sourceshpca_ prefix)shppa_ prefix)The official template (shopify-app-template-remix):
shopify app init
# Select "Remix" template
# Provides: auth, session storage, webhook handling, Polaris UI
| File | Purpose |
|---|---|
app/shopify.server.ts | Initializes @shopify/shopify-app-remix (auth, sessions, webhooks) |
app/routes/auth.$.tsx | Handles OAuth callback |
app/routes/webhooks.tsx | Webhook endpoint |
app/routes/app._index.tsx | Main app UI (embedded in admin) |
app/routes/app.tsx | App layout with App Bridge provider |
shopify.app.toml | App configuration (scopes, URLs, extensions) |
prisma/schema.prisma | Database schema for session storage |
Fetch live docs for the current template file structure — files and patterns evolve with
@shopify/shopify-app-remixversions.
// Pattern: authenticate admin request, call GraphQL, return data
// Fetch live docs for current authenticate.admin() API shape
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { authenticate } from "../shopify.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const { admin } = await authenticate.admin(request);
const response = await admin.graphql(`{ shop { name } }`);
const { data } = await response.json();
return json({ shopName: data.shop.name });
};
shpua_ prefix)The Remix template handles steps 1-5 automatically via authenticate.admin().
Fetch live docs: Web-search
site:shopify.dev oauth flow app installationfor current OAuth endpoints and token exchange details.
Modern Shopify apps use JWT session tokens instead of cookies:
Authorization: Bearer headeriss (shop domain), dest (shop URL), sub (user ID), aud (API key)Fetch live docs: Web-search
site:shopify.dev session tokens jwtfor current token payload structure and verification.
JavaScript library for embedded apps to communicate with Shopify admin:
| Feature | Description |
|---|---|
| Navigation | Redirect to admin pages, products, orders |
| Toast | Temporary notifications (success/error) |
| Modal | Dialog overlays |
| Resource picker | Select products, collections, customers |
| Title bar | Set title and action buttons |
| Full-screen | Toggle full-screen mode |
| Loading indicator | Show/hide loading state |
Note: App Bridge v1/v2 are superseded. Use the current CDN-hosted version (automatically included with @shopify/shopify-app-remix).
Fetch live docs: The App Bridge API surface changes frequently. Web-search
site:shopify.dev app bridgefor current methods, resource picker options, and modal API.
# Stable structure — fetch live docs for current field names
name = "My Shopify App"
client_id = "your-api-key"
[access_scopes]
scopes = "read_products,write_products,read_orders"
[auth]
redirect_urls = ["https://your-app.com/auth/callback"]
[webhooks]
api_version = "2025-01" # Update to latest stable version
Fetch live docs: Web-search
site:shopify.dev shopify.app.toml configurationfor current TOML fields — new sections are added for extensions, app proxy, POS, etc.
Apps can provide extensions that appear in various Shopify surfaces:
| Extension Type | Location | Use Case |
|---|---|---|
| Theme app extension | Storefront (in theme) | Product badges, custom sections |
| Checkout UI extension | Checkout page | Custom fields, upsells |
| Post-purchase extension | After payment | Upsell/cross-sell |
| POS UI extension | Point of Sale | Custom POS actions |
| Admin action extension | Admin pages | Bulk actions, custom workflows |
| Admin block extension | Resource pages | Embedded cards in admin |
Fetch live docs: Extension types expand regularly. Web-search
site:shopify.dev app extensions typesfor the current list and configuration patterns.
Request minimum necessary scopes:
| Scope | Access |
|---|---|
read_products / write_products | Products, variants, collections |
read_orders / write_orders | Orders, transactions |
read_customers / write_customers | Customer records |
read_inventory / write_inventory | Inventory levels |
read_fulfillments / write_fulfillments | Fulfillment orders |
read_shipping / write_shipping | Shipping and carrier services |
read_content / write_content | Pages, blogs, articles |
read_themes / write_themes | Theme files |
Fetch live docs: New scopes are added with new API features. Web-search
site:shopify.dev access scopesfor the full current list.
// Pattern: authenticate webhook, switch on topic, process
// Fetch live docs for current webhook topic constants
export const action = async ({ request }: ActionFunctionArgs) => {
const { topic, shop, payload } = await authenticate.webhook(request);
switch (topic) {
case "APP_UNINSTALLED":
// Clean up shop data
break;
case "CUSTOMERS_DATA_REQUEST":
case "CUSTOMERS_REDACT":
case "SHOP_REDACT":
// Handle mandatory GDPR webhooks
break;
}
return new Response();
};
shopify app init) — do not build from scratchcustomers/data_request, customers/redact, shop/redact)authenticate.admin() in every loader/action that needs store dataFetch the Shopify app development guide, App Bridge docs, and Remix template source for exact APIs, session token structure, and extension patterns before implementing.