Shopify Apps Development

A Shopify app development skill for building embedded apps, managing the Shopify Admin API, implementing OAuth authentication, and creating custom storefront experiences.

When to Use

Choose Shopify Apps when:

• Building embedded apps that run within the Shopify Admin
• Creating custom storefront features using the Storefront API
• Implementing webhook handlers for order, product, and inventory events
• Building Shopify app extensions like checkout UI and theme app extensions

Consider alternatives when:

• Simple theme customization — use Shopify theme editor or Liquid templates
• Building a standalone e-commerce site — use a full e-commerce framework
• Integrating with Shopify once — use the REST API directly without building an app

Quick Start

Copy
# Create a new Shopify app with Remix
npm init @shopify/app@latest my-shopify-app
cd my-shopify-app
npm run dev

Copy
// Shopify Remix app - Product management
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { authenticate } from "../shopify.server";
import { Page, Layout, Card, DataTable } from "@shopify/polaris";

export const loader = async ({ request }) => {
  const { admin } = await authenticate.admin(request);

  const response = await admin.graphql(`
    query {
      products(first: 25) {
        edges {
          node {
            id
            title
            status
            totalInventory
            priceRangeV2 {
              minVariantPrice {
                amount
                currencyCode
              }
            }
            images(first: 1) {
              edges {
                node {
                  url
                }
              }
            }
          }
        }
      }
    }
  `);

  const data = await response.json();
  return json({ products: data.data.products.edges.map(e => e.node) });
};

export default function Products() {
  const { products } = useLoaderData<typeof loader>();

  const rows = products.map(product => [
    product.title,
    product.status,
    product.totalInventory,
    `$${product.priceRangeV2.minVariantPrice.amount}`
  ]);

  return (
    <Page title="Products">
      <Layout>
        <Layout.Section>
          <Card>
            <DataTable
              columnContentTypes={["text", "text", "numeric", "numeric"]}
              headings={["Product", "Status", "Inventory", "Price"]}
              rows={rows}
            />
          </Card>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

Core Concepts

Shopify App Architecture

Component	Purpose	Technology
App Backend	OAuth, API calls, webhooks	Remix/Node.js
Admin UI	Embedded admin interface	Polaris + App Bridge
Theme Extension	Storefront UI blocks	Liquid + Web Components
Checkout Extension	Checkout customization	Checkout UI Extensions
Function Extension	Backend logic (discounts, shipping)	Wasm (Rust/JS)
Webhooks	Event-driven updates	HTTP POST handlers

Webhook Implementation

Copy
import { DeliveryMethod } from "@shopify/shopify-api";

// Register webhooks
const webhookHandlers = {
  ORDERS_CREATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/webhooks/orders/create",
    callback: async (topic, shop, body) => {
      const order = JSON.parse(body);
      console.log(`New order ${order.name} from ${shop}`);

      // Process the order
      await processNewOrder({
        shopifyOrderId: order.id,
        email: order.email,
        totalPrice: order.total_price,
        lineItems: order.line_items.map(item => ({
          productId: item.product_id,
          variantId: item.variant_id,
          quantity: item.quantity,
          price: item.price
        }))
      });
    }
  },
  PRODUCTS_UPDATE: {
    deliveryMethod: DeliveryMethod.Http,
    callbackUrl: "/webhooks/products/update",
    callback: async (topic, shop, body) => {
      const product = JSON.parse(body);
      await syncProductUpdate(shop, product);
    }
  }
};

Configuration

Option	Description	Default
api_key	Shopify app API key	Required
api_secret	Shopify app API secret	Required
scopes	OAuth permission scopes	["read_products"]
host_name	App host URL	Required
api_version	Shopify API version	Latest stable
embedded	Run as embedded app	true
billing	App billing configuration	null
webhooks	Webhook topics to subscribe	[]

Best Practices

1. Use Shopify's GraphQL API instead of REST for new development — GraphQL returns only the fields you request, reduces API calls through nested queries, and has higher rate limits
2. Implement idempotent webhook handlers because Shopify may send the same webhook multiple times; use the X-Shopify-Webhook-Id header to deduplicate and prevent double-processing orders
3. Follow Polaris design guidelines for admin UI to ensure your app looks native within the Shopify Admin and passes app store review requirements
4. Handle API rate limits gracefully by implementing exponential backoff and using bulk operations for large data processing instead of making thousands of individual API calls
5. Test with development stores rather than production stores during development; Shopify provides free development stores through the Partner Dashboard that have all API features enabled

Common Issues

OAuth redirect loop after installation: The app keeps redirecting to Shopify's OAuth page instead of completing installation. Verify that your app URL and redirect URI in the Shopify Partner Dashboard match your server configuration, and ensure session tokens are stored correctly after the OAuth callback.

Webhook HMAC validation failing: Shopify signs webhooks with a SHA-256 HMAC that must be verified against the raw request body. Using parsed JSON instead of the raw body string for HMAC calculation produces a different hash. Always compute the HMAC from the raw body bytes before any JSON parsing.

Embedded app session issues: Embedded apps use session tokens from Shopify App Bridge that expire frequently. Implement automatic token refresh using the App Bridge getSessionToken method, and handle 401 responses by requesting a new token before retrying the failed request.