Claude Builds End-to-End Shopify Stores via CLI + Skills

Shopify-Claude Integration Setup

The workflow starts with a Shopify Partner account, which provides a sandbox for building and testing stores with fake payments and test users before promoting to a live merchant account. Creators install the Shopify CLI via its docs command, select the React app template with TypeScript for type safety, and run it to generate a basic app template with dependencies. They then add the Shopify AI toolkit, including the MCP (install command from docs for Claude) for Shopify API docs and validations, and the CLI plugin (installed via commands, then reload plugins) bundling agents and skills. The MCP exposes tools to Claude, while the CLI bridges local changes to the cloud store.

A claude.md file guides Claude with channel best practices (full video on channel covers details). Hooks in .claude/settings.json act as guardrails, like a pre-tool-use script that blocks unapproved pushes to the app.

Custom Skills for Efficient Iteration

Creators add a Gemini image generation skill, which calls the Gemini CLI (no separate API key needed) to generate and save real images matching UI style, launched in parallel via bash in YOLO mode to avoid permission prompts. SVG placeholders get replaced this way.

The prototype skill renders design changes as a previewable HTML file first (details in skill.md with two-phase workflow), opened in a new tab for approval before applying to the app. This keeps iterations cheap and token-efficient versus direct app changes.

Building, Implementing, and Deploying the Store

Users prompt Claude with desired landing page style; it loads the prototype skill to generate HTML, previews it, and waits. After approval (and image gen if needed), Claude converts HTML to the development app, mimicking the design exactly. It then syncs to the live store URL using Shopify CLI and MCP tools.

For functionality, authenticate the Shopify Admin API via CLI (shopify app auth or similar with OAuth link). Extend permissions with o command for write_products and read/write_publications. Claude then adds products, pages, cart features via MCP/CLI. Final manual steps: add payment details and select a plan to remove password protection and enable sales.

This pipeline ships real ecom stores, with full claude.md, skills, and configs in AI Labs Pro.

Production Outcomes

The resulting store has polished visuals from Gemini-generated images, functional products in admin panel and frontend with cart, and live syncing. HTML prototyping avoids wasting time/tokens on slow app iterations. No eval scores or metrics provided; focus is on shipping sellable stores without agencies.