Shopify Development

# Shopify Development Skill

Comprehensive skill for building on Shopify platform: apps, extensions, themes, and API integrations.

## Features

- **App Development** - OAuth authentication, GraphQL Admin API, webhooks, billing integration
- **UI Extensions** - Checkout, Admin, POS customizations with Polaris components
- **Theme Development** - Liquid templating, sections, snippets
- **Shopify Functions** - Custom discounts, payment, delivery rules

## Structure

```
shopify-development/
├── SKILL.md              # Main skill file (AI-optimized)
├── README.md             # This file
├── references/
│   ├── app-development.md    # OAuth, API, webhooks, billing
│   ├── extensions.md         # UI extensions, Functions
│   └── themes.md             # Liquid, theme architecture
└── scripts/
    ├── shopify_init.py       # Interactive project scaffolding
    ├── shopify_graphql.py    # GraphQL utilities & templates
    └── tests/                # Unit tests
```

## Validated GraphQL

All GraphQL queries and mutations in this skill have been validated against Shopify Admin API 2026-01 schema using the official Shopify MCP.

## Quick Start

```bash
# Install Shopify CLI
npm install -g @shopify/cli@latest

# Create new app
shopify app init

# Start development
shopify app dev
```

## Usage Triggers

This skill activates when the user mentions:

- "shopify app", "shopify extension", "shopify theme"
- "checkout extension", "admin extension", "POS extension"
- "liquid template", "polaris", "shopify graphql"
- "shopify webhook", "shopify billing", "metafields"

## API Version

Current: **2026-01** (Quarterly releases with 12-month support)

## License

MIT


# App Development Reference

Guide for building Shopify apps with OAuth, GraphQL/REST APIs, webhooks, and billing.

## OAuth Authentication

### OAuth 2.0 Flow

**1. Redirect to Authorization URL:**

```
https://{shop}.myshopify.com/admin/oauth/authorize?
  client_id={api_key}&
  scope={scopes}&
  redirect_uri={redirect_uri}&
  state={nonce}
```

**2. Handle Callback:**

```javascript
app.get("/auth/callback", async (req, res) => {
  const { code, shop, state } = req.query;

  // Verify state to prevent CSRF
  if (state !== storedState) {
    return res.status(403).send("Invalid state");
  }

  // Exchange code for access token
  const accessToken = await exchangeCodeForToken(shop, code);

  // Store token securely
  await storeAccessToken(shop, accessToken);

  res.redirect(`https://${shop}/admin/apps/${appHandle}`);
});
```

**3. Exchange Code for Token:**

```javascript
async function exchangeCodeForToken(shop, code) {
  const response = await fetch(`https://${shop}/admin/oauth/access_token`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      client_id: process.env.SHOPIFY_API_KEY,
      client_secret: process.env.SHOPIFY_API_SECRET,
      code,
    }),
  });

  const { access_token } = await response.json();
  return access_token;
}
```

### Access Scopes

**Common Scopes:**

- `read_products`, `write_products` - Product catalog
- `read_orders`, `write_orders` - Order management
- `read_customers`, `write_customers` - Customer data
- `read_inventory`, `write_inventory` - Stock levels
- `read_fulfillments`, `write_fulfillments` - Order fulfillment
- `read_shipping`, `write_shipping` - Shipping rates
- `read_analytics` - Store analytics
- `read_checkouts`, `write_checkouts` - Checkout data

Full list: https://shopify.dev/api/usage/access-scopes

### Session Tokens (Embedded Apps)

For embedded apps using App Bridge:

```javascript
import { getSessionToken } from '@shopify/app-bridge/utilities';

async function authenticatedFetch(url, options = {}) {
  const app = createApp({ ... });
  const token = await getSessionToken(app);

  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'Authorization': `Bearer ${token}`
    }
  });
}
```

## GraphQL Admin API

### Making Requests

```javascript
async f