Introduction to Claude Code
Claude Code is Anthropic's agentic terminal coding tool -- a command-line interface that brings Claude's intelligence directly into your development workflow. Unlike chat-based AI assistants that operate in a browser window, Claude Code lives in your terminal, reads your codebase, executes commands, edits files, and manages complex multi-step development tasks autonomously.
For Shopify developers, Claude Code is transformative. It understands the Shopify ecosystem -- Liquid templates, GraphQL Admin API schemas, Polaris components, App Bridge, Shopify Functions, and theme architecture -- and can work with all of them simultaneously within your actual project context.
Why Claude Code for Shopify Development?
Traditional AI coding assistants require you to copy-paste code snippets back and forth. Claude Code eliminates that friction entirely:
- Direct file access: Claude Code reads and edits your project files in place
- Command execution: It runs
shopify app dev,npm test, GraphQL introspection queries, and any other terminal command - Multi-file awareness: It understands how your Liquid sections relate to your JavaScript, how your app extensions connect to your backend, and how your GraphQL queries map to your data models
- Iterative development: It can scaffold, test, debug, and refine -- all in a single session
The term "agentic" means Claude Code doesn't just answer questions -- it takes actions. When you ask it to "add a metafield to the product page," it will read your theme files, identify the correct section, write the Liquid code, update the schema, and verify the changes compile correctly. It plans, executes, and validates.
Installation
Claude Code requires Node.js 18 or later. Install it globally via npm:
npm install -g @anthropic-ai/claude-code
Alternatively, if you prefer not to install globally:
npx @anthropic-ai/claude-code
- Node.js: Version 18.0.0 or later
- Operating System: macOS, Linux, or Windows via WSL2
- Terminal: Any terminal emulator (iTerm2, Terminal.app, Warp, Windows Terminal)
- Git: Recommended for version control integration
Authentication
After installation, launch Claude Code in any directory:
claude
On first launch, Claude Code will prompt you to authenticate. You have two options:
Option 1: Anthropic API Key (Direct)
export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here
claude
You can also add this to your shell profile (~/.zshrc or ~/.bashrc) for persistence:
echo 'export ANTHROPIC_API_KEY=sk-ant-api03-your-key-here' >> ~/.zshrc
source ~/.zshrc
Option 2: Claude Pro/Max Subscription (OAuth)
If you have a Claude Pro or Max subscription, Claude Code can authenticate via your Anthropic account using OAuth. Simply run claude and follow the browser-based login flow. This is the simplest option if you already pay for a Claude subscription.
claude
# Follow the OAuth prompt in your browser
The Claude Max plan ($100/month or $200/month) provides the best experience for heavy Shopify development. The higher-tier Max plan gives you significantly more usage, which matters when working with large Shopify codebases that consume substantial context. The Max plan usage is typically sufficient for a full day of intensive development.
Understanding the CLAUDE.md Project File
The CLAUDE.md file is the single most important configuration for effective Shopify development with Claude Code. It sits in your project root and provides persistent context that Claude Code reads at the start of every session.
Think of CLAUDE.md as a briefing document for an expert developer joining your team. It tells Claude Code:
- What the project is and how it's structured
- Which coding standards and conventions to follow
- What Shopify APIs and versions are in use
- How to run, test, and deploy the project
- Common pitfalls and project-specific rules
# Project: My Shopify App
## Overview
Remix-based Shopify app for inventory management.
Uses Shopify API version 2025-01.
## Tech Stack
- Framework: Remix (Shopify app template)
- Database: Prisma with SQLite (dev) / PostgreSQL (prod)
- UI: Shopify Polaris React components
- Auth: Shopify App Bridge + session tokens
## Commands
- `npm run dev` - Start development server
- `npm run build` - Production build
- `shopify app dev` - Start with Shopify CLI
- `npm test` - Run Vitest suite
- `npx prisma db push` - Sync database schema
## Coding Standards
- Use TypeScript strict mode
- All API calls must use the authenticated admin client
- Use Polaris components exclusively for UI (no custom CSS for standard patterns)
- GraphQL queries go in `app/graphql/` directory
- Validate all webhook payloads with HMAC verification
## API Version
Always use API version 2025-01. Do not use unstable.
CLAUDE.md Hierarchy
Claude Code supports a hierarchy of CLAUDE.md files:
| Location | Scope | Use Case |
|---|---|---|
~/.claude/CLAUDE.md | Global | Personal preferences across all projects |
./CLAUDE.md | Project root | Project-specific context and rules |
./src/CLAUDE.md | Subdirectory | Module-specific guidance |
Files are merged top-down, with more specific files taking precedence.
Context Window Management
Claude Code operates within a context window -- the total amount of text (code, conversation, file contents) it can hold in memory at once. Effective context management is critical for productive Shopify development sessions.
How Context Gets Consumed
Every interaction adds to the context:
- Your prompts and Claude's responses
- File contents that Claude reads
- Command output from terminal execution
- Error messages and logs
A large Shopify theme might have 50+ Liquid files. Reading all of them at once would consume significant context. Claude Code is intelligent about this -- it reads files on demand rather than loading everything upfront.
Context Management Commands
# Check current cost and token usage
/cost
# Compact the conversation (summarizes history to free context)
/compact
# Clear the entire conversation and start fresh
/clear
Use /compact when you're mid-task and want to free up context while preserving the gist of what you've discussed. Use /clear when you're switching to an entirely different task and don't need any prior context.
A good rhythm for Shopify development: use /compact after completing each discrete feature or bug fix, and /clear when switching between theme work and app development.
Strategies for Large Shopify Projects
- Work in focused sessions: Instead of asking Claude Code to "refactor the entire theme," focus on one section at a time
- Use CLAUDE.md liberally: Put stable context (API versions, conventions, file structure) in CLAUDE.md so it doesn't need to be repeated
- Leverage /compact after milestones: After completing a feature, compact before moving to the next
- Be specific about file paths: Say "Edit
sections/product-main.liquid" rather than "edit the product page" to avoid unnecessary file searches
Cost and Usage Tiers
Claude Code usage is metered based on tokens processed (both input and output). Understanding the pricing helps you budget effectively.
Subscription Plans
| Plan | Monthly Cost | Best For |
|---|---|---|
| Claude Pro | $20/month | Light usage, occasional coding assistance |
| Claude Max (5x) | $100/month | Regular development, most Shopify developers |
| Claude Max (20x) | $200/month | Heavy daily usage, full-time Shopify dev |
API Key Pricing
If using an API key directly, you pay per token:
| Model | Input (per 1M tokens) | Output (per 1M tokens) |
|---|---|---|
| Claude Sonnet 4 | $3.00 | $15.00 |
| Claude Opus 4 | $15.00 | $75.00 |
A single intensive Shopify development session (building a complete app feature) can process several hundred thousand tokens. With API key pricing, this can add up quickly. For regular development work, a Max subscription is almost always more cost-effective than API key usage.
Monitoring Usage
Use the /cost command frequently during development:
> /cost
Session cost: $2.34
Total tokens: 145,230 input / 23,456 output
Quick Start: Your First Shopify Session
Here's a complete workflow to verify everything is working:
# 1. Navigate to your Shopify project
cd ~/my-shopify-app
# 2. Create a CLAUDE.md file
echo "# My Shopify App\nRemix-based app using API version 2025-01" > CLAUDE.md
# 3. Launch Claude Code
claude
# 4. Ask Claude Code to explore your project
> Explore this project structure and summarize what you find
# 5. Start building
> Create a new page in the app that displays a list of products using GraphQL and Polaris components
Claude Code will read your project files, understand the structure, write the code, and can even run the development server to verify the result. Welcome to agentic Shopify development.
Next Steps
Now that Claude Code is installed and configured, proceed to Shopify Development Workflows to learn specific patterns for theme development, app building, and debugging with Claude Code.