Skip to main content

5 分钟上手 Claude Code Shopify 开发

· One min read
Shopify Dev MasterClass Team
Shopify Dev MasterClass Team
Core Contributors

If you have been hearing about Claude Code but are not sure how it fits into your Shopify development workflow, this guide will have you up and running in five minutes flat. By the end, you will have Claude Code installed, configured for Shopify work, and will have executed your first AI-assisted store operation.

Prerequisites​

Before we begin, make sure you have the following ready:

  • Node.js 18+ installed on your machine
  • A Shopify Partner account (free to create at partners.shopify.com)
  • A development store with some sample products
  • A Shopify Admin API access token with the appropriate scopes

Step 1: Install Claude Code​

Getting Claude Code on your machine takes a single command:

npm install -g @anthropic-ai/claude-code

Verify the installation:

claude --version

You should see the version number printed to your terminal. If you encounter permission errors, you may need to configure your npm prefix or use sudo (though we recommend fixing your npm permissions instead).

Step 2: Initialize Your Shopify Project​

Navigate to your Shopify project directory — or create a new one:

mkdir my-shopify-app && cd my-shopify-app
npm init -y
npm install @shopify/shopify-api @shopify/shopify-app-remix

Now launch Claude Code inside your project:

claude

Claude will analyze your project structure and understand the context automatically. You can immediately start asking it Shopify-specific questions.

Step 3: Configure MCP for Shopify Access​

The real power of Claude Code for Shopify development comes from connecting it to your store via MCP (Model Context Protocol). Create a .mcp.json file in your project root:

{
  "mcpServers": {
    "shopify-dev-store": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/shopify-mcp-server",
        "--store", "your-store.myshopify.com",
        "--token", "${SHOPIFY_ACCESS_TOKEN}"
      ],
      "env": {
        "SHOPIFY_ACCESS_TOKEN": ""
      }
    }
  }
}

Set your access token as an environment variable:

export SHOPIFY_ACCESS_TOKEN="shpat_xxxxxxxxxxxxxxxxxxxxx"

Now when you start Claude Code, it will have direct access to your Shopify store data through the MCP server.

Step 4: Your First AI-Assisted Commands​

With Claude Code connected to your store, try these useful starting commands:

Explore Your Store Data​

> List all products in my store with their variants and prices

Claude will use the MCP connection to query your store's Admin API and return structured product data directly in your terminal.

Generate Shopify Code​

> Create a webhook handler for orders/create that sends a Slack notification

Claude will generate production-ready code that handles webhook verification, payload parsing, and the Slack API call — all following Shopify best practices.

Debug API Issues​

> I'm getting a 429 error when querying the Storefront API. Help me implement proper rate limiting.

Claude understands Shopify's rate limiting model (the leaky bucket algorithm for REST, and query cost for GraphQL) and will generate appropriate retry logic.

The Most Useful Commands for Shopify Development​

Here are the Claude Code commands we find ourselves using daily:

Command PatternWhat It Does
> Show me the GraphQL query to fetch products with metafieldsGenerates correct Storefront or Admin API queries
> Create a Shopify Function for a volume discountScaffolds a complete Shopify Function with Rust or JavaScript
> Convert this REST API call to GraphQLMigrates deprecated REST patterns to modern GraphQL
> Review this Liquid template for performance issuesAnalyzes theme code and suggests optimizations
> Set up a CI pipeline for this Shopify appGenerates GitHub Actions or similar CI configuration

Common Gotchas and How to Avoid Them​

Gotcha 1: API Version Mismatch​

Claude may generate code targeting a different API version than what your app is configured to use. Always specify the version in your prompts:

> Generate a product query using the 2026-01 Admin API version

Or better yet, ensure your shopify.app.toml has the correct version, and Claude will pick it up from context.

Gotcha 2: Scope Confusion​

If Claude cannot access certain store data through MCP, it is likely a scopes issue. Make sure your access token includes the scopes you need:

# Common scopes for development
read_products, write_products
read_orders, write_orders
read_customers
read_inventory, write_inventory

Gotcha 3: Token Security​

Never commit your .mcp.json with hardcoded tokens. Always use environment variables as shown above, and add .mcp.json to your .gitignore:

echo ".mcp.json" >> .gitignore

Gotcha 4: GraphQL Query Complexity​

Shopify's GraphQL API has query cost limits. If Claude generates a deeply nested query, ask it to optimize:

> This query exceeds the cost limit. Refactor it to use pagination and reduce nesting.

What is Next​

Now that you have Claude Code set up for Shopify development, you are ready to supercharge your workflow. In upcoming posts, we will cover:

  • Building a complete Shopify app from scratch with Claude Code as your pair programmer
  • Advanced MCP configurations for multi-store management
  • Using Claude Code to migrate themes from Liquid to Hydrogen

The combination of Claude Code and Shopify development is genuinely transformative. Once you experience the speed of having an AI assistant that understands the Shopify API surface area, going back to documentation-only development feels painfully slow.

Give it a try, and let us know how it goes.