Shopify DevKit

A Claude Code plugin that scaffolds Shopify Online Store 2.0 themes, generates Liquid sections with settings schemas, scaffolds Shopify Functions and checkout UI extensions, audits themes for performance and security issues, and writes idiomatic Admin API GraphQL.

What it does

• Scaffolds a Shopify Online Store 2.0 theme with the correct folder layout.
• Generates Liquid sections with schema, blocks, and presets that match Shopify conventions.
• Scaffolds a Shopify Function in Rust or JavaScript with shopify.extension.toml, input query, and run entry point.
• Scaffolds a checkout UI extension with extension.toml and a React entry file.
• Audits a theme for render-blocking Liquid, missing asset_url filters, unescaped user data, oversized images, excessive section counts, and missing form accessibility attributes.
• Writes Admin API GraphQL queries and mutations with cursor pagination and fragments.

Example

> /shopify-devkit:shopify-function product-discount rust

Handle: volume-discount
Will write:
  extensions/volume-discount/shopify.extension.toml
  extensions/volume-discount/src/run.graphql
  extensions/volume-discount/src/main.rs
  extensions/volume-discount/Cargo.toml
Build and deploy with:
  shopify app function typegen && shopify app build && shopify app deploy

Installation

From the Anthropic plugin marketplace:

/plugin install shopify-devkit

To install from a local directory for development:

claude --plugin-dir ./shopify-devkit

Commands

All commands are invoked from inside Claude Code with /shopify-devkit:<command>.

Command	What it does	Example
/shopify-devkit:doctor	Check the local Shopify toolchain (shopify CLI, node, Rust wasm target). Runs real diagnostic commands, not a prompt.	/shopify-devkit:doctor
/shopify-devkit:dev	Start the Shopify app dev server with port-conflict recovery and tunnel URL extraction.	/shopify-devkit:dev
/shopify-devkit:full-audit	One-shot full audit: doctor + theme-audit + extension-toml checks (chained). Opt-in only.	/shopify-devkit:full-audit ./
/shopify-devkit:theme-init	Scaffold a Shopify Online Store 2.0 theme.	/shopify-devkit:theme-init my-store-theme
/shopify-devkit:liquid-section	Generate a Liquid section with schema and blocks.	/shopify-devkit:liquid-section featured-collection
/shopify-devkit:shopify-function	Scaffold a Shopify Function.	/shopify-devkit:shopify-function product-discount rust
/shopify-devkit:checkout-ui-ext	Scaffold a checkout UI extension.	/shopify-devkit:checkout-ui-ext upsell-banner
/shopify-devkit:theme-audit	Audit a theme for performance and security issues.	/shopify-devkit:theme-audit ./theme
/shopify-devkit:admin-api-query	Generate an Admin API GraphQL query or mutation.	/shopify-devkit:admin-api-query list products with variants

Agents

The plugin ships with two subagents that Claude may delegate to automatically when the work fits:

• liquid-author: specialized Liquid template author.
• shopify-function-author: specialized Shopify Functions author.

You can also invoke an agent explicitly, for example:

Ask the liquid-author agent to write a hero banner section with three blocks.

Hooks

On session start, the plugin runs a small Node.js script that inspects the current working directory for Shopify artefacts. If it finds shopify.app.toml, shopify.theme.toml, the Online Store 2.0 theme layout (sections/ + snippets/ + templates/), or subdirectories under extensions/ containing shopify.extension.toml, it injects a one-line context note so Claude knows which skills apply without the user having to say so. The hook is silent if nothing matches.

A second hook fires after every Bash tool call (PostToolUse). It watches for shopify app build, shopify app deploy, shopify theme push, and the Rust cargo wasi build, and injects a short follow-up note: what to check next, which skill to run if something looks off.

Both hooks require Node.js on PATH. Without Node, they quietly no-op and every skill and command still works.

Reference files

A reference/ directory ships deeper knowledge that skills read only when they need it.

• reference/function-api-limits.md documents Shopify Function runtime constraints (128 KB input/output, 5 ms billed time, 11 M fuel, no network, allowed and blocked APIs per language, input query and output schema rules, API version pinning). The shopify-function skill reads this when debugging a rejected or throttled function.

Requirements

• Claude Code v2.0 or later.
• Node.js on PATH for SessionStart and PostToolUse hooks (any current LTS). If Node is missing, hooks no-op silently; skills and commands still work.
• For local theme development: Shopify CLI version 3.58 or later on PATH.
• For Shopify Functions in Rust: Rust 1.76 or later with the wasm32-wasi target installed.
• For Shopify Functions in JavaScript: Node.js 20.12 or later.
• For checkout UI extensions: Node.js 20.12 or later.

Safety

1. Destructive operations (removing files, overwriting a theme, deploying a function) always require explicit user confirmation. They are never part of the default workflow.
2. Read-only operations (reading theme files, listing sections, parsing schema) run without prompting because they are safe.
3. The plugin never prints Shopify API tokens, shop access tokens, or values from .env files into the conversation.
4. File writes are announced before they happen so the user can stop them.
5. The audit skill reports findings only. It does not modify theme files automatically.

Known limitations

• theme-audit is a static review. It reads Liquid, JSON, and template files without rendering them, so issues that only surface with real product data will not be caught.
• shopify-function targets API version 2025-01. Earlier API versions may have different input or output schemas.
• checkout-ui-ext scaffolds a React entry but does not bundle or deploy. The Shopify CLI handles build and deploy.
• admin-api-query generates GraphQL but does not execute it. The plugin never authenticates with the Admin API.
• Version 1.0 does not cover Hydrogen storefronts, Shopify Flow automations, or Polaris admin UI extensions.

Development

To iterate locally on the plugin itself:

claude --plugin-dir ./shopify-devkit

Validate the plugin structure:

claude plugin validate ./shopify-devkit

License

MIT. See LICENSE.