Claude API Shopify App Integration Guide

Integrating the Claude API into a Shopify app means adding AI-generated product descriptions, smarter customer support replies, or conversational search to a storefront or admin app without rebuilding your checkout logic. The core pattern is the same regardless of which Shopify surface you're building for: a Shopify extension or embedded app calls a backend, that backend calls Claude, and the result flows back into the storefront or admin UI.

This guide covers the three most common Shopify + Claude integration patterns — merchandising copy generation, customer support automation, and AI-powered product search/recommendations — plus the architecture decisions that matter: where to put your API key, how to handle Shopify's app review requirements, and how to keep latency acceptable inside Shopify's embedded app iframe.

Why Shopify apps need a backend proxy for Claude

Shopify apps run in two places: the embedded admin app (an iframe inside Shopify admin, usually built with Remix or Node) and theme extensions / checkout extensions (client-side JavaScript running in the storefront). Neither of these should call Claude directly from the browser or from theme app extension JS — doing so would expose your API key to anyone who opens dev tools on the storefront.

The correct pattern is:

1. Storefront widget or admin UI sends a request to your app's backend (the same server handling Shopify OAuth and webhooks).
2. Your backend calls Claude (directly via Anthropic's API, or through a wrapper like SubToAPI).
3. The backend returns only the generated text/JSON to the client.

This also gives you a place to enforce rate limits per shop, cache repeated prompts (e.g., the same product description request), and log usage per merchant for billing.

Pattern 1: AI product description generation

The most common use case is a bulk "generate descriptions" button in the Shopify admin app. The flow:

// Shopify admin app backend route
app.post("/api/generate-description", async (req, res) => {
  const { title, tags, vendor } = req.body;

  const response = await fetch("https://api.subtoapi.app/v1/messages", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${process.env.SUBTOAPI_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "claude-sonnet-4",
      max_tokens: 300,
      messages: [{
        role: "user",
        content: `Write a 2-sentence product description for "${title}" by ${vendor}. Tags: ${tags.join(", ")}. Tone: direct, benefit-focused, no clichés.`,
      }],
    }),
  });

  const data = await response.json();
  const description = data.content[0].text;

  // write back to Shopify via Admin API
  res.json({ description });
});

For bulk operations across hundreds of SKUs, queue the requests (BullMQ, Shopify's background job pattern, or a simple rate-limited loop) rather than firing them all at once — Shopify's own Admin API rate limits and Claude's throughput both need headroom. If you're generating descriptions for a large catalog, batching requests sequentially with a short delay avoids 429s on both ends.

Pattern 2: Customer support replies

Shopify apps that handle support tickets (via Shopify Inbox, Gorgias-style helpdesks, or a custom widget) can use Claude to draft replies using order context pulled from the Admin API:

const orderContext = await getOrderDetails(orderId); // Shopify Admin API call

const draft = await fetch("https://api.subtoapi.app/v1/messages", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.SUBTOAPI_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    model: "claude-sonnet-4",
    max_tokens: 400,
    messages: [{
      role: "user",
      content: `Customer asks: "${customerMessage}"\n\nOrder status: ${orderContext.fulfillmentStatus}, shipped ${orderContext.shippedDate}.\nDraft a short, helpful reply.`,
    }],
  }),
});

Always keep a human-in-the-loop for support replies — draft-and-review, not auto-send, especially for refund or cancellation requests. This keeps you compliant with most helpdesk tooling's expectations and avoids costly mistakes.

Pattern 3: Conversational product search

For a chat-style "find me a gift under €50" widget on the storefront, use Claude's tool use feature to let the model call your product search function rather than hallucinating SKUs:

{
  "name": "search_products",
  "description": "Search the store catalog by price range, category, or keyword",
  "input_schema": {
    "type": "object",
    "properties": {
      "max_price": { "type": "number" },
      "category": { "type": "string" },
      "keyword": { "type": "string" }
    }
  }
}

Claude decides when to call search_products, your backend executes the actual Shopify Storefront API query, and you feed the results back to Claude to form a natural-language response with real product links. This avoids the single biggest failure mode of AI shopping assistants: recommending products that don't exist or are out of stock.

Handling Shopify's app review and billing

If you're publishing to the Shopify App Store, note that:

• App review checks that any third-party API usage (including AI providers) is disclosed in your privacy policy.
• You'll likely want usage-based billing tied to Shopify's Billing API — track Claude token usage per shop and map it to your own pricing tiers.
• Embedded apps have strict Content Security Policy requirements; make sure your AI calls happen server-side, not from iframe JavaScript, to avoid CSP violations.

Why wrap Claude through an API layer instead of calling it raw

Direct Anthropic API access works fine for a single internal tool, but Shopify apps serving multiple merchants benefit from an API layer that gives each merchant or environment its own key, exposes usage metadata for billing, and supports streaming for chat-style widgets without you building that plumbing yourself. SubToAPI turns your Claude access into application-scoped API keys (sub_live_...) with per-key usage tracking — useful if you're billing merchants based on AI usage or just want clean separation between dev and production Shopify app instances. Start with the quickstart to get a key, then reference /docs/messages for request formats and /docs/streaming if you're building the chat-style search widget.

FAQs

Can I call the Claude API directly from Shopify theme app extension JavaScript? No. Theme extensions run in the customer's browser, so any API key embedded there is exposed. Always proxy requests through your app's backend server.

Does Claude integrate with Shopify's Admin API data directly? Not natively — you fetch order, product, or customer data via Shopify's Admin or Storefront API in your backend, then pass the relevant fields into your Claude prompt or tool call.

What's the fastest way to prototype a Claude feature for a Shopify app? Build a standalone Node endpoint that takes Shopify webhook or Admin API data as input, calls Claude, and returns JSON — test it with curl before wiring it into your embedded app UI. See /docs/quickstart for a minimal working example.